SVG - Vektor Grafik

vorige Präsentation: HTML+CSS für Grafik | zurück zum Buch-Kapitel [esc] | Nächste Präsentation 2d Canvas

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 style="cx: 144px; cy: 38px; r: 18px; stroke: #4e9a06; stroke-width: 2px; fill: #4e9a06; fill-opacity:0.6;"  />
<ellipse cx="170" cy="43" rx="27" ry="15" 
        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

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>

SVG mit Javascript erzeugen

Der SVG-Tag kann direkt in einem HTML-Dokument verwendet werden, so 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", width);
svg.setAttribute("height", height);

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

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

Achtung: jQuery kennt nur Methoden zum Erzeugen von HTML, nicht von SVG. Aber man kann sich schnell eine SVG-Erzeugungs-Method bauen (Lösung von Matthieu Charbonnier)

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);

Mehr

SVG - Vektor Grafik

vorige Präsentation: HTML+CSS für Grafik | zurück zum Buch-Kapitel [esc] | Nächste Präsentation 2d Canvas

/

#