RA #010 SVG

SVG – das Kürzel, dass wohl eher mit einem Sportverein als mit einem Grafikformat assoziiert werden könnte, steht für Scalable Vector Graphics  – also skalierbare Vektorgrafik – und sagt schon so einiges darüber aus, was sich damit anstellen lässt.

Nun, strenggenommen, handelt es sich bei SVG eher um eine Sprache als um ein Grafikformat, genauer gesagt um eine Beschreibungssprache. Kein Wunder, denn es basiert auf XML, was für Extensible Markup Language also für erweiterbare Auszeichnungssprache steht. SVG wird vom W3C – dem World Wide Web Consortium – zur Beschreibung von Vektorgrafiken empfohlen.

Bevor wir etwas tiefer in die Thematik einsteigen: Was ist eine Vektorgrafik?

Wir unterscheiden grundsätzlich in Pixel- und Vektorgrafiken.

Pixel- oder Rastergrafiken, wie sie auch genannt werden, bestehen aus einzelnen Bildpunkten – den Pixeln. Jedes Pixel enthält Bildinformationen wie Farb- und Helligkeitswerte. Pixelgrafiken sind bis zu einem gewissen Grad skalierbar. Der Grad der Skalierbarkeit hängt von der Pixeldichte (ppi – pixel per Inch) ab. Sie definiert wie viele Pixel auf einen Zoll (also 2,54 cm) passen. Je höher der ppi-Wert, desto mehr Pixel befinden sich auf dieser Strecke. Ein Wert von 300 ppi bedeutet, dass sich 300 Pixel auf eine Strecke von 2,54 cm befinden. Ist der Wert niedriger – beispielsweise 72 ppi bei Grafiken für HTML-Dokumente – befinden sich nur 72 Pixel auf einer Strecke von 2,54 cm. Eine Grafik bei einer Kantenlänge von 100 mm x 100 mm hat dadurch bei 300 ppi eine Abmessung von 1181 x 1181 Pixeln, bei 72 ppi sind es nur 283 x 283 Pixel. Je niedriger die Pixeldichte umso eher kommt es beim Hineinzoomen in die Grafik sehr schnell zu Unschärfen und klötzchenhafter Darstellung wodurch sich Bilddetails nicht mehr gut erkennen lassen.

Vektorgrafiken entstehen völlig anders. Und „Entstehen“ ist dabei wörtlich zu nehmen. Zwar erstellen wir sie – ebenso wie Pixelgrafiken – meist am Computer, die Anzeige der fertigen Grafik auf dem Endgerät erfolgt später jedoch anders als bei Pixelgrafiken. Eine Vektorgrafik besteht nämlich nicht aus Pixeln mit verschiedenen Informationen, sondern nur aus Text – namentlich aus XML. Eine Analogie zu diesem Verfahren kann man übrigens in der Musik finden: Hier ist es MIDI – ein Industriestandard für den Austausch musikalischer Steuerinformationen zwischen elektronischen Instrumenten. Hier werden ganze Partituren nicht in klassischer Notenschrift übertragen, sondern nur Werte wie Note an, Note aus, Notenlänge Anschlagsdauer einer Taste, welcher Instrumentenklang u.a.

Das SVG-Format hat einige große Vorteile, die wir uns auch in der technischen Redaktion zu Nutze machen können. Da ist zum einen die Skalierbarkeit. Eine Vektorgrafik lässt sich nämlich beliebig verlustlos skalieren. Eine mögliche Anwendung hierfür sind technische Zeichnungen. Hier lassen sich beispielsweise komplexe Konstruktions- oder Schaltpläne erstellen und in ein HTML-Dokument einbetten, in die der Benutzer beliebig hinein- und herauszoomen kann.

Vektorgrafiken besitzen allerdings noch weitere Vorzüge: So können Sie neben den vektoriell erstellten Formen auch Schriften sowie bei Bedarf Pixelgrafiken enthalten. Letzteres hingegen ist je nach Anwendungszweck möglicherweise eher kontraproduktiv, wenn es um die verlustlose Skalierbarkeit geht.

Desweiteren lassen sich dynamische und interaktive Elemente wie Animationen integrieren sowie Verbindungen zu anderen XML-Elementen zwecks Einbindung von Daten herstellen. Und SVG-Grafiken lassen sich sogar ausschließlich an einem Texteditor erstellen.

Ein ebenfalls nicht unwesentlicher Vorzug des SVG-Formates ist, dass es ressourcenschonend ist. So wird zum einen Speicherplatz und zum anderen Übertragungsbandbreite gespart. Letzteres ist insbesondere dann von Bedeutung, wenn es um die Übertragung von Dokumenten in Mobilfunknetzen geht.

