Kleines How-To: SVG verstehen

Oktober 3, 2010 um 3:22 am | Veröffentlicht in HTML, Programmieren, Ubuntuusers, Webentwicklung | 3 Kommentare

Seit das W3C vor neun Jahren die erste Spezifikation herausgab hat sich die Skalierbare VektorGrafik gut entwickelt und ist heute sehr populär. Viele Browser können SVG nativ darstellen, auf der Wikipedia ist es neben PNG das populärste Format für Grafiken und die Icons der grafischen Linux-Oberflächen liefern neben PNGs in diversen Auflösungen auch SVG-Versionen mit. Was ist aber nun der Vorteil von SVG? Warum verwendet man es überhaupt? Auf den Punkt bringen es zwei Argumente: SVG ist 1.) skalierbar, das heißt man kann es beliebig vergrößern und verkleinern ohne Qualitätseinbußen akzeptieren zu müssen (sprich: es verpixelt nicht) und man kann es 2.) in jedem Texteditor bearbeiten.

Hä? Eine Grafik in einem Texteditor bearbeiten? Wirken die Magic Mushrooms von Weihnachten noch nach? Nein. Wo ein handelsübliches PNG etwa diese Form annimmt wenn es in einem Texteditor geöffnet wird:

PNG in Kate
Anfang eines PNG in Kate geöffnet.

erwartet den interessierten Betrachter bei z.B. diesem Bild:

Wikipedia File:Mahuri.svg
Quelle: http://commons.wikimedia.org/wiki/File:Mahuri.svg Lizenz:cc-by

dieser Text:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd&quot;>

<svg
xmlns:svg="http://www.w3.org/2000/svg&quot;
xmlns="http://www.w3.org/2000/svg&quot;
xmlns:xlink="http://www.w3.org/1999/xlink&quot;
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape&quot;
version="1.0"
width="920"
height="1060"
id="svg2">

<defs
id="defs4">

<linearGradient
id="linearGradient15295">

<stop
id="stop15297"
style="stop-color:#ffffff;stop-opacity:0"
offset="0" />

...

</svg>

Dieses Bild ist gleichsam ein Beispiel was mit SVG möglich ist. Es wurde mit Inkscape erstellt und ist wie man sich denken kann ungleich komplexer als ein einfaches Logo. Wie man in der ersten Zeile lesen kann, ist SVG eine Anwendung von XML. In XML-Schreibweise kann man Linien, Kreise, Rechtecke und freie Linien, Farbverläufe, Transparenzen und vieles mehr beschreiben und Text und Rastergrafiken einbinden. Der Text wird dann von einem Interpreter (z.B. einen Webbrowser) Zeile für Zeile gelesen und dargestellt. Die jeweils letzte Zeile wird also zu oberst gezeichnet. Da dies alles sehr viel auf einmal ist soll hier der Aufbau eines SVGs von Grund auf beschrieben werden.

Grundlagen

Ein einfaches SVG, ohne jeglichen Inhalt erzeugt man mit den folgenden Zeilen:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg&quot; xmlns:xlink="http://www.w3.org/1999/xlink&quot; xmlns:ev="http://www.w3.org/2001/xml-events&quot; version="1.1" baseProfile="full">

</svg>

Diesen Teil kann man 1:1 übernehmen. Dabei wird festgelegt, dass sich das Dokument am die Version 1.0 des XML-Standards hält. Die Zeichenkodierung ist UTF-8 und der SVG-Code hält sich an SVG 1.1. In den Beispielen lasse ich die XML-Deklaration weg, du kannst davon ausgehen, dass sie dort ident mit mit dieser ist.

Bildfläche

Zuerst wollen wir einmal die Fläche erzeugen auf der das Bild später gezeichnet wird. Dazu geben wir die Größe dieser Fläche an:

<svg xmlns="http://www.w3.org/2000/svg&quot; xmlns:xlink="http://www.w3.org/1999/xlink&quot; xmlns:ev="http://www.w3.org/2001/xml-events&quot; version="1.1" baseProfile="full" width="300px" height="300px">

...

</svg>

Dies erzeugt eine Fläche der Größe 300x300px.

Die Fläche ist noch durch nichts ausgefüllt. Um eine einheitliche hintergrundfarbe zu erzeugen kann man ein Rechteck mit derselben Größe wie die Bildfläche erzeugen:

<svg xmlns="http://www.w3.org/2000/svg&quot; xmlns:xlink="http://www.w3.org/1999/xlink&quot; xmlns:ev="http://www.w3.org/2001/xml-events&quot; version="1.1" baseProfile="full" width="300px" height="300px">

<rect x="0px" y="0px" width="300px" height="300px" fill="white" />

</svg>

Der Tag <rect> erzeugt ein Rechteck welches 0 Pixel Breite (x="0px") und 0 Pixel Höhe (y="0px") startet und eine sowohl eine Breite als auch eine Höhe von 300 Pixel hat. Die Füllfarbe ist weiß (fill="white"). Der Nullpunkt (0px Breite, 0px Höhe) liegt in der linken oberen Ecke. Von hier aus starten alle Berechnungen. Relative Entfernungen sind in Arbeit, aber noch nicht verfügbar. Da dies aber noch nicht alles war was das Tag <rect> zu bieten hat widmen wir ihm einen eigenen Punkt.

