Was ist das SVG Format?

In meinem letzten Artikel hast Du das Format WebP entdeckt. Dort habe ich Dir dargelegt, wie man Bilder extrem stark komprimieren kann, um die Ladezeit der Webseite zu verbessern. Jetzt möchte ich Dir zeigen, was das SVG Format ist und warum dieses das WebP Format super ergänzt.

Die Voraussetzung zum Verständnis des SVGs ist, das Du verstanden hast, was eine Vektordatei ist. Solltest Du nicht wissen, was Vektordateien sind, solltest Du Dich vorher damit beschäftigen. Dabei sollten Dir die Vorteile einer Vektordatei klar sein: Vektordateien sind unendlich skalierbar und das ohne Qualitätsverlust.

SVG steht für "Scalable Vector Graphics" und ist eine vom W3C empfohlenes Dateiformat für Vektoren. Es wird dafür genutzt um Vektorgrafiken im Web auszugeben. Dabei genießen wir alle Vorteile einer Vektordatei im Web. Der Vorteil am eigentlichen SVG Format ist, dass diese eigentlich eine einfache XML Datei ist, d. h. Du kannst diese im Texteditor öffnen und dort bearbeiten.

Wofür sollte ich SVGs nun nutzen?

Das SVG lässt sich hervorragend nutzen, um z. B. das Logo Deiner Webseite anzuzeigen. Da das Logo meistens sogar nur aus einfachen Formen besteht, sparst Du sogar an Ladezeit und beschleunigst Deine Webseite. Das zweite Einsatzgebiet welches mir am Herzen liegt ist der Einsatz von SVGs als Ersatz von Icon Schriftarten wie FontAwesome o. ä. Das Problem bei diesen Iconfonts ist, dass diese immer die komplette Schrift inkl. aller Symbole geladen werden müssen, bevor Du die wenigen Icons, die Du tatsächlich benötigst, benutzen kannst. Dadurch entsteht eine immense und unnötige Workload. Besser ist es wenn man die Icons, die Du darstellen möchtest, als SVGs in die Webseite reinlädst, ohne die ganze Schrift zu laden.

Wie erstelle ich SVGs?

Am einfachsten lassen sich SVGs in einem Vektorprogramm wie Illustrator oder Inkscape erstellen. Von dort kannst Du meistens Deine Vektordaten als SVG-Datei abspeichern, oder Dir den Einbettugnscode ausgeben. Beides sind Möglichkeiten das SVG einzubauen. Wie genau das Einbauen funktioniert, findest Du weiter unten in dem Abschnitt "Wie baue ich SVGs in meine Webseite ein?"

Bitte beachte: Die von den Vektorprogrammen erstellten SVG Codes sind nicht immer optimal. Diese bringen meist viel Code mit, den man nicht braucht. Damit Du den SVG Code optimieren kannst, empfehle ich Dir folgenden online Tool von Peter Collingridge: http://petercollingridge.appspot.com/svg-optimiser

Wie baue ich SVGs in meine Webseite ein?

Der "echte" Weg durch Einbinden des Codes

Der "echte" Weg eine SVG einzubinden ist es, diese einfach als Code in Dein HTML-Dokument reinzukopieren. Das könnte wie folgt aussehen:

