Open Source im professionellen Einsatz
Linux-Magazin 11/2004

Das Grafikformat SVG - Struktur und Praxis

Mit Vektoren zeichnen

Bilder im Format Scalable Vector Graphics (SVG) brauchen weniger Speicherplatz und lassen sich ohne Qualitätsverlust skalieren. Selbst Animationen und Programmcode mit Javascript sind möglich, was den Standard fürs Web und den Desktop interessant macht.

613

Im grafischen Web dominieren die Rasterformate Gif, Jpeg und PNG. Mit dem SVG-Format (Scalable Vector Graphics) sollen Vektorgrafiken auch dort Einzug halten. Das Vektorformat basiert auf XML, einer Beschreibungssprache, die auch andere Webformate erfolgreich nutzen. Der Standard wird vom World Wide Web Consortium (W3C)[1] verwaltet und ist zurzeit bei Version 1.1 angelangt. Version 1.2 liegt als Draft vor.

Vektor- oder Rastergrafik

Die kleinste Einheit von Rastergrafiken ist das so genannte Pixel (Picture Element, Bildpunkt). Ein Bild von 400 mal 300 Punkten besteht im Normalfall aus 120000 solcher Pixel, abgesehen von speziellen Methoden zur Kompression wie Run-Length-Encoding. Die Dateigröße ist im Wesentlichen unabhängig vom Bildinhalt. Diese Art der Bildbeschreibung ist nützlich für fotorealistische Darstellungen, aber weniger geeignet für einfache Grafiken, die nur geometrische Objekte enthalten (Kreise, Dreiecke und so weiter).

Solche Grafiken lassen sich platzsparender speichern, wenn man nur die Koordinaten jener Punkte erfasst, die einzelne Geometrien beschreiben. Dadurch werden Bilddateien kleiner und sind im Internet schneller zu übertragen. Das Anwendungsprogramm muss das Bild für die Anzeige erst berechnen (rastern), da nur eine Beschreibung vorliegt. Mit aktuellen Computern ist dies aber kein Problem mehr.

Das Abspeichern der Kurvenzüge einer Grafik bringt einen weiteren Vorteil: Bei einem Vektorformat kann der Benutzer einzelne Objekte direkt bearbeiten. Mit Hilfe einer Koordinate, die dem Betrachter zum Beispiel durch eine Maus mitgeteilt wird, lässt sich berechnen, welches Objekt an diesem Punkt liegt. Soll ein Objekt verschoben werden, sind nur seine Koordinaten zu transformieren. Einzelne Elemente einer Rastergrafik verändern ist viel aufwändiger.

Im Bereich des Computer Aided Design (CAD) werden aus diesem Grund fast nur Vektorformate genutzt. Wenn der Benutzer in eine Bitmap-Datei zoomt, vergrößert das entsprechende Programm nur die Pixel, mehr Details gibt es nicht zu sehen. Vektorgrafiken bleiben dagegen beim Vergrößern scharf, da Linienzüge für jede Zoomstufe neu gerastert werden, siehe Abbildung 1. Daher die Bezeichnung Scalable (skalierbare) Vector Graphics.

Abbildung 1: Vergrößert man den gefüllten Kreis im Pixelformat, erscheinen die Bildpunkte größer (links). Bei der Vektor-Variante bleibt der Rand scharf.

Erste Schritte

Eine SVG-Datei hat die Endung ».svg« oder, wenn sie mit Gzip gepackt ist, ».svgz«. Die meisten SVG-Browser unterstützen solche gepackten Dateien. Das Koordinatensystem hat seinen Nullpunkt (Ursprung) in der oberen linken Ecke der Zeichenfläche, die x-Achse verläuft horizontal (rechts positiv), die y-Achse von oben nach unten. Listing 1 zeigt als einfaches Beispiel ein SVG-Dokument. Wer sich schon einmal mit einem XML-Format beschäftigt hat, wird sich gleich zurechtfinden.

Listing 1: Einfaches
SVG-Dokument

01 <?xml version="1.0" encoding="iso-8859-1"?>
02 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
03           "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
04 <!-- Ein Kommentar -->
05 <svg width="10cm" height="10cm" viewBox="0 0 250 150" >
06   <title>Mein erstes SVG Dokument</title>
07   <desc>Eine einfache SVG Grafik, die als Vorlage dienen kann.</desc>
08   <g>
09     <circle cx="50" cy="50" r="30" style="fill:rgb(255,0,0)"/>
10     <rect x="100" y="25" width="50" height="50" style="fill:blue"/>
11     
12       Scalable Vector Graphics
13     
14   </g>
15 </svg>

Ein SVG-Dokument ist immer im XML-Format abgefasst, wobei die erste Zeile XML-Version und -Zeichensatz angibt. Die zweite Zeile spezifiziert mit dem »!DOCTYPE«-Tag den Dokumententyp SVG. Dann folgt der so genannte Public Identifier »PUBLIC "-//W3C//DTD SVG 1.0/EN"«. Der System-Identifier in Zeile 3 ist der Name einer SVG-DTD-Datei, die zulässige Elemente und Attribute bestimmt. Die DTD wird übrigens vom jeweiligen SVG-Browser bereitgestellt und normalerweise nicht von dieser Internetadresse geladen.

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Flash-Film selbst gedreht

    Flash führt unter Linux ein Schattendasein, grafische Entwicklungsumgebungen gibt es nicht. Die Ming-Bibliothek hilft jedoch dabei, eigene Flash-Filme zu programmieren. Wie es mit PHP geht, zeigt der Artikel.

  • Epub-Tools

    Wer E-Books im verbreiteten Epub-Format erzeugen möchte, findet in der Open-Source-Werkzeugkiste reichlich Unterstützung – ob per GUI-Anwendung, Office-Erweiterung oder Kommandozeile sowie mit und ohne XML/XSLT-Kenntnisse. Als Eingabeformate eignen sich ODT, Docbook oder Latex.

  • Datenfischer

    XML ist ein nicht überall heiß geliebtes, aber viel genutztes Austauschformat. Für Perl gibt es sehr viele Erweiterungen, um bequem in diesem Datenmeer zu fischen. Der heutige Snapshot diskutiert Vor- und Nachteile der gängigen XML-Module â&euro;&rdquo; das jeweils zweckmäßigste ist dann schnell gefunden.

  • Seiten-Aufbau

    XML und XSL-Stylesheets sind die Mittel der Wahl, um auf Webseiten Inhalt und Layout sauber getrennt zu halten. Das Framework Website-DTD hilft dabei.

  • SVG-Bibliothek Librsvg: DoS-Exploit in Umlauf
comments powered by Disqus

Ausgabe 08/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.