Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 2. September 2015

SVG im responsiven Webdesign: Vorteile und Probleme

Das SVG-Format hat zahl­rei­che Vorteile im Vergleich zu den ande­ren Bildformaten für das Web. Es ist vek­tor­ba­siert, kom­pakt und dank XML-Syntax sogar per Editor bear­beit­bar. Nicht ohne Grund wird es vor allem mit dem stets wach­sen­den mobi­len Internet immer belieb­ter. Denn es hat gera­de im respon­si­ven Webdesign vie­le wei­te­re Vorteile – aber auch das ein oder ande­re Problem.

svg-responsivedesign-teaser_DE

Beliebig skalierbar

Zunächst ein­mal ist SVG als Vektorformat belie­big ska­lier­bar. Gerade in respon­si­ven und flui­den Layouts wer­den Grafiken je nach Browser- und Displaygröße ger­ne auf die gesam­te zur Verfügung ste­hen­de Breite ska­liert. Bei klas­si­schen JPEG- und PNG-Dateien läuft man ab gewis­sen Auflösungen häu­fig Gefahr, pixe­lig zu wer­den. SVG-Grafik hin­ge­gen wer­den immer gesto­chen scharf dar­ge­stellt.

Während man bei Fotos eine Skalierung jen­seits der 100 Prozent durch­aus ver­kraf­ten kann, erschei­nen gera­de Logos und ande­re mehr oder weni­ge fili­gra­ne Zeichnungen bei einer sol­chen Skalierung unsau­ber.

Damit sich SVG-Grafiken belie­big ska­lie­ren las­sen, muss man das „viewBox“-Attribut im „<svg>“-Element ein­set­zen und auf abso­lu­te Breiten- und Höhenangaben ver­zich­ten. Anwendungen wie Illustrator set­zen das Attribut beim Exportieren ins SVG-Format auto­ma­tisch. Besitzen SVG-Grafiken fes­te Breiten- und Höhenangaben, wer­den sie immer in die­sen dar­ge­stellt. Eine Skalierung ist dann nicht mög­lich. Bei Verwendung der „viewBox“-Eigenschaft wird eine SVG-Grafik immer in vol­ler Breite des jewei­li­gen Elementes, wel­ches die Grafik ein­bin­det, dar­ge­stellt.

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

Wird wie im Beispiel eine SVG-Datei per „<img>“-Element ein­ge­bun­den, soll­te man dort eine Breite und Höhe ange­ben. Andernfalls wird die Grafik so ska­liert, als wäre der „width“-Eigenschaft ein Wort von 100 Prozent zuge­wie­sen.

Ein wei­te­rer posi­ti­ver Effekt der Skalierbarkeit ist der Einsatz auf Geräten mit hoch­auf­lö­sen­den Displays. Ohne Einsatz des „srcset“-Attributes, wel­ches das Einbinden hoch­auf­lö­sen­der Bilddateien für ent­spre­chen­de Displays ermög­licht, wer­den pixel­ba­sier­te Grafiken immer hoch­ska­liert. Bei Einsatz von SVG-Grafiken erspart man es sich jedoch, meh­re­re Versionen einer Grafik für unter­schied­li­che Pixeldichten bereit­zu­stel­len. Eine SVG-Grafik wird immer in bes­ter Auflösung ange­zeigt.

Per Media Queries anpassbar

Ein wei­te­rer 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 jewei­li­ge Breite ange­passt wer­den. Anders als bei HTML-Dokumenten ist hier­bei jedoch nicht die Breite des Browserfensters bezie­hungs­wei­se Displays ent­schei­dend, son­dern die Breite des Elementes, wel­ches eine SVG-Grafik in ein Dokument ein­bin­det.

Gerade detail­rei­che Grafiken kön­nen auf klei­nen Displays ihre Wirkung häu­fig nicht rich­tig ent­fal­ten. Hier besteht zum Beispiel die Möglichkeit, ver­zicht­ba­re Details ein­fach per „display“-Eigenschaft aus­zu­blen­den. Da die Linienstärke einer Grafik immer mit ska­liert wird, kann es bei klei­nen Darstellungen dazu füh­ren, dass Linien zu fein sind, um sie noch gut erken­nen zu kön­nen.

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

Hier kann per CSS eine stär­ke­re Linie gewählt wer­den.

line {
  stroke-width: 6px;
}

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

Im Beispiel wird die die Linienstärke auf sechs Pixel fest­ge­setzt. Bei Darstellungen von weni­ger als 320 Pixel Breite wird die Linienstärke auf zwölf Pixel her­auf­ge­setzt.

svg-responsiv_mit-media-queries
SVG mit Media Queries: Linienstärke wird bei klei­ner Skalierung ver­grö­ßert