<svg viewBox="0 0 16 24" style="max-width: 60px">
	<path d="M14.7 20.1c-0.1-0.2-0.4-0.6-0.7-0.7 -0.2-0.1-0.2 0.1-0.3 0.2 -0.1 0.1-0.2 0.3-0.4 0.4 -0.1 0.1-0.5 0.4-0.4 0.5 0 0 0.2 0 0.3 0 0.4 0 0.8 0 1.2 0 0.1 0 0.3 0 0.4 0C14.9 20.5 14.8 20.3 14.7 20.1 14.7 20.1 14.8 20.2 14.7 20.1z"/><polygon points="9 0.2 9 0.2 9 0.2 "/><path d="M15.9 12.5c-0.2-1.2-1-2.3-1.9-3 -0.6 2.5-2.3 4.8-4.2 6.6 -0.1-0.6-0.1-1.3-0.1-1.9 0-0.5 0.1-1 0.1-1.5 0.1-0.4 0.2-1 0.5-1.3C10 11.8 10 12.6 10 13.1c0 0.7 0 1.3 0.1 2 1.7-1.8 3.4-4.2 3.5-6.8 0.1-1.9-0.9-3.6-2.3-4.8 -0.9-0.8-1.8-1.4-2.9-1.9C8.7 1.2 8.8 0.8 9 0.4 7 0.8 5 1.3 3.1 2.1 2.2 2.4 1 2.8 0.6 3.7c-0.4 0.9 0 2.1 0.7 2.7 0 0.3 0.3 0.6 0.4 0.9l0 0c0-0.2-0.1-0.4-0.2-0.7C1.7 6.7 2 6.7 2.2 6.8 2.5 6.9 2.8 7 3.1 7.1c0.8 0.3 1.6 0.5 2.4 0.7 0.7 0.1 1.5 0.2 2.2-0.1C7.9 7.5 8.3 7.3 8.5 7c0.2-0.4 0.2-0.9 0.1-1.3C8.8 6.3 8.9 7 8.5 7.4 8.1 7.9 7.4 8.2 6.8 8.3 5.6 8.4 4.3 7.9 3.2 7.5c-0.8 2.8-0.7 6.5 2.2 7.9 -0.1-0.6-0.1-1.1-0.1-1.7 0-0.3 0-0.7 0-1 0-0.2 0.1-0.6 0.3-0.8 -0.3 0.2-0.2 0.8-0.2 1.1 0 0.5 0.1 0.9 0.2 1.3 0.1 0.5 0.2 1 0.3 1.5 -0.6-0.2-1.2-0.5-1.8-0.9 -1.2-1-1.7-2.4-1.8-3.9 -1.5 1.8-2.6 4.1-2.1 6.4C0.6 20 2.6 22.2 5 23.1c1.1 0.4 2.2 0.5 3.4 0.6 1.2 0.1 3 0.3 4-0.6 0.8-0.7 0.7-2.3 0.1-3.2 -0.7-1-2.1-1.4-3.3-1.7 -1.4-0.3-2.8-0.3-4.2-0.6C3.8 17.5 2.7 16.8 2 16c0.7 0.5 1.6 1 2.4 1.3 0.8 0.3 1.7 0.2 2.6 0.4 1.1 0.1 2.3 0.3 3.4 0.7 1 0.4 2 0.9 2.4 1.9C14.5 18.2 16.5 15.4 15.9 12.5 15.8 12.2 16 12.9 15.9 12.5zM4 3.6c-0.1 0.1-0.5 0.2-0.6 0C3.3 3.4 3.5 3.2 3.7 3.1c0.1-0.1 0.5-0.2 0.6 0C4.4 3.3 4.1 3.5 4 3.6 3.7 3.8 4.2 3.5 4 3.6zM8.4 0.9L8.2 1.3C8.1 1.7 7.4 1 7.7 0.9l0.6-0.2C8.4 0.7 8.5 0.8 8.4 0.9z"/><polygon points="9.1 0.3 9.1 0.3 9.1 0.3 "/>
	</svg>

Die Ausgabe sieht wie folgt aus:

Der Vorteil an dieser Methode ist, dass keine Abfrage stattfindet, wie es z. B. beim Einbinden eines Bildes der Fall ist und der Browser den SVG Code liest und einfach die Grafik darstellt. Und der zweite Vorteil ist, dass ich das SVG direkt per CSS bearbeiten kann. So kann ich z. B. einen fill geben und die Farbe der SVG direkt im HTML Code ändern.