So belegt beispielsweise ein von mir mit Adobe Illustrator erzeugtes mehrfarbiges Ablaufschema im DIN-A4-Format nach dem Export als SVG-Datei nur ganze 49 kB Speicherplatz. Würde ich die selbe Grafik in das Pixelformat JPG konvertieren, wären hierfür schon 1,5 MB Speicherplatz auf dem Datenträger erforderlich.

Nun haben Vektorgrafiken aber auch ihre Grenzen. Im Bereich der technischen Dokumentation sehe ich sie da, wo es um fotorealistische Illustrationen geht. Ein Foto beispielsweise einer Maschine in eine Vektorgrafik umsetzen zu wollen, dürfte jeden vernünftigen Zeitrahmen sprengen und zudem in gleicher Qualität auch nicht durchführbar sein.

Um zu verstehen, wie eine SVG-Grafik, besser gesagt: ein SVG-Dokument aufgebaut ist, schauen wir mal ein wenig unter die Haube. Tip: Legen Sie mit einem Programm wie Adobe Illustrator oder der OpenSource-Variante Inkscape einmal selbst ein SVG-Dokument an. Am besten mit zwei Objekten wie einem Quadrat und einem Kreis und geben sie den beiden unterschiedliche Farben. Öffnen Sie anschließend die SVG-Datei mit einem einfachen Texteditor – keine Angst, das funktioniert!

Wenn Sie sich bereits mit HTML, CSS und XML auskennen werden Sie das was Sie dort lesen sofort problemlos verstehen.
Für alle anderen: In dieser Datei werden die Abmessungen des Grafikdokumentes und der  beiden Objekte  mit Lage (x,y-Wert) und Ihrer Ausdehnung (Breite und Höhe beim Quadrat bzw. Radius beim Kreis) beschrieben.

Das weitere Aussehen wie die Farbzuordnung ist ein einem separaten Bereich (dem style) definiert.

Nun werden Sie verstehen, warum ich sagte, dass Vektorgrafiken auch völlig ohne grafischen Editor nur mit einem Texteditor erstellt werden können. Bei einfachen Objekten, wie unserem Kreis und dem Quadrat kann das u. U. sogar schneller gehen, als wenn man einen grafischen Editor bemüht. Versuchen Sie es ruhig einmal selbst und ändern sie beispielsweise den Radius des Kreises oder die Abmessungen des Quadrates. Die einfachste Art eine SVG-Grafik anzusehen ist übrigens der Internet-Browser. Versuchen Sie dann auch gleich mal, in die Grafik hineinzuzoomen – das geht beim Internetbrowser recht einfach z. B. mit STRG und + und das hinaus zoomen mit STRG + -.

In diesem Zusammenhang möchte ich auch gleich erwähnen, dass die Einbindung einer SVG-Datei in ein HTML-Dokument völlig problemlos ist.

Eine der wohl interessantesten Eigenschaft von SVG-Grafiken ist die Möglichkeit, dynamische Illustrationen zu erstellen – namentlich Animationen.

Dies kann sowohl mit den SVG-eigenen Elementen als auch über entsprechende Scripte erfolgen, so z. B. der Farbwechsel eines in der Grafik eingebetteten Schriftzuges, sobald der Benutzer mit der Maus darüberfährt. Derartige Funktionen lassen sich auch sehr gut in der technischen Dokumentation nutzen, um beispielsweise in einem Schaltplan oder einer Explosionszeichnung farbliche Hervorhebungen oder ergänzende Hinweise zu ermöglichen, wenn der Benutzer mit der Maus darauf zeigt.

Aber auch Bewegungsanimationen, bei denen beispielsweise ein Objekt von links nach rechts oder an einem unsichtbaren Pfad geleitet über den Bildschirm fährt, oder andere Aktionen ausführt, lassen sich mit SVG realisieren.

Halten wir also fest:

• SVG ist eine Sprache zur Beschreibung von Grafiken und basiert auf XML.
• SVG-Grafiken sind beliebig verlustlos skalierbar.
• Alle erforderlichen Bildinformation sind ausschließlich in Textform gespeichert, dadurch sind sie hinsichtlich Dateigröße und Übertragungsbandbreite den Pixelgrafiken deutlich überlegen.
• SVG-Grafiken können bei Bedarf nur mit einem Texteditor erstellt werden.
• Mit SVG-Grafiken lassen sich Animationen erstellen und mit Benutzerinteraktion verbinden.