Web Development

Ein Lehrbuch für das Informatik oder Medien-Informatik Studium.

SVG - Vektor Grafik

als Präsentation ▻

Scalable Vector Graphics (SVG, engl. „skalierbare Vektorgrafik“) ist die vom World Wide Web Consortium (W3C) empfohlene Spezifikation zur Beschreibung zweidimensionaler Vektorgrafiken. SVG ist ein Beispiel für XML.

SVG wurde erstmals im September 2001 veröffentlicht, die aktuelle Version ist Version 1.2, die seit Dezember 2008 vom W3C empfohlen wird, aktuell.

SVG hat eine lange und wechselvolle Geschichte hinter sich: es wurde bereits im Jahr 2001 veröffentlicht. Für die Darstellung im Browser war aber damals die Installation eines Plugins notwendig. Aber erst seit 2005 (Firefox, Opera), 2006 (Webkit) bzw. 2011 (Internet Explorer) wird SVG im Browser nativ dargestellt.

▻

Xml Code Einbindung von SVG in HTML (Inline-SVG)

<svg width="200" height="200" style="float:left;">
  <circle cx="100" cy="100" r="80"                 
          stroke="black" stroke-width="2" fill="#4e9a06" />
  <rect x="80"   y="100" width="90" height="90" 
        stroke="black" stroke-width="2" fill="#204a87" />
</svg>

Mit SVG kann man zweidimensional zeichnen. Die grafischen Objekte werden

  • wie bei HTML - in einem DOM gespeichert und können manipuliert werden. Zur Darstellung im Browser werden sie mit dem Painters Algorithm gezeichnet: “spätere” Objekte übermalen “frühere” Objekte. Deswegen überdeckt das blaue Rechteck im Beispiel den grünen Kreis.

Inline SVG wird heute von den aktuellen Browsersn unterstütz, siehe can i use

▻

Grundformen in SVG

Mit den Tags circle, rect, ellipse, path und polygon werden simple geometrische Elemente definiert.

Rechteck Kreis + Ellipse Pfad Polygon ▻

Kreis, Ellipse, Rechteck

Das Rechteck wird die Position seiner oberen linken Ecke, seiner Breite und seiner Höhe definiert. Der Kreis über Mittelpunkt und Radius, die Ellipse über Mittelpunkt und zwei Halbradien.

Xml Code Kreis und Ellipse

<circle  cx="144" cy="38" r="18" 
        stroke="#4e9a06" stroke-width="2" 
        fill="#4e9a06"   fill-opacity="0.6"  />
<ellipse cx="170" cy="43" rx="27" ry="15" 
        stroke="#73d216" stroke-width="2" 
        fill="#73d216" fill-opacity="0.6" />
▻

Viele Attribute kann man alternativ auch über CSS definieren.

Xml Code Attribute per CSS

<circle r="80px" cx="150px" cy="100px" 
    style="stroke: #4e9a06; stroke-width: 2px; fill: #4e9a06; fill-opacity:0.6;" />
<ellipse cx="390" cy="100" rx="300" ry="80" 
    style="stroke: #73d216; stroke-width: 2px; fill: #73d216; fill-opacity:0.6;" />
▻

Pfad und Polygon

Für Pfade und Polygone wird eine Kurzschreibweise verwendet, bei der mehrere Punkte in ein einziges Attribut d des Tags geschreiben werden. Ein Pfad besteht aus Befehlen und Koordinaten. Zwischen den Koordinaten kann man Kommas und beliebigen Whitespace einfügen.

Xml Code SVG

<path d="M 149,109 L 149,127 L 127 144    L 140,172    L 188,167 L 191,119 L 149,109 z"
      fill="#edd400" fill-opacity="0.59" stroke="#c4a000" stroke-width="2" />
▻

Wird der Befehl als Großbuchstaben geschrieben, dann werden die Koordinaten absolut interpretier, bei einem Kleinbuchstaben werden sie relativ interpretiert. Folgende Befehle erwarten eine fixe Anzahl von Koordinaten:

Buchstabe Befehl Parameter Beschreibung
M,m MoveTo x y Gehe zu dem angegebenen Punkt ohne eine Linie zu ziehen
H,h HLineTo x Ziehe eine horizontale Linie zur angegebenen Koordinate
V,v VLineTo y Ziehe eine vertikale Linie zur angegebenen Koordinate
Z,z Close Path   Schliesse den Pfad (gehe zurück zum Anfangspunkt)

§

Folgende Befehle können mehrere Koordinaten auf einmal erhalten. Wie in der EBNF-Schreibweise wird hier die Wiederholung durch Klammern und ein + dargestellt:

Xml Code Beispiel für LineTo und Quadratic B

