Denis Potschien 2. September 2015

SVG im responsiven Webdesign: Vorteile und Probleme

Das SVG-Format hat zahlreiche Vorteile im Vergleich zu den anderen Bildformaten für das Web. Es ist vektorbasiert, kompakt und dank XML-Syntax sogar per Editor bearbeitbar. Nicht ohne Grund wird es vor allem mit dem stets wachsenden mobilen Internet immer beliebter. Denn es hat gerade im responsiven Webdesign viele weitere Vorteile – aber auch das ein oder andere Problem.

svg-responsivedesign-teaser_DE

Beliebig skalierbar

Zunächst einmal ist SVG als Vektorformat beliebig skalierbar. Gerade in responsiven und fluiden Layouts werden Grafiken je nach Browser- und Displaygröße gerne auf die gesamte zur Verfügung stehende Breite skaliert. Bei klassischen JPEG- und PNG-Dateien läuft man ab gewissen Auflösungen häufig Gefahr, pixelig zu werden. SVG-Grafik hingegen werden immer gestochen scharf dargestellt.

Während man bei Fotos eine Skalierung jenseits der 100 Prozent durchaus verkraften kann, erscheinen gerade Logos und andere mehr oder wenige filigrane Zeichnungen bei einer solchen Skalierung unsauber.

Damit sich SVG-Grafiken beliebig skalieren lassen, muss man das „viewBox“-Attribut im „<svg>“-Element einsetzen und auf absolute Breiten- und Höhenangaben verzichten. Anwendungen wie Illustrator setzen das Attribut beim Exportieren ins SVG-Format automatisch. Besitzen SVG-Grafiken feste Breiten- und Höhenangaben, werden sie immer in diesen dargestellt. Eine Skalierung ist dann nicht möglich. Bei Verwendung der „viewBox“-Eigenschaft wird eine SVG-Grafik immer in voller Breite des jeweiligen Elementes, welches die Grafik einbindet, dargestellt.

<img src="demo.svg" width="640" height="320" />

Wird wie im Beispiel eine SVG-Datei per „<img>“-Element eingebunden, sollte man dort eine Breite und Höhe angeben. Andernfalls wird die Grafik so skaliert, als wäre der „width“-Eigenschaft ein Wort von 100 Prozent zugewiesen.

Ein weiterer positiver Effekt der Skalierbarkeit ist der Einsatz auf Geräten mit hochauflösenden Displays. Ohne Einsatz des „srcset“-Attributes, welches das Einbinden hochauflösender Bilddateien für entsprechende Displays ermöglicht, werden pixelbasierte Grafiken immer hochskaliert. Bei Einsatz von SVG-Grafiken erspart man es sich jedoch, mehrere Versionen einer Grafik für unterschiedliche Pixeldichten bereitzustellen. Eine SVG-Grafik wird immer in bester Auflösung angezeigt.

Per Media Queries anpassbar

Ein weiterer großer Vorteil des SVG-Formates ist die Anwendung von Media Queries und CSS. Ähnlich wie bei einem HTML-Dokument kann das Aussehen an die jeweilige Breite angepasst werden. Anders als bei HTML-Dokumenten ist hierbei jedoch nicht die Breite des Browserfensters beziehungsweise Displays entscheidend, sondern die Breite des Elementes, welches eine SVG-Grafik in ein Dokument einbindet.

Gerade detailreiche Grafiken können auf kleinen Displays ihre Wirkung häufig nicht richtig entfalten. Hier besteht zum Beispiel die Möglichkeit, verzichtbare Details einfach per „display“-Eigenschaft auszublenden. Da die Linienstärke einer Grafik immer mit skaliert wird, kann es bei kleinen Darstellungen dazu führen, dass Linien zu fein sind, um sie noch gut erkennen zu können.

svg-responsiv_ohne-media-queries
SVG ohne Media Queries: Dünne Linien bei kleiner Skalierung

Hier kann per CSS eine stärkere Linie gewählt werden.

line {
  stroke-width: 6px;
}

@media all and (max-width: 320px) {
  line {
    stroke-width: 12px;
  }
}

Im Beispiel wird die die Linienstärke auf sechs Pixel festgesetzt. Bei Darstellungen von weniger als 320 Pixel Breite wird die Linienstärke auf zwölf Pixel heraufgesetzt.

svg-responsiv_mit-media-queries
SVG mit Media Queries: Linienstärke wird bei kleiner Skalierung vergrößert

Insgesamt lassen sich auf diese Weise zahlreiche Optimierungen vornehmen. Media Queries und CSS innerhalb einer SVG-Grafik werden mittlerweile von allen Browsern unterstützt. Auch der Internet Explorer ab Version 10 unterstützt diese.

