SVG (Scalable Vector Graphics): Unterschied zwischen den Versionen

Aktuelle Version vom 23. Januar 2024, 17:13 Uhr

Definition

Abbildung: SVG - Autor: Seobility - Lizenz: CC BY-SA 4.0

Bei SVG (Scalable Vector Graphics) handelt es sich um einen Standard zur Beschreibung von zweidimensionalen Grafiken. Das SVG-Dateiformat basiert auf XML und wurde erstmals von einer Arbeitsgruppe des World Wide Web Konsortiums (W3C) im Jahr 2001 veröffentlicht. Mit SVG lassen sich zweidimensionale Objekte (Grafik oder Animation) beschreiben, die sich ohne Qualitätsverlust skalieren lassen. Obwohl in den Anfangsjahren viele Web Browser Probleme mit der Darstellung von SVG-Inhalten hatten, sind heutzutage alle relevanten Internet Browser in der Lage, skalierbare Vektorgrafiken problemlos abzubilden.

Das Scalable Vector Graphics Format wird von vielen etablierten Grafikprogrammen wie dem kostenpflichtigen Adobe Illustrator oder dem kostenlosen und quelloffenen Inkscape Illustrator genutzt. Durch den Einsatz dieses Formats ist es relativ einfach, eine Vektorgrafik oder Animation zu beschreiben und in einem Web Browser darzustellen.

Eine SVG-Datei ist in einer Baumstruktur definiert, die aus einzelnen Elementen zusammengesetzt ist. Diesen Elementen werden, ähnlich wie in einem CSS-Block, Attribute zugewiesen. SVG basiert auf der Syntax von XML (Extensible Markup Language), sodass jede SVG-Datei mit einer XML- und Doctype-Declaration beginnt. Bei XML handelt es sich um eine deklarative Auszeichnungssprache, die primär zur Darstellung hierarchisch strukturierter Daten im Textdatei-Format eingesetzt wird. Der wesentliche Vorteil von XML liegt in der Tatsache, dass XML-Dateien sowohl von Maschinen als auch von Menschen lesbar sind.

Erstellung von SVG-Grafiken

Da es sich bei SVG um ein Vektor-Format handelt, verwenden die meisten Nutzer Adobe Illustrator, um eine skalierbare Vektorgrafik zu erstellen. Das Scalable Vector Graphics Format gibt Nutzern die Möglichkeit, die meisten Effekte umzusetzen, die mit Adobe Illustrator möglich sind. Bei komplexen mehrstufigen Verläufen sollte jedoch darauf geachtet werden, dass diese im Web Browser eventuell anders angezeigt werden, sodass einige Abweichungen hinsichtlich der Farbwiedergabe bei der Darstellung möglich sind. Wichtig ist, dass die einzelnen Pfade klar und sauber definiert werden, da selbst minimale Änderungen später im Web Browser zu sichtbaren Farbsäumen führen können. Dieses Verhalten lässt sich insbesondere bei skalierten SVG-Grafiken beobachten.

Auch wenn es sich bei SVG primär um ein skalierbares Vektorformat handelt, sollte bei der Erstellung von SVG-Grafiken im Adobe Illustrator stets das Pixelraster beachtet werden. Mit Adobe Illustrator CC 2016 wurde eine neue Möglichkeit zum Ausrichten an Pixel eingeführt. Mit dieser können Benutzer einstellen, wie sich die einzelnen Elemente beim Skalieren oder Verschieben verhalten, sodass unerwünschtes Farbsäumen effektiv vermieden wird. Im Idealfall sollte die SVG-Grafik im Illustrator in der Größe gezeichnet werden, in der sie auch tatsächlich später, beispielsweise auf einer Website, genutzt wird. Obwohl die Abmessungen der Grafik keinen direkten Einfluss auf die Dateigröße haben, führt diese Vorgehensweise in der Regel zu besseren Resultaten im Browser.

Um eine mit Adobe Illustrator erstellte skalierbare Vektorgrafik extern, wie beispielsweise auf einer Website, nutzen zu können, muss diese zunächst exportiert werden. Beim Export von Scalable Vector Graphics stehen Nutzern zwei unterschiedliche Möglichkeiten zur Verfügung. Die Grafiken können nämlich sowohl im Dateiformat als auch als Quellcode bereitgestellt werden. Hieraus ergeben sich auch die unterschiedlichen Optionen für die Einbindung von SVG in eine Webseite. Die einfachste Möglichkeit, die der Adobe Illustrator für das Exportieren von SVG Grafiken bietet, ist, die entsprechenden Elemente über "Bearbeitung > Kopieren " zu markieren und in den Zwischenspeicher zu kopieren. Von dort aus kann der SVG Code direkt in eine HTML Seite eingebunden oder als SVG Datei abgespeichert werden.

Vorteile und Gründe für die Nutzung

Das SVG Format bietet im Rahmen moderner Webentwicklung zahlreiche Vorteile im Vergleich zu anderen Bildformaten. Es ist kompakt, vektorbasiert und dank XML sogar per Texteditor editierbar. Da SVG auf Vektoren basiert, ist es ohne sichtbaren Qualitätsverlust beliebig skalierbar. Gerade im responsiven Webdesign werden sämtliche Elemente einer HTML Seite je nach Displaygröße auf verschiedene Dimensionen skaliert. Bei traditionellen Bildformaten, wie beispielsweise JPEG oder PNG, wird das ab einer gewissen Auflösung problematisch, da Bildinhalte dann in den meisten Fällen pixelig dargestellt werden. Während bei Fotos eine Skalierung jenseits der 100 % nicht gerade als störend empfunden wird, erscheinen insbesondere Logos bei einer Skalierung unsauber und verpixelt. Scalable Vector Graphics werden hingegen immer scharf und kristallklar dargestellt.

Ein weiterer wesentlicher Vorteil des SVG Formats ist die enge Integration mit CSS Media Queries. Im Rahmen des responsiven Webdesigns werden Layouts entworfen, die sich über CSS Media Queries automatisch an die Größe des Displays (Viewport) anpassen. SVG Grafiken lassen sich in HTML Elemente einbinden und per Media Queries steuern, sodass sie sich an die Breite des Browserfensters anpassen. Insbesondere detailliertere Vektorgrafiken können sich auf kleineren Displays mit einer geringen Pixeldichte nicht richtig entfalten. Hier haben Designer und Entwickler die Möglichkeit, per CSS verzichtbare Details einfach auszublenden.

Weiterführende Links

• https://blog.kulturbanause.de/2014/02/svg-grafiken-erstellen-und-einbinden/
• https://www.mediaevent.de/tutorial/svg.html

Ähnliche Artikel

• Mobile Optimierung
• Bilder SEO

Über den Autor

Das Seobility Wiki Team besteht aus SEO-, Online-Marketing- und Web-Experten mit praktischer Erfahrung in den Bereichen Suchmaschinenoptimierung, Online-Marketing und Webentwicklung. Alle unsere Artikel durchlaufen einen mehrstufigen Redaktionsprozess, um Dir die bestmögliche Qualität und wirklich hilfreiche Informationen bieten zu können. Mehr Informationen über das Seobility Wiki Team.