SVG - Vektorgrafiken für's Webdesign

Bilder auf Webseiten werden normalerweise in zwei Formaten gerendert - als Raster- und als Vektorbilder. Rasterbilder sind Bilder in Pixeln und werden normalerweise mit dem <img>-Tag in HTML geschrieben. Sie müssen entsprechend der Gerätebreite oder -höhe skaliert oder in der Größe angepasst werden, um die Reaktionsfähigkeit und Auflösungen zu erhalten. Vektorbilder hingegen verwenden Linien, Punkte und Formen, um Bilder darzustellen. Sie können in HTML mit dem <img>- oder <svg>-Tag gerendert werden.

Was ist eine SVG-Datei?

SVG steht für Scalable Vector Graphics, ein Dateiformat, das 2D-Vektorgrafiken in einer XML-Auszeichnungssprache definiert.

WarumSVG nutzen?

• Perfekte Auflösungen: SVG sieht auf allen Retina-Displays hervorragend aus. SVG sind auflösungsunabhängig und nicht auf ein bestimmtes Gerät beschränkt. Wo Dateitypen wie JPG und PNG beim Zoomen unscharf oder gestreckt werden können, behalten SVG die gleiche Qualität bei. Das macht sie zu einer bevorzugten Wahl für responsives Design.
• Kleine Dateigröße: SVG-Dateien sind in der Regel kleiner als JPEG oder PNG und lassen sich leichter komprimieren, wenn sie optimiert werden. Dies ist ein wesentlicher Vorteil im Webdesign, da kleine Bilder schneller geladen werden.
• Einfache Bearbeitung und Flexibilität: Man kann SVG-Änderungen innerhalb des Codes in einem Texteditor entweder in HTML oder CSS vornehmen. Änderungen umfassen dabei Größe, Schriftarten, Farben, Animationen und Form. Diese Komponenten sind sehr flexibel und lassen sich im Gegensatz zu Rasterbildern leichter innerhalb des Codes verändern. Extern, neben Texteditoren, können sie mit einem Grafikprogramm wie Sketch erstellt und bearbeitet werden.
• Leichte Zugänglichkeit: Da sie nur in Code geschrieben sind, können SVG-Bilder durchsucht, indiziert und mit Skripten versehen werden. Aufgrund ihrer Natur als XML-Textdateien sind sie leicht lesbar und können von Suchmaschinen indiziert werden
• Kontrolle: Ein Entwickler, der SVG verwendet, hat die vollständige Kontrolle über die SVG-Zeichnung, die Effekte, Animationen, den Text und die Platzierung. Da SVG selbst XML-Code ist, ist jedes SVG-Element auch mit dem SVG-DOM verfügbar und kann mit JavaScript manipuliert werden.

Wo kann man SVG-Dateien gut einsetzen?

SVG können nur bestimmte Details darstellen. Man kann sie vielseitig einsetzen. Ob für Logos, interaktive Karten, Diagramme, Graphen, Illustrationen, Texteffekte, Icons, Interfaces oder Apps.

Wie man SVG anzeigt

Es gibt zwei Wege, wie man SVG-Dateien im Code darstellen kann.

Direkt in einem <img>-Tag

Wenn sie als Dateierweiterung gespeichert werden, können SVG-Dateien direkt in den <img>-Tag eingebettet werden. Beispiel:

<img src="myhouse.svg" alt="house">

Diese Datei können Sie auch als Hintergrundbild verwenden.

background-image: url('myhouse.svg');

Wenn es innerhalb des <img>-Tags platziert wird, kann es auch die verschiedenen Eigenschaften, Methoden und Selektoren des <img>-Tags übernehmen und im CSS gestaltet werden.

Verwendung des <svg>-Tags

SVG kann inline in HTML in einem <svg> </svg>-Tag verwendet werden. Das Schöne an SVG ist nicht, dass wir Bilder in SVG-Formaten ablegen können, sondern dass wir unsere eigenen Zeichnungen, Illustrationen und Diagramme im Code selbst erstellen können. Im Rahmen dieses Artikels werden wir uns darauf konzentrieren.

Einige allgemeine Eigenschaften und Werte in SVG

SVG verfügen über einige allgemeine Tags, Eigenschaften und Werte. Wir werden diese Begriffe bei der Verwendung von SVG immer wieder finden.