<path d="M   0 10 l 50,50  50,-50 50,50 50,-50 50,50" />
<path d="M 270 35 q 25,-50 50,0 25,50 50,0 q 25,-25 50,0 q 25,25 50,0" />
Buchstabe Befehl Parameter Beschreibung
L,l LineTo (x y)+ Ziehe gerade Linie zu den angegebenen Punken
Q,q quadratic Bézier curveto (x1 y1 x y)+ Kurve zu x,y mit x1,y1 als Stützpunkt der beiden Tangenten
C,c cubic Bézier curveto (x1 y1 x2 y2 x y)+ Kurve zu x,y mit x1,y1 und x2,y2 als Stützpunkte der Tangenten
▻

Farbe

Farben werden wie in HTML mit hex-code definiert. Zusätzlich kann für jedes Objekt eine alpha-Transparenz mit opacity gesetzt werden. Bei der ersten Abbildung mit dem kleinen blauen Quadrat war das:

fill="#204a87" opacity="0.75"

Farbverläufe werden separat definiert, und können dann mehrfach angewendet werden. In diesem Beispiel wird ein radialer gradient definiert und auf ein Objekte angewandt:

Xml Code SVG

  <radialGradient id="SVGID_1_" cx="0" cy="0" r="320.8304" gradientUnits="userSpaceOnUse">
    <stop  offset="0" style="stop-color:#FFDE17;stop-opacity:0.7"/>
    <stop  offset="1" style="stop-color:#FFF200;stop-opacity:0"/>
  </radialGradient>

Der Effekt wirkt ganz verschieden, wenn man ihn auf ein Quadrat oder einen Pfad mit Sonnenstrahlen anwendet:

▻

Text

Mit dem Tag text kann Text in SVG gesetzt werden. Das ist an und für sich noch nicht sehr spannend:

Xml Code Text in SVG

    <text x="122" y="81">Kreis + Ellipse</text>
▻

Mit dem Tag textpath kann der Text entlang eines beliebigen Pfades gesetzt werden.

Es geht hinauf, und hinunter, und wieder... 
<defs>
<path id="my_path" d="M 100,200 C 200,100 300,  0 400,100
      C 500,200 600,300 700,200 C 800,100 900,100 900,100" />
</defs>
<text font-family="Verdana" font-size="42.5" fill="red" >
  <textPath xlink:href="#my_path">
    Es geht hinauf, und hinunter, und wieder...
  </textPath>
</text>
▻

Koordinaten und Transformationen

Koordinaten in SVG werden als reelle Zahlen angegeben, nicht als Ganzzahlen! Es ist ein wirkliches Vektorformat.

Das ursprüngliche Koordinatensystem beginnt in der linken oberen Ecke, die X-Achse zeigt nach rechts, die Y-Achse nach unten. Mit dem g Tag können Elemente gruppiert werden. Dabei kann man auch ein neues lokales Koordinatensystem definieren.

x y x y

Xml Code Gruppe mit lokalem Koordinatensystem

<g transform="rotate(-5) translate(50,30)">
  ...
</g>
▻

Animation

Fast jedes Attribut in SVG kann animiert werden. In folgendem Beispiel wird as Attribut startOffset des Elements textPath animiert:

Xml Code SVG Animation

  <textPath xlink:href="#my_path" startOffset="500">
    Choo, choo, I'm a little train
    <animate attributeType="XML" attributeName="startOffset" 
      from="1000" to="-600"
      dur="10s" repeatCount="indefinite" />
  </textPath>

So sieht das Ergebnis aus:

Choo, choo, I'm a little train ▻

SVG mit Javascript erzeugen

▻

createElement

Der SVG-Tag kann direkt in einem HTML-Dokument verwendet werden, wie auf dieser Seite.

Wenn man SVG-Nodes mit Javascript in das DOM einfügen will braucht man eine neue Variante des createElement Befehls: create Element with Namespace. Der Namespace für SVG ist http://www.w3.org/2000/svg.

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", 600);
svg.setAttribute("height", 300);

document.getElementById('grafik').appendChild( svg );

rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
svg.appendChild( rect );
▻

jQuery

Achtung: jQuery kennt nur Methoden zum Erzeugen von HTML, nicht von SVG. Aber muss sich also eine separate SVG-Erzeugungs-Method bauen wenn man jQuery für SVG verwenden will.

function $s(elem) {
  return $(document.createElementNS('http://www.w3.org/2000/svg', elem));
}

var $svg = $s("svg");
var $circle = $s("circle").attr({...});
$svg.append($circle);

Code von Matthieu Charbonnier.

▻

GSAP

Die Library GSAP ermöglicht das definieren und kontrollieren von SVG und CSS Animation von JavaScript aus.

Hier ein Beispiel einer Translation:

gsap.to("#logo", {duration: 1, x: 100});
▻

SVG Optimieren

Unter der Adresse https://jakearchibald.github.io/svgomg/ kann man SVGs hochladen, optimieren und wieder herunterladen:

▻

Quellen von SVG

Fertige Icons und Illustrationen:

▻

Mehr