It’s #FrontendFriday – How to SVG

19.11.2021

Mit SVG ist nicht die Straßenverkehrsgenossenschaft gemeint, sondern Scalable Vector Graphics. Im Folgenden wollen wir einen kurzen Überblick über SVGs geben und wie man diese im Projektalltag richtig einsetzt.

Was ist ein SVG?

SVGs sind auf XML basierende, skalierbare Vektorgrafiken, welche erstmals 2001 von W3C (World Wide Web Consortium) veröffentlicht wurden. Der große Vorteil von SVGs ist, dass ein SVG nicht auf Pixeln basiert sondern auf Verktoren. Dadurch können diese beliebig vergrößert werden, ohne dass die Bildqualität darunter leidet. [1]

Die Grundstruktur eines SVGs ist immer folgende:

Der Inhalt des Pfads (<path></path>) definiert die eigentliche Form der Grafik. Einfache Formen können leicht implementiert und dargestellt werden.

Beispiel Kreis [2]:

Beispiel Rechteck [2]:

 

Wie verwende ich SVGs in einer Applikation?

Es gibt verschiedene Arten SVGs in eine Applikation einzubinden.

SVGs im img-TAG:

Diese Vorgehensweise ermöglicht eine zentrale Verwaltung von SVGs in einem separaten Verzeichnis (beispielsweise „/assets/icons“). Anschließend können einzelne Files mit Hilfe von img-TAGs eingebunden werden:

Durch das img-TAG können SVGs sehr schnell und einfach implementiert werden. Zudem wird die Verwaltung von SVGs erleichtert. Der Nachteil hierbei ist, dass einige Funktionen wie Animationen und Links nicht auf das SVG angewendet werden können. [3]

SVGs als SVG-TAG:

Eine weitere Möglichkeit ist, das SVG direkt im HTML-Code zu implementieren. Dadurch können CSS-Klassen direkt angewendet werden. Somit kann die Grafik umfangreich angepasst werden. Zudem sind in dieser Variation Verlinkungen und Animationen möglich. Allerdings leiden darunter die Lesbarkeit und Wartbarkeit des HTML-Codes deutlich.  [3]

 

SVG über Bibliotheken

Eine weitere Variante ist der Einsatz von Libraries wie beispielweise „angular-svg-icon“. Diese vereint die Vorteile von den beiden vorhergegangenen Möglichkeiten. Icons und Bilder können zentral verwaltet und leicht eingebunden werden. Zudem können sie durch den Einsatz von CSS-Klassen unterschiedlich verändert werden. Allerdings muss hier eine zusätzliche Library installiert werden. [4]

 

Es gibt noch viele weitere Möglichkeiten ein SVG einzubinden, wie beispielsweise als Hintergrund oder als Objekt. Die vorgestellten Methoden geben jedoch einen grundlegenden Überblick für die Verwendung von SVGs in einer Applikation.

Die Webfrontend-AG wünscht allen ein schönes Wochenende!

 

Quellen:

[1] W3C

[2] GlossarWiki Augsburg

[3] Mediaevent

[4] Angular-svg-icon

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*