1. Vordefinierte Formelemente: Dies sind Tags zum Zeichnen von einfachen und komplexen Elementen in SVG. Dazu gehören: <rect> für Rechtecke, <circle> für Kreise, <ellipse> für Ellipsen, <line> für Linien, <ellipse> für Ellipsen, <polygon> für Polygone und <path> für Pfade.
2. Style: Für die Gestaltung innerhalb des SVG-Tags.
3. Cxund cy: Diese Attribute definieren die x- und y-Koordinaten des Mittelpunkts eines Elements.
4. Rxund ry: Damit wird der Radius eines Elements in der x- und y-Achse definiert. Die Kurzform ist r.
5. Stroke und stroke-width: Damit wird die Umrissfarbe und die Breite bzw. Größe des Umrisses festgelegt.
6. Fill: Damit wird die Farbe des Elements definiert.
7. Def: Def ist die Abkürzung für Definition und wird verwendet, um wiederverwendbare Elemente zusammenzufassen
8. Text: Definiert einen Text.

Wie man SVG-Dateien erstellt: Zeichnen von Grundelementen

Ein RechteckmitabgerundetenEcken

<html> 
  <body>
    <svg width="400" height="180">
      <rect x="50" y="20" rx="20" ry="20" width="150" height="150" fill= "orange" stroke="red" stroke-width = "5" opacity="0.5" /> 
    </svg> 
  </body> 
</html>

Hier verwenden wir Inline-HTML-Code, um ein Rechteck zu zeichnen. In der nächsten Demo werden wir den <style> Tag innerhalb des <svg> Tags verwenden. Die im SVG definierte Höhe und Breite bestimmen die Höhe und Breite des Elements oder Bildes.

Ein Kreis

<html>
  <body> 
    <svg width="200" height="250"> 
      <circle cx="150" cy="100" r="40"/> 
      <style> 
        circle{ 
          fill: gold; 
          stroke: #000; 
          stroke-width: 7px; 
        }
      </style> 
    </svg>
  </body>
</html> 

Eine Linie

Gerade Linien werden in SVG gezeichnet, indem man den Start- und Endpunkt der Linie angibt.

<html> 
  <body>
    <svg width="800" height="500">
      <line x1="30" x2="500" y1="120" y2="120" stroke="black" stroke-width="7" /> 
    </svg>
  </body> 
</html>

Polygone und Polylinien

Mit Hilfe von Polygonen und Polylinien kannst du Linien mit vielen Punkten erstellen. Ein wesentlicher Unterschied zwischen einem Polygon und einer Polylinie ist, dass bei einem Polygon der letzte Punkt mit dem ersten Punkt verbunden ist, wodurch eine geschlossene Form entsteht. Polylinien sind offene Formen und müssen nicht geschlossen sein.
Die SVG-Punkte sind Koordinaten von x und y und werden je nach der spezifischen Form, die du zeichnen möchtest, verwendet.

<html> 
  <body> 
    <svg height="180" width="500"> 
      <polyline points="0,40 40,40 40,80 70,70 80,120 100,100 120,120, 150,150" style="fill:white;stroke:green;stroke-width:6" /> 
    </svg> 
  </body> 
</html>

<html> 
<body> 
  <svg width="300" height="300"> 
    <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30, 180, 45 180"/> 
    <style> 
      polygon{ 
        fill: gold; 
        stroke: blue; 
        stroke-width: 2; 
      }
    </style>
  </svg> 
</body> 
</html>

Texte

Der <text>-Tag definiert einen Text innerhalb des SVGs. Die x und y bestimmen die Position eines Textes. Der <text>-Tag kombiniert das Beste von SVG und gewöhnlichen HTML-Text-Eigenschaften. Genau wie SVG-Formen hat es Attribute wie Fill, Stroke, Stroke-Width, Gradient und Filter. Wie HTML Textelemente hat es Eigenschaften wie font-family, font-size, font-variant, font-weight, letter-spacing, kerning, word-spacing und text-decoration.

<html>
  <body>
    <svg height="90" width="300">
      <text x="0" y="25" fill="red" stroke= "blue" stroke-width = '1'font-size = '30px'>This is a SVG text</text>
    </svg>
  </body>
</html>

Wir können einem Text mit einem xlink:href einen textPath zuweisen. Dieses Element beschreibt einen Pfad, den ein Text nehmen soll und richtet die Zeichen entlang des Pfades aus. Die href im xlink ist die id der Pfadbefehle.

