SVG – einfach, flexibel, schnell und robust!

Jede Webseite sollte SVG (Scalable Vector Graphics) verwenden (haunschild.de tut es zum ersten mal in diesem Artikel, passenderweise in Form des SVG-Logos).

Viele andere Webseiten setzen SVG bereits seit Jahren ein. Die Technik ist robust und sinnvoll.

Die Vorteile von SVG

Das SVG-Logo bestehnd aus den Buchstaben "SVG" auf orangem Hintergrund

Das offizielle Logo – das erste Bild im SVG-Format auf haunschild.de
  • skalierbar und damit ideal für responsive Webseiten
  • inklusiv und damit geeignet für zugängliche Webseiten
  • effizient und damit geeignet für performante Webseiten
  • veränderbar mittels CSS und damit wartbar und anpassbar an z.B. ein Redesign, Bildschirmgrößen, Farbschemata usw
  • cachable – also vom Browser wiederverwendbar, ohne wiederkehrende http-Requests und zudem als Satz (Sprite) gruppierbar und als einzelne Datei speicherbar (ein http-Request für viele Icons/Bilder)
  • wiederverwertbar auch vom Entwickler und damit DRY (don#t repeat yourself)
  • einfach in der Anwendung mittels Image-Element (in HTML) oder als Hintergrund-Grafik (in CSS)
  • einfach in der Erstellung mittels entsprechender Tools (z.B. Adobe Illustrator) und zahlreich kostenlos im Web verfügbar.
  • einsteigerfreundlich und daher ohne hohen Lernaufwand verwendbar, aber
  • mächtig, wenn man mit der Zeit das Format und die Syntax lernt
  • Problemlöser für Gestaltungsaufgaben, bei denen CSS-Lösungen sehr umständlich oder unmöglich sind
  • Browserunterstützung nahezu komplett für Basis-Funktionen, Filter und Effekte (can I use-Abfrage )

Fallback

Wenn sehr alte Browser unterstützt werden müssen, gibt es Polyfills, die beispielsweise auf HTML5please.com vorgestellt werden oder eine JavaScript-Lösung, die sich SVGeezy nennt. Auch Modernizr kann selbstverständlich entsprechende Klassen je nach vorhandener Unterstützung ausgeben, auf die man z. B. bei der Verwendung von CSS-Hintergründen zurückgreifen kann. In der Regel sollte das aber nicht mehr nötig sein.

Vergleich von Icon Fonts und SVG

Chris Coyier zeigt auf der beyond Tellerrand Konferenz 2014 in Düsseldorf die Vor- und Nachteile von Iconfonts und SVG
Chris Coyier zeigt auf der beyond Tellerrand Konferenz 2014 in Düsseldorf die Vor- und Nachteile von Iconfonts und SVG

Auch im direkten Vergleich mit skalierbaren Icon-Fonts überwiegen die Vorteile von SVG

  • Barrierefreiheit ist leichter zu berücksichtigen
  • Die Ausrichtung (Positionierung) von SVGs ist einfacher als man das von Icon-Fonts kennt
  • Es kann mehr als nur eine Farbe verändert werden, die einzelnen Bestandteile lassen sich darüber unabhängig voneinander skalieren, drehen und in jeder anderen Hinsicht gestalten
  • die Formatierungen können mittels CSS und SVG-CSS vorgenommen werden, was noch weitergehende Gestaltungsmöglichkeiten eröffnet

Quellen für erste Schritte mit SVGs

Eine weitere Hilfe für alle die tiefer einsteigen möchten is SnapSVG, eine Library für interaktive SVG-Animationen von Adobe.

Wer sich den Einstieg lieber erklären lassen möchte, statt selber zu lesen, sollte sich den folgenden Vortrag anhören, der ebenfalls von Chris Coyier stammt.

Fazit

Die Zeit ist reif. Für zukünftige Projekte habe ich es mir selber hinter die Ohren geschrieben: Verwende SVGs!

Die Vorteile sind überzeugend, die Technik einsteigerfreundlich und die Browserunterstützung schon seit längerem sehr gut.

Außerdem gibt es viele Infos zum Thema im Web – Video-Tutorials, Blog-Beiträge und mehr für Einsteiger wie Fortgeschritten finden sich zu Hauf. Also: auf geht’s!

Schreibe einen Kommentar

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