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

|
Anzeige des Mittwald-Logos: Der linke Teil als SVG, der rechte als verpixeltes PNG

Viele von euch haben den Begriff SVG-Grafik vielleicht schon einmal gehört. Was steckt jedoch hinter dem Begriff und was macht dieses Dateiformat so besonders? Im Folgenden werde ich SVG-Grafiken genauer erklären und aufzeigen, welche Vorteile diese im Zusammenhang mit Webseiten mit sich bringen.

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.

Interpolation
Mittwald-M in kleiner und vergrößerter, pixeliger Darstellung
In üblichen Bitmap-Grafiken werden Farbwerte und Formen über Pixel definiert. Möchtet ihr eine solche Grafik nun auf eurer Webseite über ihre eigentliche Auflösung skalieren, entsteht eine Interpolation. Das heißt, der Browser errechnet Zwischenpunkte für neue Pixel. Dieses Verfahren führt jedoch zwangsweise zu unscharfen Kanten: Das Bild wirkt verwaschen.
Gegenüber den Bitmap-Grafiken stehen die Vektorgrafiken. Sie werden durch mathematische Gleichungen definiert. Somit können die Informationen des Bildes bei jeder Skalierung exakt neu berechnet werden, wodurch es zu keinem Qualitätsverlust kommt: Das Bild bleibt scharf.

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.

Erstellung von SVG-Grafiken in Illustrator

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
transformieren
Transformieren-Tool mit Anzeige der Position, Breite und Höhe und weiteren Optionen der Transformation
  • Eine Große Zahl von Ankerpunkten erhöht die Dateigröße. Anpassen könnt ihr eure Grafik über Objekt > Pfad > Vereinfachen

Als SVG exportieren

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.

SVG Export
SVG-Exportfenster mit Möglichkeiten individueller Einstellungen

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

Einbindung in eure Webseite

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>

<img src="mittwald.svg">

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

<object type="image/svg+xml" data="mittwald.svg"> <!-- fallback --> <img src="mittwald.png" alt=""> </object>

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.

Gründe für SVG

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.

Kommentare

Thanathan am

Hey, in wie fern treffen die Einstellungstipps etc auch auf Inkscape zu und was sollte man in Inkscape im Gegensatz zu Illustrator beachten?

Antworten
Jula Schumacher am

Hallo Thanathan,

die Einstellungstipps, wie auf halbe Pixel zu verzichten, sollten in jeder Software so gut es geht umgesetzt werden. Des Weiteren gibt es bei der Nutzung von Inkscape nichts zu beachten. Ein großer Vorteil der Software ist zudem, dass sie den Code sauberer ausgibt.

Mit freundlichen Grüßen
Jula

Antworten

Kommentar hinzufügen