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, dass Du verstanden hast, was eine Vektordatei ist. Solltest Du nicht wissen, was Vektordateien sind, solltest Du Dich vor dem Lesen dieses Artikels 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, das heißt, 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. Die zweite Einsatzmöglichkeit ist der Einsatz von SVGs als Ersatz von Icon Schriftarten wie FontAwesome oder ähnlichem. 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 Vektor-Programm wie Illustrator oder Inkscape erstellen. Von dort kannst Du meistens Deine Vektordaten als SVG-Datei abspeichern, oder Dir den Einbettungs-Code ausgeben. Beides sind Möglichkeiten das SVG einzubauen.
Bitte beachte: Die von den Vektor-Programmen 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: https://jakearchibald.github.io/svgomg/
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" fill="#ff6600" 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>
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. Eine vollständige Liste aller Attribute findest Du hier.
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 optimale ist, da Dir die Bearbeitungsoptionen nicht zur Verfügung stehen.
Fazit:
SVG ist ein tolles Format, um Vektoren auf Deine Webseite zu bringen und Ressourcen zu sparen. Dabei genießt man, dass man tolle Funktionen nutzen kann und mit der Datei direkt im Dokument arbeiten kann.
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 Instagram @lautenschlager.de. Ich danke Dir für Deine wertvolle Zeit!
