Warum man SVG verwenden sollte

SVG steht für Scalable Vector Graphics und ist eine XML basiertes Format um zweidimensionale Vektor Grafiken darstellen zu können.

Die SVG Spezifikation wird vom W3C zur Darstellung von Vektorgrafiken auf Internetseiten empfohlen.

Grafiken die mit SVG erstellt werden berechnen die Pixel der Grafik bei jeder Größenveränderung neu. Dadurch können SVG verlustfrei skaliert werden.

Durch die große Rolle, die dem Responsive Design in der heutigen Zeit zugeschrieben wird, müssen Grafiken flexibel sein. Sie müssen sich problemlos vergrößern lassen und auf Monitoren ohne Qualitätsverlust sichtbar bleiben. Gleichzeitig müssen sie auch auf kleinen Smartphone-Bildschirmen einsatzfähig sein.

Man möchte, dass auf allen Endgeräten mit den verschiedensten Größen und Auflösungen die beste Darstellung der eigenen Webseite abgebildet wird. Dieser Wunsch lässt sich durch das Vektorgrafik-Format SVG realisieren.

Eigentlich wurde das SVG Format bereits 1999 eingeführt, fand zu dieser Zeit allerdings wenig Beachtung.

Da damals beinahe alle Internetseiten auf satischen Designs aufgebaut waren, gab es schlichtweg keinen Bedarf an Grafiken die mit der Auflösung skalieren. Die meisten Ausgabegeräte hatten sowieso meisten ein 4:3 Verhältsnis und zusätzlich öhnliche Auflösungen. Grafiken wurden daher in fester Größe auf den Internetseiten verwendent.

Erst mit der zunahme von Anzeigegeräte mit immer höherer Auflösung und der Etablierung von Smarthphones und Tablets gewann das SVG Format für eine breitere Masse von Webdesignern an Bedeutung.

Viele Animationen lassen sich mittlerweile auch alleine durch CSS realisieren. Da die Nutzung von CSS für Webdesignern zum Alltag gehört, lassen sich hiermit kleine Animationen für die Navigation oder Seiteninhalten leichter realisieren als mit SVG.

Den CSS Animationen ist man allerdings deutlich eingeschränkt beim erstellen von Design und können das SVG Format daher nicht ersetzen.

Im folgenden Abschnitt werden einige Beispiele für Animationen die sich durch CSS realisieren lassen gezeigt. Auf den weiteren Seiten unseres Tutorials finden Sie Beispiele für die Anwendung von SVG.

Die Frage, ob es für ein bestimmtes Projekt sinnvoll ist, SVG zu verwenden, ist abhänging von dessen individuellen Anforderungen.

Besonders bei Projekten die ästhetisch besonders herausstechen sollen, z.B. für Bildhauer, Fotografen, oder andere Künstler, kann man mit Hilfe von SVG sehr ansprechende Design entwerfen.

Bei Seiten, die hauptsächlich zum vermitteln von Informationen auf Textbasis erstellt werden, ist es ggf. sinnvoller die Verwendung von Grafiken auf ein Minimum zu reduzieren.

Letztendlich gilt wie häufig bei Designfragen die Faustregel "Weniger ist mehr". Unprofessionelle Designs sind häufig durch viele unterschiedliche Farben, Fonts oder Grafiken geprägt.

Grafiken sollten nur dann zum Einsatz kommen, wenn sie für die Übermittlung der Informationen sinnvoll sind, oder besondere Designfeatures darstellen.

Zurück nach oben