Rechtecke

Wie schon gezeigt wird ein Rechteck gezeichnet indem das Tag <rect> eingesetzt wird. Innerhalb dieses Rechtecks werden dann die Eigenschaften des Rechtecks festgelegt. Zuerst sollte man bestimmen wo das Rechteck beginnt. Setzen wir deshalb ein neues Rechteck auf unsere bestehende Bildfläche:

<svg xmlns="http://www.w3.org/2000/svg&quot; xmlns:xlink="http://www.w3.org/1999/xlink&quot; xmlns:ev="http://www.w3.org/2001/xml-events&quot; version="1.1" baseProfile="full" width="300px" height="300px">

<rect x="0px" y="0px" width="300px" height="300px" fill="white" />
<rect
x="25px" y="25px" width="250px" height="250px" fill="grey" />

</svg>

Dieses zweite Rechteck beginnt nun 25px weiter rechts und 25px weiter unten als die Bildfläche und erstreckt sich über eine Fläche von 250px in Breite und Höhe. Dem aufmerksamen Rechner wird auffallen, das dies das Rechteck genau zentriert, mit jeweils 25px Abstand zum Rand. Um es vom ersten Rechteck zu unterscheiden habe ich es grau eingefärbt. Und so sieht es zur Zeit aus:

Beispiel 01

Wir wollen nun dem Rechteck eine Randlinie verpassen. Dazu ändern wir die Zeile zu:

<rect x="25px" y="25px" width="250px" height="250px" fill="grey" stroke="grey" stroke-width="1px" />

Dies erzeugt eine Linie um das graue Rechteck mit einer Stärke von einem Pixel. Da jedoch Rechteck und Linie die gleiche Farbe haben, kann man sie nicht von einander unterscheiden. Deshalb wollen wir uns einmal kurz Farben näher ansehen.

Farben

Wie bereits gezeigt kann man Farben ganz einfach über ihren (englischen) Namen ansprechen. Eine Liste der benannten Farben findest du hier. Ein einfaches Beispiel:

fill="blue"

füllt eine Fläche mit der Farbe Blau:

Beispiel 01 Blau

Wer lieber die Art und Weise verwendet mit der HTML Farben definiert kann auch diese verwenden:

fill="#FF0000"

oder

fill="#F00"

füllt dieselbe Fläche mit der Farbe Rot:

Beispiel 01 Rot

Zum Schluss kann man noch mit RGB-Farbangaben arbeiten. So ergibt

fill="rgb(0, 255, 0)"

oder

fill="rgb(0%, 100%, 0%)"

folgendes Bild:

Beispiel 01 Grün

Wollen wir nun unser Beispiel so anpassen, dass sich Fläche und Rand von einander abheben so kann der Code so lauten:

<svg xmlns="http://www.w3.org/2000/svg&quot; xmlns:xlink="http://www.w3.org/1999/xlink&quot; xmlns:ev="http://www.w3.org/2001/xml-events&quot; version="1.1" baseProfile="full" width="300px" height="300px">

<rect x="0px" y="0px" width="300px" height="300px" fill="white" />
<rect
x="25px" y="25px" width="250px" height="250px" fill="rgb(200, 200, 200)" stroke="rgb(75, 75, 75)" stroke-width="1px" />

</svg>

Dies erzeugt ein hellgraues Rechteck mit dunkelgrauem Rand:

Beispiel 02

Linien

Linien in SVG sind etwas sehr leichtes. Sie bestehen aus einem Anfangspunkt, beschrieben durch Breite und Höhe, genauso wie einem Endpunkt. Außerdem können Sie Farbe, Stärke und Transparenz haben. Wenn wir folgendes zu unserem Beispiel hinzufügen:

<line x1="150px" y1="25px" x2="150px" y2="275px" stroke="rgb(75, 75, 75)" stroke-width="0.5px" />
<line
x1="25px" y1="150px" x2="275px" y2="150px" stroke="rgb(75, 75, 75)" stroke-width="0.5px" />

erzeugt dies zwei sich kreuzende Linien innerhalb des grauen Rechtecks:

Beispiel 03

Kreise

Ein Kreis kann all die bisherigen Gestaltungselemente beinhalten. Definiert wird der Kreis über einen Mittelpunkt und einen Radius:

<circle cx="87.5px" cy="87.5px" r="10px" fill="rgb(200, 175, 0)" stroke="rgb(120, 40, 0)" stroke-width="2px" />
<circle cx="212.5px" cy="87.5px" r="20px" fill="rgb(100, 255, 150)" stroke="rgb(40, 180, 100)" stroke-width="2px" />
<circle cx="87.5px" cy="212.5px" r="30px" fill="rgb(150, 100, 255)" stroke="rgb(100, 40, 180)" stroke-width="2px" />

Fügst du diese Zeilen zum Beispiel hinzu erhältst du dieses Bild:

