Das SVG-Format und responsive Design

Durch die immer grösser werdende Verwendung von Smartphones, Tablets und anderen internetfähigen Geräten hat sich im Bereich Webdesign einiges verändert. Responsive Design rückt in den Vordergrund, da es immer wichtiger wird, dass Websiten auf allen Endgeräten korrekt dargestellt werden. Die Schwierigkeit in der Darstellung ergibt sich nicht nur aus dem typografischen Bereich, sondern auch aus dem grafischen. Das SVG-Format gewinnt immer mehr an Bedeutung, doch was sind eigentlich dessen Vorteile?

Bilddateien im SVG-Format sind beliebig skalierbar

Bilddateien im SVG-Format bestehen nicht aus Pixeln, sondern sind vektorbasiert. Das bedeutet, dass Linien und Flächen mit Prozentwerten berechnet werden, und somit nicht jeder einzelne Pixel seinen Platz hat. Gerade bei Displays von mobilen Geräten macht sich dies bemerkbar. Besteht das Logo einer Website z.B. aus einer PNG-Grafik, wird es auf dem hochauflösenden Smartphone-Display nur dann scharf dargestellt, wenn die Ursprungsdatei in doppelter Grösse hochgeladen wurde. Während also JPG- und PNG-Dateien schnell mal verpixelt dargestellt werden, bleibt eine Bilddatei im SVG-Format gestochen scharf, egal auf welche Grösse sie skaliert wird.

Dateien im SVG-Format sind per Media Queries anpassbar

Ein weiterer Vorteil des SVG-Formates ist die Anwendung von CSS bzw. Media Queries, denn wie bei einem HTML-Dokument kann das Aussehen der Grafik an die jeweilige Breite angepasst werden. Jedoch ist hierbei nicht die Breite des darstellenden Displays oder Browsers entscheidend, sondern lediglich die Breite des Elementes, welches die Grafik einbindet.

Vor allem detailreiche Grafiken können auf kleineren Bildschirmen Elemente enthalten, die kaum mehr zu erkennen sind. Diese können bei Bedarf ausgeblendet werden, oder man kann dafür sorgen, dass die Linienstärke einer Grafik ab einem gewissen Punkt nicht mehr mitskaliert wird. Da Media Queries und CSS innerhalb SVG-Grafiken mittlerweile von allen modernen Browsern unterstützt werden, lassen sich so zahlreiche Optimierungen vornehmen.

SVG kann per CSS eingebunden werden

SVG-Dateien können wie normale Bilder per HTML-Element eingesetzt werden, es geht aber auch mit reinem CSS. Sie können mittels sogenannter „Data URI“ als Hintergrundgrafiken verwendet werden, was eine zusätzliche Anfrage an den Server zum Herunterladen des Bildes umgeht. Wichtig ist bei den Hintergrundgrafiken, dass auf die „viewBox“-Einstellung verzichtet wird und stattdessen eine feste Bildgrösse definiert wird, beispielsweise mit der „background-size“-Eigenschaft, damit sich diese wie normale Hintergrundbilder skalieren.

Fazit des SVG-Formats im Webdesign

Im responsive Design ist das SVG-Format zurecht auf dem Vormarsch, denn hier kann es seine Stärken bestens ausspielen. Auch wenn in einigen Fällen getrickst werden muss, lohnt sich der Aufwand. Die stufenlose Qualität des Formats spricht eindeutig für sich. Anfängern können in der Verwendung jedoch einige Fehler passieren, weshalb es sich lohnt, sich zuvor ein wenig mit dem Thema auseinanderzusetzen – vor allem wenn es darum geht, die Kompatibilität mit älteren Browsern zu gewährleisten.