Ob man die SVG-Datei per „<iframe>“-, „<object>“- oder „<img>“-Element einsetzt, spielt keine Rolle. Die Media Queries werden in jedem Fall ausgeführt.

SVG per CSS einbinden

So wie man SVG-Dateien per „<img>“-Element einsetzen kann, funktioniert es auch per CSS. Hier gibt es allerdings einige Dinge zu beachten. Will man eine SVG-Grafik beispielsweise als Hintergrundbild einsetzen, wird dieses bei Verwendung der oben beschrieben „viewBox“-Methode immer auf die volle Breite des Elementes skaliert.

svg-responsiv_background
Hintergrundgrafik mit „viewBox“-Eigenschaft und ohne „background-size“-Eigenschaft im HTML-Element

Abhilfe schaffen kann man hier, indem man statt der „viewBox“-Eigenschaft eine feste Größe für das „<svg>“-Element angibt. Alternativ besteht natürlich die Möglichkeit, per CSS die Hintergrundgröße mit der „background-size“-Eigenschaft anzugeben.

div {
  background-image: url("demo.svg");
  background-size: 50px 25px;
}

svg-responsiv_background_size
Hintergrundgrafik mit „viewBox“-Eigenschaft und mit „background-size“-Eigenschaft im HTML-Element

Immer wieder kommt es vor, dass man HTML-Elemente mit einer Hintergrundgrafik so ausstatten möchte, dass das Element genau die Maße der Hintergrundgrafik besitzt. Bei festen Größen ist das kein Problem; man gibt einfach absolute Pixelwerte an. Will man aber – was bei responsivem Webdesign ja häufig der Fall ist – das Element statt mit einer absoluten mit einer relativen Größe ausstatten, muss man etwas tricksen.

Hier kommt der sogenannte „padding-bottom“-Hack zum Einsatz. Nehmen wir an, ein Element soll immer 50 Prozent der Fensterbreite einnehmen. Der CSS kann eine SVG-Hintergrundgrafik so ausgezeichnet werden, dass sie immer die Breite des HTML-Elementes annimmt. Problematisch wird es jedoch mit der Höhe. Denn weist man dem HTML-Element eine relative Höhe zu, wird diese immer in Relation zum Fenster, nicht aber in Relation zur Breite des Elementes angegeben.

Per „padding-bottom“ und der „calc()“-Regel ist es jedoch möglich, einen Wert anzugeben, der relativ zur Element-Breite interpretiert wird. Hat meine SVG-Grafik beispielsweise ein Seitenverhältnis von 2 zu 1, kann ich per „padding-bottom“ dieses Seitenverhältnis angeben. Dazu wird die Breite des Elementes durch das Seitenverhältnis geteilt.

div {
  background-image: url("demo.svg");
  width: 50%;
  padding-bottom: calc(50% / (2 / 1));
}

Im Beispiel wird also die Breite von 50 Prozent durch das Seitenverhältnis von 2 zu 1 geteilt. Alternativ kann man statt „calc()“ natürlich auch direkt den ausgerechneten Wert – hier 25 Prozent – angeben. Das HTML-Element besitzt somit immer eine Breite von 50 Prozent und eine Höhe, die dem Seitenverhältnis der SVG-Grafik besitzt.

Fazit

Im responsiven Webdesign kann das SVG-Format viele seiner Stärken ausspielen. Vor allem aber erleichtert es in vielen Fällen die Arbeit, da beispielsweise Grafiken nicht für verschiedene Auflösungen bereitgestellt werden müssen. An zureichender Browserunterstützung mangelt es mittlerweile auch nicht mehr.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

8 Kommentare

  1. Zwei Punkte fehlen mir hier bei den Problemen.
    1. Wenn man svgs in einem img einfügt kann man die Eigenschaften nicht mittels CSS verändern (z.b. fill). Das geht nur wenn man direkt ein svg Element in der Source platziert.
    2. Wenn man z.b. ein Logo mit einem Homelink versehen mächte kann es mitunter problematisch werden da die Klickfläche nur auf den Pfaden liegt. Hat man ein reines Textlogo kann man nur auf die Textlinien klicken, nicht aber auf die Flächen zwischen den Buchstaben.

    • Zumindest aktuelle Browser können auch dann CSS-Stile in SVG-Dateien berücksichtigen, wenn sie per „“-Element eingebunden werden. Die Styles müssen natürlich innerhalb der SVG-Datei liegen.

      Auch Links werden über die gesamte Fläche der SVG-Datei dargestellt. Ausnahme ist natürlich, wenn der Link direkt innerhalb des SVG-Quelltextes auf eine Form gelegt wird. Dann gilt er logischerweise nur für die Form.

  2. Interessanter Artikel. Vielen Dank!

    Aber wo sind denn die wirklichen Probleme, die in der Headline genannt werden?

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.