<svg viewBox="0 0 16 24" style="max-width: 60px; fill: green;">
	<path d="M14.7 20.1c-0.1-0.2-0.4-0.6-0.7-0.7 -0.2-0.1-0.2 0.1-0.3 0.2 -0.1 0.1-0.2 0.3-0.4 0.4 -0.1 0.1-0.5 0.4-0.4 0.5 0 0 0.2 0 0.3 0 0.4 0 0.8 0 1.2 0 0.1 0 0.3 0 0.4 0C14.9 20.5 14.8 20.3 14.7 20.1 14.7 20.1 14.8 20.2 14.7 20.1z"/><polygon points="9 0.2 9 0.2 9 0.2 "/><path d="M15.9 12.5c-0.2-1.2-1-2.3-1.9-3 -0.6 2.5-2.3 4.8-4.2 6.6 -0.1-0.6-0.1-1.3-0.1-1.9 0-0.5 0.1-1 0.1-1.5 0.1-0.4 0.2-1 0.5-1.3C10 11.8 10 12.6 10 13.1c0 0.7 0 1.3 0.1 2 1.7-1.8 3.4-4.2 3.5-6.8 0.1-1.9-0.9-3.6-2.3-4.8 -0.9-0.8-1.8-1.4-2.9-1.9C8.7 1.2 8.8 0.8 9 0.4 7 0.8 5 1.3 3.1 2.1 2.2 2.4 1 2.8 0.6 3.7c-0.4 0.9 0 2.1 0.7 2.7 0 0.3 0.3 0.6 0.4 0.9l0 0c0-0.2-0.1-0.4-0.2-0.7C1.7 6.7 2 6.7 2.2 6.8 2.5 6.9 2.8 7 3.1 7.1c0.8 0.3 1.6 0.5 2.4 0.7 0.7 0.1 1.5 0.2 2.2-0.1C7.9 7.5 8.3 7.3 8.5 7c0.2-0.4 0.2-0.9 0.1-1.3C8.8 6.3 8.9 7 8.5 7.4 8.1 7.9 7.4 8.2 6.8 8.3 5.6 8.4 4.3 7.9 3.2 7.5c-0.8 2.8-0.7 6.5 2.2 7.9 -0.1-0.6-0.1-1.1-0.1-1.7 0-0.3 0-0.7 0-1 0-0.2 0.1-0.6 0.3-0.8 -0.3 0.2-0.2 0.8-0.2 1.1 0 0.5 0.1 0.9 0.2 1.3 0.1 0.5 0.2 1 0.3 1.5 -0.6-0.2-1.2-0.5-1.8-0.9 -1.2-1-1.7-2.4-1.8-3.9 -1.5 1.8-2.6 4.1-2.1 6.4C0.6 20 2.6 22.2 5 23.1c1.1 0.4 2.2 0.5 3.4 0.6 1.2 0.1 3 0.3 4-0.6 0.8-0.7 0.7-2.3 0.1-3.2 -0.7-1-2.1-1.4-3.3-1.7 -1.4-0.3-2.8-0.3-4.2-0.6C3.8 17.5 2.7 16.8 2 16c0.7 0.5 1.6 1 2.4 1.3 0.8 0.3 1.7 0.2 2.6 0.4 1.1 0.1 2.3 0.3 3.4 0.7 1 0.4 2 0.9 2.4 1.9C14.5 18.2 16.5 15.4 15.9 12.5 15.8 12.2 16 12.9 15.9 12.5zM4 3.6c-0.1 0.1-0.5 0.2-0.6 0C3.3 3.4 3.5 3.2 3.7 3.1c0.1-0.1 0.5-0.2 0.6 0C4.4 3.3 4.1 3.5 4 3.6 3.7 3.8 4.2 3.5 4 3.6zM8.4 0.9L8.2 1.3C8.1 1.7 7.4 1 7.7 0.9l0.6-0.2C8.4 0.7 8.5 0.8 8.4 0.9z"/><polygon points="9.1 0.3 9.1 0.3 9.1 0.3 "/>
	</svg>

Ab hier sind Dir keine Grenzen mehr gesetzt. Du kannst der SVG eine Klasse geben und diese z. B. über CSS Animationen animieren, die Farben ändern oder sogar die Formen ändern.

Einige Optionen wären z. B.: fill, stroke, stroke-width, width und height.

Einbinden durch Verlinken der SVG-Datei

Die zweite und einfachere Möglichkeit eine SVG einzubinden ist es diese, als ganz normales Bild zu behandeln und über den Img Tag einzubinden.

<img src="webby.svg" alt="">

Bitte beachten, dass diese Lösung zwar nahe liegt, aber nicht die optimalste ist, da Dir die Bearbeitungsoptionen nicht zur Verfügung stehen.

Fazit:

SVG ist ein tolles Format um Vektoren auf Deine Webseite zu bringen und Resourcen zu sparen. Dabei genießt man das man tolle Funktionen nutzen kann und kannst mit der Datei direkt im Dokument arbeiten.

Die Vorteile im Überblick:

  • kleine Dateigrößen
  • Unendlich skalierbar auf jede Größe, ohne Qualitätsverlust
  • Kontrolle über CSS

Wie findest Du diesen Artikel? Ich bin immer auf Deine ehrliche Meinung gespannt und versuche mich jeden Tag zu verbessern. Sollte Dir was fehlen oder unklar sein, hinterlasse in den Kommentaren Feedback oder schreibe mir auf Twitter @Lautenschlager. Ich danke Dir für Deine wertvolle Zeit!

Autorenbild Andreas Lautenschlager

Von Andreas Lautenschlager

Webentwickler / Online Marketing Berater

emailSchreibe mir Twitter