Warum SVG-Grafiken für Webdesigner die erste Wahl sein sollten

Die Abkürzung SVG steht für Scalable Vector Graphics oder zu deutsch „skalierbare Vektorgrafiken“. Dieses Dateiformat dient der Beschreibung von zweidimensionalen Vektorgrafiken und Animationen. Das macht es möglich, Vektorgrafiken im Browser darzustellen. Hierbei unterliegt das Format der bereits bekannten Syntax von XML.

Ein weiterer, sehr großer Vorteil von SVG-Grafiken ist, dass sie eine sehr geringe Dateigröße besitzen, welche auch bei Skalierung der Grafik konstant bleibt. Des Weiteren können SVG-Grafiken mit Hilfe von JavaScript animiert oder verändert werden.

Für die Erstellung von SVG-Grafiken ist das Grafikprogramm Illustrator von Adobe sehr gut geeignet, da ihr die meisten Effekte und Filter problemlos in euren SVG-Grafiken einsetzen könnt. Beachten solltet ihr hierbei jedoch, dass die Wahrscheinlichkeit einer abweichenden Darstellung bei komplexen Filtern, Verläufen oder Effekten stark zunimmt.
Um eine möglichst gute Anzeigequalität eurer Grafik zu gewährleisten, sollten daher einige Dinge beachtet werden:

• Pfade sollten sauber gezeichnet sein, da minimale Überlappungen bereits zu Farbsäumen führen können
• Die Zeichenfläche sollte der Größe der Grafik angepasst werden, sodass in der Anwendung der SVG-Grafik keine Abstände oder Freiräume mit eingerechnet werden
• Im Browser lässt sich ein besseres Ergebnis erzielen, wenn die Datei in Illustrator bereits in der richtigen Größe angelegt wurde, da ältere Browser nicht so gut skalieren können
• Eure Grafiken sollten keine halben, sondern nur ganze Pixel enthalten. Somit werden unscharfe Kanten vermieden. Dazu gehört auch, dass die Pixel am Pixelraster ausgerichtet werden sollen

• Eine Große Zahl von Ankerpunkten erhöht die Dateigröße. Anpassen könnt ihr eure Grafik über Objekt > Pfad > Vereinfachen

Bei dem Export von SVG-Grafiken gibt es zwei wesentliche Unterschiede: Sie können sowohl als Datei, als auch als Code bereitgestellt werden. Hieraus ergibt sich somit auch eine unterschiedliche Einbindung in eure Webseite. Das folgende Menüfenster öffnet ihr unter Datei > Exportieren. Hier wählt ihr als Format SVG aus.

Drückt ihr auf „OK“ erhaltet ihr eure Grafik als SVG-Datei. Den Code erhaltet ihr nach der Auswahl der Schaltfläche „Code anzeigen“.

Nun möchte ich euch auch zeigen, wie ihr die exportierten SVG-Grafiken in eure Webseite einbinden könnt. Die zwei wesentlichen Möglichkeiten wären, sie als Datei oder als Code in den HTML Text einzufügen. Habt ihr die Grafik als Datei gespeichert, könnt ihr sie ganz einfach über den <img>

oder <object> Tag in den Quelltext einfügen.

Solltet ihr euch die Grafik aber als Code ausgegeben lassen haben, ist das auch kein Problem. Der Tag für SVG lautet <svg>. Hier könnt ihr nun einfach euren ausgegebenen Code einfügen und das Bild wird auf der Webseite generiert.

Durch die große Rolle, die dem Responsive Design in der heutigen Zeit zugeschrieben wird, müssen Grafiken flexibel sein. Sie müssen sich problemlos vergrößern lassen und auf Monitoren ohne Qualitätsverlust sichtbar bleiben. Gleichzeitig müssen sie auch auf kleinen Smartphone-Bildschirmen einsatzfähig sein. Der Wunsch: Man möchte, dass auf allen Endgeräten mit den verschiedensten Größen und Auflösungen die beste Darstellung der eigenen Webseite abgebildet wird. Dieser Wunsch lässt sich durch das Vektorgrafik-Format SVG realisieren.