{"id":31742,"date":"2024-11-12T12:39:32","date_gmt":"2024-11-12T12:39:32","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31742"},"modified":"2025-03-18T13:52:20","modified_gmt":"2025-03-18T13:52:20","slug":"svg-scalable-vector-graphics","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/de\/wiki\/svg-scalable-vector-graphics","title":{"rendered":"SVG (Scalable Vector Graphics)"},"content":{"rendered":"

Definition<\/span><\/h2>\n
\n
\"SVG\"<\/a> <\/p>\n
Abbildung:<\/b> SVG – Autor: Seobility – Lizenz: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

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\u00f6ffentlicht. Mit SVG lassen sich zweidimensionale Objekte (Grafik oder Animation) beschreiben, die sich ohne Qualit\u00e4tsverlust 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.\n<\/p>\n

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.\n<\/p>\n

Eine SVG-Datei ist in einer Baumstruktur definiert, die aus einzelnen Elementen zusammengesetzt ist. Diesen Elementen werden, \u00e4hnlich 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<\/a>-Declaration beginnt. Bei XML handelt es sich um eine deklarative Auszeichnungssprache, die prim\u00e4r 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.\n<\/p>\n

Erstellung von SVG-Grafiken<\/span><\/h2>\n

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\u00f6glichkeit, die meisten Effekte umzusetzen, die mit Adobe Illustrator m\u00f6glich sind. Bei komplexen mehrstufigen Verl\u00e4ufen sollte jedoch darauf geachtet werden, dass diese im Web Browser eventuell anders angezeigt werden, sodass einige Abweichungen hinsichtlich der Farbwiedergabe bei der Darstellung m\u00f6glich sind. Wichtig ist, dass die einzelnen Pfade klar und sauber definiert werden, da selbst minimale \u00c4nderungen sp\u00e4ter im Web Browser zu sichtbaren Farbs\u00e4umen f\u00fchren k\u00f6nnen. Dieses Verhalten l\u00e4sst sich insbesondere bei skalierten SVG-Grafiken beobachten.\n<\/p>\n

Auch wenn es sich bei SVG prim\u00e4r 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\u00f6glichkeit zum Ausrichten an Pixel eingef\u00fchrt. Mit dieser k\u00f6nnen Benutzer einstellen, wie sich die einzelnen Elemente beim Skalieren oder Verschieben verhalten, sodass unerw\u00fcnschtes Farbs\u00e4umen effektiv vermieden wird. Im Idealfall sollte die SVG-Grafik im Illustrator in der Gr\u00f6\u00dfe gezeichnet werden, in der sie auch tats\u00e4chlich sp\u00e4ter, beispielsweise auf einer Website, genutzt wird. Obwohl die Abmessungen der Grafik keinen direkten Einfluss auf die Dateigr\u00f6\u00dfe haben, f\u00fchrt diese Vorgehensweise in der Regel zu besseren Resultaten im Browser.\n<\/p>\n

Um eine mit Adobe Illustrator erstellte skalierbare Vektorgrafik extern, wie beispielsweise auf einer Website, nutzen zu k\u00f6nnen, muss diese zun\u00e4chst exportiert werden. Beim Export von Scalable Vector Graphics stehen Nutzern zwei unterschiedliche M\u00f6glichkeiten zur Verf\u00fcgung. Die Grafiken k\u00f6nnen n\u00e4mlich sowohl im Dateiformat als auch als Quellcode<\/a> bereitgestellt werden. Hieraus ergeben sich auch die unterschiedlichen Optionen f\u00fcr die Einbindung von SVG in eine Webseite. Die einfachste M\u00f6glichkeit, die der Adobe Illustrator f\u00fcr das Exportieren von SVG Grafiken bietet, ist, die entsprechenden Elemente \u00fcber „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.\n<\/p>\n

Vorteile und Gr\u00fcnde f\u00fcr die Nutzung<\/span><\/h2>\n

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\u00e4tsverlust beliebig skalierbar. Gerade im responsiven Webdesign<\/a> werden s\u00e4mtliche Elemente einer HTML Seite je nach Displaygr\u00f6\u00dfe auf verschiedene Dimensionen skaliert. Bei traditionellen Bildformaten, wie beispielsweise JPEG oder PNG, wird das ab einer gewissen Aufl\u00f6sung problematisch, da Bildinhalte dann in den meisten F\u00e4llen pixelig dargestellt werden. W\u00e4hrend bei Fotos eine Skalierung jenseits der 100 % nicht gerade als st\u00f6rend empfunden wird, erscheinen insbesondere Logos bei einer Skalierung unsauber und verpixelt. Scalable Vector Graphics werden hingegen immer scharf und kristallklar dargestellt.\n<\/p>\n

Ein weiterer wesentlicher Vorteil des SVG Formats ist die enge Integration mit CSS Media Queries<\/a>. Im Rahmen des responsiven Webdesigns werden Layouts entworfen, die sich \u00fcber CSS Media Queries automatisch an die Gr\u00f6\u00dfe des Displays (Viewport<\/a>) 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\u00f6nnen sich auf kleineren Displays mit einer geringen Pixeldichte nicht richtig entfalten. Hier haben Designer und Entwickler die M\u00f6glichkeit, per CSS verzichtbare Details einfach auszublenden.\n<\/p>\n

Weiterf\u00fchrende Links<\/span><\/h2>\n