<html> 
  <body> 
    <svg width="500" height="500"> 
    <defs> 
      <path id="circletext" d="M243.2, 382.4c-74.8,    
        0-135.5-60.7-135.5-135.5s60.7-135.5,135.5-135.5s135.5, 60.7, 135.5, 
        135.5 S318, 382.4, 243.2, 382.4z" />
      <style></style> 
    </defs>  
    <text dy="70" textLength="1200">
      <textPath xlink:href="#circletext">
        Text in a circular path 
      </textPath> 
    </text> 
    <style> 
      text {  
        font-size: 23px; 
        font-family: Arial Bold, serif; 
        fill: maroon; 
        text-transform: uppercase; 
        letter-spacing: 22px; 
      } 
    </style> 
    </svg> 
  </body>
</html>

Das <text>-Element hat eine eigene Eigenschaft wie die Richtung, die es uns erlaubt, die Richtung der Zeichen umzukehren. Nicht wie ein umgekehrter Text, sondern wie ein gespiegelter Text.

<html> 
  <body> 
    <svg>
      <text x="100" y="50" style="font-size: 40px; direction: rtl; unicode-bidi: bidi-override;">Mirrored Text</text> 
    </svg> 
  </body> 
</html>

Pfade

Das <path>-Tag gilt als das stärkste, einfallsreichste und umfassendste Element, mit dem du praktisch alles in SVG zeichnen kannst. Es erzeugt komplexe Formen, indem es gerade und gebogene Linien kombiniert.
<path> nimmt nur ein Attribut: d. Das d-Attribut ist ein Zeiger von Befehlen und Punkten, die eine Form annehmen soll.
Die Befehle in einem Punkt sind

• M - Bewegen nach
• L - Linie nach
• H - Horizontale Linie nach
• V - Vertikale Linie nach
• C - Kurve nach
• S - Glätten nach
• Q - Quadratische Bézier-Linie
• T - Quadratische Bézier-Kurve glätten nach
• A - Bogen
• Z - Pfad schließen

Diese Befehle geben die Richtung, die Position und die Formen an, die ein Objekt annehmen soll. Jeder Befehl nimmt zwei Punkte, die durch ein Komma getrennt sind. Z.B. M 120, 100 bedeutet, 120 nach unten und 100 nach rechts von der aktuellen Position zu bewegen.
Nicht alle Befehle sind für eine einzelne Zeichnung notwendig.
Das folgende Beispiel ist das eines einfachen Kreuzes mit linearen Farbverläufen anstelle einer einzelnen Farbe. Die Hauptbefehle, die hier verwendet werden, sind M, H und V, da wir bei vertikalen und horizontalen Platzierungen nur gerade Linien benötigen.

<html>
  <body> 
    <svg viewbox = "-0 0 7 5"> 
     <defs> 
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
          <stop offset="0%" style="stop-color:rgb(80,255,0);stop-opacity:1" /> 
          <stop offset="50%" style="stop-color:rgb(150,195,0);stop-opacity:1" /> 
          <stop offset="100%" style="stop-color:rgb(355,0,0);stop-opacity:1" /> 
        </linearGradient> 
      </defs> 
      <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"/> 
      <style> 
        path{
          fill : url(#grad1) 
        }
      </style>
    </svg>
  </body>
</html>

Gekrümmter Pfad

Ein gekrümmter Pfad verwendet entweder die Befehle A, Q, C oder T.

<html>
  <body>
    <svg>
      <path d="M40,20  A30,30 0 0,0 70,70" style="stroke: #cccc00; stroke-width:2; fill:none;"/>
      <path d="M40,20  A30,30 0 1,0 70,70" style="stroke: #ab4432; stroke-width:2; fill:none;"/>
      <path d="M50,150 Q50,100, 0,100" style="stroke: blue; fill: transparent"/>
      <path d="M50,50 C95,90 125,20 150,60" style="stroke: #006666; fill:green;"/>  
    </svg>
  </body>
</html>

Browser-Support

Die Einbindung von SVG in den Mainstream der Vektorgrafiken hat sich aufgrund der Cross-Browser-Kompatibilität und der Unterstützung der nativen Funktionen durch die Hersteller etwas verzögert. Ein kürzlich durchgeführter Test von Michal Rost zeigt, dass SVG derzeit von den wichtigsten Browsern, einschließlich IE 11, unterstützt wird.