Beispiel 04

Text

Auch Text kann ganz einfach hinzugefügt werden:

<text x="212.5px" y="222.5px" font-size="20px" font-style="italic" font-weight="bold" fill="white" text-anchor="middle" stroke="rgb(40, 40, 255)">SVG</text>

Man beachte, dass wie bei HTML das <text>-Tag aus zwei Elementen besteht zwischen denen der eigentliche Text steht. x und y geben die Textposition an. font-size beschreibt die Höhe des Textes in Pixel (das sind dieselben Werte wie sie aus Textverarbeitungsprogrammen wie OOo Writer oder MS Word bekannt sind), font-style den Stil der Schriftart, font-weight die Schwere der Schrift und text-anchor die Ausrichtung. fill und stroke sind ja bereits bekannt. Fügt man die obige Zeile zum Beispiel hinzu erhält man folgendes Bild:

Beispiel 05

Hier noch einmal der vollständige Code des letzten Beispiels:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg&quot; xmlns:xlink="http://www.w3.org/1999/xlink&quot; xmlns:ev="http://www.w3.org/2001/xml-events&quot; version="1.1" baseProfile="full">

<rect x="0px" y="0px" width="300px" height="300px" fill="white" />
<rect
x="25px" y="25px" width="250px" height="250px" fill="rgb(200, 200, 200)" stroke="rgb(75, 75, 75)" stroke-width="1px" />

<line x1="150px" y1="25px" x2="150px" y2="275px" stroke="rgb(75, 75, 75)" stroke-width="0.5px" />
<line
x1="25px" y1="150px" x2="275px" y2="150px" stroke="rgb(75, 75, 75)" stroke-width="0.5px" />

<circle cx="87.5px" cy="87.5px" r="10px" fill="rgb(200, 175, 0)" stroke="rgb(120, 40, 0)" stroke-width="2px" />
<circle cx="212.5px" cy="87.5px" r="20px" fill="rgb(100, 255, 150)" stroke="rgb(40, 180, 100)" stroke-width="2px" />
<circle cx="87.5px" cy="212.5px" r="30px" fill="rgb(150, 100, 255)" stroke="rgb(100, 40, 180)" stroke-width="2px" />

<text x="212.5px" y="222.5px" font-size="20px" font-style="italic" font-weight="bold" fill="white" text-anchor="middle" stroke="rgb(40, 40, 255)">SVG</text>

</svg>

Natürlich ist es schwierig, wenn nicht gar unmöglich ein Bild wie das anfänglich vorgestellte mit diesen einfachen Werkzeugen herzustellen. Für größere Projekte verwendet man deshalb passende Programme wie Inkscape, die einem die Detailarbeit abnehmen. Manchmal will man jedoch hier und da an kleinen Ecken noch etwas schrauben, und dann ist es von Vorteil wenn man das mit dem man arbeitet zumindest im Ansatz versteht. Viele weitere Werkzeuge stehen einem noch zur Verfügung. Wer sich einen größeren Überblick über die Möglichkeiten von SVG, die Verbindung mit CSS und die Einbettung eines SVGs in HTML-Code verschaffen möchte ist bei http://www.w3schools.com/svg/ gut aufgehoben. Hier werden die einzelnen Elemente von SVG mit Beispielen beschrieben und man kann sich alle möglichen Attribute eines Elements ansehen.

Viel Spaß beim Lernen und Basteln!

edit: An sich war geplant die Bilder direkt als SVG einzubinden, per < embed >-tag. Leider hat mir WordPress hier einen Strich durch die Rechnung gemacht indem es diese Tags einfach zu Links umgewandelt hat. Deshalb liegen die Beispiele als indizierte PNGs vor und verlinken auf die entsprechenden SVGs (für Anschauungszwecke).

Creative Commons License
This work by Stefan Ohri is licensed under a Creative Commons Attribution-ShareAlike 3.0 Austria License

=-=-=-=-=
Powered by Blogilo

3 Kommentare »

RSS feed for comments on this post. TrackBack URI

  1. Ja SVG ist ziemlich genial.
    Ich habe das mal für ein Projekt genutzt, wo ich ein komplexes Liniensystem (eingetragen in einer Exceltabelle) für eine Laserbearbeitungsmaschine erstellt habe. Da man keine Kontrolle über die Richtigkeit der Daten hatte, habe ich mir in Excel ein Script geschrieben, dass aus den Liniendaten eine SVG erzeugt. Damit hatte ich vor der Fertigung bereits eine visuelle Kontrolle, dass alle Linien korrekt gesetzt worden sind (und habe mir vielen Ärger und Ausschusskosten damit erspart).

  2. Danke, guter Artikel!

  3. […] aussieht. Mehr über SVG beim W3C oder bei  Wikipedia. Ebenfalls sehr hilfreich die kleine SVG-Einführung im Taach-Blog. Leider habe ich noch nicht rausgefunden, wie ich SVGs hier in WordPress einbinden kann, so dass […]


Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

Bloggen auf WordPress.com.
Entries und Kommentare feeds.

%d Bloggern gefällt das: