In letzter Zeit wird man als Entwickler und Designer immer mehr mit dem Thema SVGs, auch “scalable vector graphics”, konfrontiert. Doch warum ist das eigentlich so und was sind eigentlich SVGs. In diesem Blogpost möchte ich auf die Vor- und Nachteile von SVGs eingehen und in kleinen Beispielen zeigen, wofür man SVGs sinnvollerweise verwenden kann.

Verwendung von SVGs

SVGs bestehen zur Gänze aus Pfaden. Sie können in professionellen Programmen wie Adobe Illustrator, Sketch, etc. erstellt werden. Der größte Vorteil von SVGs ist, dass sie bei jeder Auflösung, in jeder Größe und auf jedem Gerät gestochen scharf aussehen. Man kann sie somit unbegrenzt skalieren und muss sich keine Sorgen machen, dass sie unscharf werden. Speziell bei hochauflösenden Displays ist dies ein großer Vorteil, da man hier kein zusätzliches Bild am Server haben muss. Doch wofür eigenen sich eigentlich SVGs. Grundsätzlich für alles was man auf Pfaden zaubern kann, wie zum Beispiel Logos. Auch komplexere Animationen sind möglich wie zum Beispiel http://svg-wow.org/camera/camera.xhtml oder verschiedene Projekte der Agentur Gardenestudio. Nicht geeignet sind SVGs wiederum für Bilder, welche eine hohe Anzahl an Variation in den Pixel haben, wie zum Beispiel Fotografien. Da SVGs im Hintergrund aus der Markup Language XML bestehen, können diese im Texteditor angesehen und verändert werden. Auch ist es möglich, diese mit CSS zu verändern und genau das ist die Stärke von SVGs. Um ein SVGs bearbeiten zu können muss das komplette XML Markup in das HTML Dokument eingefügt werden. Möchte man jedoch nur ein gestochen scharfes Icon haben und keine besonderen Variationen damit machen, reicht der Import über das alt bekannte <img>– Element. Wir schauen uns jetzt in zwei kleinen einfachen Beispielen an, wie das funktioniert. Für genauere Informationen wie man SVGs verändern kann, könnt ihr euch die Mozilla Developer Network Referenz für SVGs ansehen.

 

Beispiel 1

Ihr könnt euch beide Beispiele zur Veranschaulichung im Anhang herunterladen.

Was wir beim ersten Beispiel machen wollen ist, das MFG-Logo bis zum Viewport von 767px kleiner dazustellen und zusätzlich den Text „Mobile Forschungsgruppe“ auszublenden, da dieser sowieso nicht leserlich ist. Wir schauen uns also zuerst das SVG im Editor an und kommentieren uns einzeln die verschiedenen <path>-Elemente aus, um zu sehen welche davon unseren Text darstellen. Wenn wir dies haben, geben wir jedem path den wir ausblenden wollen die Klasse „hide“. Der Rest sollte für jeden bekannt sein. Mit einem mediaquery setzen wir die Klasse hide bis zu einer max-width von 767px auf display none. Zusätzlich verändern wir die Größe des SVGs auf 70px.

@media (max-width: 767px) {
 .hide {
  display: none;
 }
 svg {
  width: 70px;
  height: 70px;
 }
}

Wenn wir nun die Browsergröße verändern, sehen wir unser Ergebnis. Wenn ich dieses SVG Logo mit einem PNG vergleiche, sehe ich auch einen zusätzlichen benefit. Das SVG Logo is lediglich 18kb groß. Im Vergleich dazu das PNG Logo mit 38kb. Zusätzlich müsste ich eine zweite Variante machen ohne dem „Mobile Forschungsgruppe“- Schriftzug. Auch bräuchte ich das Logo für verschiedene Auflösungen. Zusätzlich habe ich einen HTTP Request weniger. Überall wo es Vorteile gibt, gibt es aber auch Nachteile. Wenn man das SVG über das Markup anstatt über das <img>-Element einbindet, kann das Logo nicht gecached werden. Eine Möglichkeit dies zu umgehen wäre mit dem HTML Object Element. Dieses kann gecached und zusätzlich gestyled werden. Dafür müssen die jeweiligen Stylesheet speziell eingebunden werden und jedes svg benötigt sein eigenes Stylesheet.

 

Beispiel 2

Bei unserem zweiten Beispiel widmen wir uns den Animationen. Wie bereits gezeigt, sind komplizierte Animationen möglich. Für den größten Teil sind aber kleine Icon Animationen ausreichend.  SVGs können auf verschiedene Arten animiert werden. Eine Variante wäre mit JavaScript, wobei man sehr viel Kontrolle über die Animation selbst hat. Da man hierfür fortgeschrittene JavaScript Kenntnisse benötigt, kann man sich auch der Hilfe von Libraries wie snap.svg oder velocity.js bedienen. Die einfachere und weniger Fehleranfällige Variante ist mittels CSS Animation welche wir uns kurz ansehen. Auch dieses Beispiel ist im Zip im Anhang vorhanden.

 

Wir verwenden ein kleines Rad als Einstellungs-Icon welches wir bei hover vergrößern und drehen wollen. Um bestimmte Teile eines SVGs gemeinsam animieren zu können, kann man diese mit dem <g>-Element gruppieren.  Wir vergeben dem Element die Klasse gear damit wir diese bei hover ansprechen können. Das eigentliche Icon bekommt die Klasse gear-icon. Mittels transition: transform .4s ease-out; sagen wir das wir die transofrm property animieren wollen in 0.4s und einem ease out (Wir fangen schnell an und werden zum Ende der Animation langsamer). Weiteres könnt ihr der Mozilla Developer Network Transition Spezifikation entnehmen. Wir wollen die Animation durchführen, sobald wir über das komplette Icon mit der Maus fahren. Wir sprechen somit unser <g> Element mit der Klasse gear bei hover an, setzten aber die transform property auf die Klasse gear-icon. Mittels transform: rotate(45deg) scale(1.3); sagen wir, dass wir eine Drehung um 45 Grad und eine 1.3 Fache Skalierung haben wollen. Wenn wir dies jetzt so ausführen würden, hätten wir noch ein Problem. Die Animation würde nämlich nicht um die eigene Achse durchgeführt werden, sondern eher schwingen. Versucht es also, indem ihr die transform-origin property auskommentiert. Dies liegt daran, weil SVGs als Ausgangspunkt die linke obere Ecke von sich selbst nehmen. Wir müssen also die transform-origin property auf 50% 50% setzen. Diese Angabe führt jedoch beim Firefox Browser zu Problemen da er %-Angaben im Bezug auf SVGs nicht versteht. Um jeden Browser unterstützen zu können suchen wir uns aus dem SVG die Werte für cx und cy heraus. Wenn wir diese dann in die Property eingeben kommen wir zu unserem erwünschten Ergebnis.

 

Daten zur Übung herunterladen