SVG – Skalierbare Vektorgrafik

Screenshot - Mobil
Screenshot svg.mesuma.de

(M)ein Blog zum Thema SVG-Grafik im Browser

Mit der rasanten Entwicklung des Internets werden immer neuere Anforderungen an die Webseiten gestellt.
Durch die große Anzahl von Ausgabemedien: Handy, Smartphone, Tablet, Notebook, TV und Desktop-PC, mit verschiedenen Bildschirmauflösungen und Eigenschaften, ist eine frei skalierbare Darstellung von Fotos und Grafiken notwendig.

Bei Fotografien wird aus diesem Grunde eine hochauflösende Grafik bei Bedarf kleiner skaliert. Dabei werden allerdings mehr Bytes geladen, als benötigt werden. Gerade bei geringer Bandbreite ein Ärgernis.

Grafiken, die ohnehin als Vektor erstellt werden, können seit einiger Zeit browserübergreifend direkt auf den Webseiten eingebunden werden. Der Quellcode der SVG-Datei ist dabei oftmals kleiner als das Bild in der geringsten Auflösung.
Dies trifft allerdings nur dann zu, wenn direkt in SVG programmiert wird. Wer Inkscape oder den Adobe Illustrator zum Erstellen seiner Grafiken verwendet, genriert sehr viel nicht benötigten Overhead.

Im Blog werden einzelne Probleme, die bei der Umsetzung von Grafiken und Animationen auf Basis von SVG aufgetreten sind beschrieben. Soweit es bereits Lösungen dafür gibt, werden sind diese ausführlich beschrieben.