Insgesamt las­sen sich auf die­se Weise zahl­rei­che Optimierungen vor­neh­men. Media Queries und CSS inner­halb einer SVG-Grafik wer­den mitt­ler­wei­le von allen Browsern unter­stützt. Auch der Internet Explorer ab Version 10 unter­stützt die­se.

Ob man die SVG-Datei per „<iframe>“-, „<object>“- oder „<img>“-Element ein­setzt, spielt kei­ne Rolle. Die Media Queries wer­den in jedem Fall aus­ge­führt.

SVG per CSS einbinden

So wie man SVG-Dateien per „<img>“-Element ein­set­zen kann, funk­tio­niert es auch per CSS. Hier gibt es aller­dings eini­ge Dinge zu beach­ten. Will man eine SVG-Grafik bei­spiels­wei­se als Hintergrundbild ein­set­zen, wird die­ses bei Verwendung der oben beschrie­ben „viewBox“-Methode immer auf die vol­le Breite des Elementes ska­liert.

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

Abhilfe schaf­fen kann man hier, indem man statt der „viewBox“-Eigenschaft eine fes­te Größe für das „<svg>“-Element angibt. Alternativ besteht natür­lich die Möglichkeit, per CSS die Hintergrundgröße mit der „background-size“-Eigenschaft anzu­ge­ben.

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 wie­der kommt es vor, dass man HTML-Elemente mit einer Hintergrundgrafik so aus­stat­ten möch­te, dass das Element genau die Maße der Hintergrundgrafik besitzt. Bei fes­ten Größen ist das kein Problem; man gibt ein­fach abso­lu­te Pixelwerte an. Will man aber – was bei respon­si­vem Webdesign ja häu­fig der Fall ist – das Element statt mit einer abso­lu­ten mit einer rela­ti­ven Größe aus­stat­ten, muss man etwas trick­sen.

Hier kommt der soge­nann­te „padding-bottom“-Hack zum Einsatz. Nehmen wir an, ein Element soll immer 50 Prozent der Fensterbreite ein­neh­men. Der CSS kann eine SVG-Hintergrundgrafik so aus­ge­zeich­net wer­den, dass sie immer die Breite des HTML-Elementes annimmt. Problematisch wird es jedoch mit der Höhe. Denn weist man dem HTML-Element eine rela­ti­ve Höhe zu, wird die­se immer in Relation zum Fenster, nicht aber in Relation zur Breite des Elementes ange­ge­ben.

Per „pad­ding-bot­tom“ und der „calc()“-Regel ist es jedoch mög­lich, einen Wert anzu­ge­ben, der rela­tiv zur Element-Breite inter­pre­tiert wird. Hat mei­ne SVG-Grafik bei­spiels­wei­se ein Seitenverhältnis von 2 zu 1, kann ich per „pad­ding-bot­tom“ die­ses Seitenverhältnis ange­ben. 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ür­lich auch direkt den aus­ge­rech­ne­ten Wert – hier 25 Prozent – ange­ben. 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 respon­si­ven Webdesign kann das SVG-Format vie­le sei­ner Stärken aus­spie­len. Vor allem aber erleich­tert es in vie­len Fällen die Arbeit, da bei­spiels­wei­se Grafiken nicht für ver­schie­de­ne Auflösungen bereit­ge­stellt wer­den müs­sen. An zurei­chen­der Browserunterstützung man­gelt es mitt­ler­wei­le 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.

8 Kommentare

  1. Zwei Punkte feh­len mir hier bei den Problemen.
    1. Wenn man svgs in einem img ein­fügt kann man die Eigenschaften nicht mit­tels CSS ver­än­dern (z.b. fill). Das geht nur wenn man direkt ein svg Element in der Source plat­ziert.
    2. Wenn man z.b. ein Logo mit einem Homelink ver­se­hen mäch­te kann es mit­un­ter pro­ble­ma­tisch wer­den da die Klickfläche nur auf den Pfaden liegt. Hat man ein rei­nes Textlogo kann man nur auf die Textlinien kli­cken, nicht aber auf die Flächen zwi­schen den Buchstaben.

    • Zumindest aktu­el­le Browser kön­nen auch dann CSS-Stile in SVG-Dateien berück­sich­ti­gen, wenn sie per „“-Element ein­ge­bun­den wer­den. Die Styles müs­sen natür­lich inner­halb der SVG-Datei lie­gen.

      Auch Links wer­den über die gesam­te Fläche der SVG-Datei dar­ge­stellt. Ausnahme ist natür­lich, wenn der Link direkt inner­halb des SVG-Quelltextes auf eine Form gelegt wird. Dann gilt er logi­scher­wei­se nur für die Form.

  2. Interessanter Artikel. Vielen Dank!

    Aber wo sind denn die wirk­li­chen Probleme, die in der Headline genannt wer­den?

Schreibe einen Kommentar

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