Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 23. Oktober 2018

Responsives SVG: Was geht, was geht nicht?

Im Webdesign sind respon­si­ve Layouts nicht mehr weg­zu­den­ken. Da gibt es auf der einen Seite immer mehr klei­ne Displays auf Smartphones und auf der ande­ren Seite immer grö­ßer wer­den­de Monitore. Dazwischen fin­den sich Phablets, Tablets sowie Net- und Notebooks. Dank CSS ist es tech­nisch kein Problem, eine Website für all die ver­schie­de­nen Auflösungen zu opti­mie­ren. Doch wie sieht es mit SVGs aus? Lassen sich die­se auch respon­siv gestal­ten?

Skalieren oder nicht skalieren?

Die ein­fachs­te Möglichkeit, eine SVG-Grafik auf ver­schie­de­nen Displays und Browserfenstern dar­zu­stel­len, ist natür­lich das Skalieren. Dabei wird die Grafik immer so ver­grö­ßert oder ver­klei­nert, dass sie passt – mehr oder weni­ger jeden­falls.

Denn auch wenn ein­fa­ches Skalieren den wenigs­ten Aufwand mit sich bringt, hat es natür­lich sei­ne Nachteile. Gerade bei kom­ple­xen Grafiken gehen bei star­ken Verkleinerungen Details schon mal ver­lo­ren oder sind kaum noch erkenn­bar. Texte kön­nen auf ein­mal so klein dar­ge­stellt sein, dass sie nicht mehr les­bar sind.

Während bei Fotos das ein­fa­che Skalieren meis­tens völ­lig in Ordnung ist, kommt es für vek­tor­ba­sier­te SVG-Formate mit­un­ter nicht immer in Frage – jeden­falls nicht aus­schließ­lich. Hier soll­test du bei klei­nen Darstellungen etwas opti­mie­ren, indem du zu klei­ne Elemente ver­grö­ßerst oder ver­zicht­ba­re Details aus­blen­dest.

<svg width="100%" height="100%">
  <rect x="50%" y="50%" width="150" height="150" style="transform: scale(0.5)" />
</svg>

Wichtig ist, dass die SVG-Grafik nicht per „img“ ein­ge­bun­den wird, son­dern direkt im HTML-Quelltext aus­ge­zeich­net ist. Nur so hast du die Möglichkeit, über das Stylesheet des HTML-Dokumentes auch Eigenschaften dei­ner SVG-Elemente zu ver­än­dern.

Mit „viewBox“ skalieren

Im Normalfall wer­den die Elemente einer SVG-Zeichenfläche nicht ska­liert, wenn du die Größe des „<svg>“-Elementes änderst. Sie behal­ten Position und Größe bei. Lediglich die Zeichenfläche wird nach rechts und unten ver­grö­ßert bezie­hungs­wei­se ver­klei­nert.

SVG ohne „viewBox“-Eigenschaft: Der Kreis bleibt immer gleich groß

Um eine Skalierung her­bei­zu­füh­ren, musst du die „viewBox“-Eigenschaft ver­wen­den. Mit die­sem Attribut defi­nierst du einen Ausschnitt der SVG-Zeichenfläche, der immer die gesam­te Zeichenfläche des „<svg>“-Elementes aus­füllt.

<svg width="100%" height="100%" viewBox="0 0 300 300">
  <circle cx="150" cy="150" r="150" />
</svg>

Ändert sich dann die Größe der Zeichenfläche, wird auch der gesam­te Inhalt ska­liert. So kannst du für jede SVG-Grafik stets ent­schei­den, wie sie sich ver­hal­ten soll.

Größen- und Positionsangaben per CSS ändern

Egal, ob du dich für oder gegen das Skalieren ent­schie­den hast: In jedem Fall soll­te geprüft wer­den, ob bei beson­ders klei­nen Darstellungen Optimierungsbedarf besteht.

SVG ohne „viewBox“-Eigenschaft: Der Kreis ska­liert mit der Zeichenfläche

Wird nicht ska­liert, kann es dir zum Beispiel pas­sie­ren, dass die Grafik nicht mehr in die Zeichenfläche passt und am rech­ten Rand ver­schwin­det. Bei Skalierungen hin­ge­gen soll­test du prü­fen, ob alle Formen und Texte noch gut erkenn­bar sind.
Bei Bedarf soll­ten Größe und Position der Formen ver­än­dert wer­den.

Hier hast du schon gleich das ers­te Problem: Denn Größe und Position von SVG-Grafiken wer­den nicht per CSS gesteu­ert, son­dern per Attribut der jewei­li­gen Elemente. Das bie­tet dir ledig­lich die Möglichkeit, per “transform”-Eigenschaft Einfluss zu neh­men, auf Größe und Position.

CSS-Transformationen für SVG-Formen

Zunächst ein­mal wer­den Größe und Position also über die SVG-Auszeichnung als Attribute ange­ge­ben. Damit blei­ben dir nur die CSS-Funktionen „trans­la­te()“ und „sca­le()“, um ein­zel­ne Formen eines SVGs zu ver­än­dern.

Der Nachteil die­ser Möglichkeit ist, dass nur rela­ti­ve Änderungen mög­lich sind. Aber auf die­se Weise hast du zumin­dest die Möglichkeit, Optimierungen vor­zu­neh­men. So kannst du zum Beispiel die Größenverhältnisse ein­zel­ner Formen anpas­sen. Gerade bei klei­nen Darstellungen hilft es schon mal, beson­ders klei­ne Formen etwas zu ver­grö­ßern.

Rahmen und Schrift anpassen

Gänzlich unpro­ble­ma­tisch ist es, die Rahmenstärke und Schriftgröße anzu­pas­sen. Diese Angaben wer­den auch beim SVG-Format per CSS defi­niert.

Wird eine SVG-Grafik auf Mobilgeräten her­un­ter­ska­liert, bie­tet es sich gege­be­nen­falls an, die Rahmenstärke und die Schriftgröße zu erhö­hen. So ver­hin­dert man, dass Rahmen kaum oder nur sehr dünn erschei­nen und Schrift schlecht les­bar ist.

circle {
  stroke-width: 3px;
}

text {
  font-size: 20px;
}

Auch Angaben zur Füll- und Konturfarbe wer­den per CSS aus­ge­zeich­net, so dass die­se Anpassungen ganz pro­blem­los gemacht wer­den kön­nen. Allerdings dürf­ten sol­che Anpassungen bei respon­si­ven Layouts eher sel­te­ner eine Rolle spie­len.

Relative Angaben bei Attributen machen

Da also Positionsangaben per CSS nicht ohne wei­te­res geän­dert wer­den kön­nen, bie­tet es sich gege­be­nen­falls an, Formen statt mit abso­lu­ten Werten bes­ser rela­tiv zu plat­zie­ren. Gerade wenn es dar­um geht, Elemente auf einer Zeichenfläche zu ver­tei­len, bie­tet sich dies an.

Vor allem, wenn sich bei einer SVG-Grafik ohne „viewBox“-Angabe die Breite oder Höhe ändert, las­sen sich per rela­ti­ver Angabe Elemente immer gleich­mä­ßig auf der Zeichenfläche ver­tei­len.

Rechteck per „x“- und „y“-Attribute auf je 50 Prozent plat­ziert

In Kombination mit der CSS-Funktion „trans­la­te()“ hast du zudem die Möglichkeit, Elemente immer mit­tig zu plat­zie­ren. So kannst du ein eine Form per „x“- und „y“-Attribute mit­tig plat­zie­ren, indem du jeweils den Wert „50%“ vor­gibst. Jetzt ist aber erst ein­mal nur die lin­ke obe­re Ecke mit­tig plat­ziert.

<svg width="100%" height="100%" viewBoxx="0 0 300 300">
  <rect x="50%" y="50%" width="150" height="150" style="transform: translate(-75px, -75px)" />
</svg>

Um die Form als sol­che mit­tig zu plat­zie­ren, ver­schiebst du die Form per “trans­la­te()” um je die Hälfte der Breite und Höhe nach links bezie­hungs­wei­se rechts. So erreichst du, dass eine Forme auch bei rela­ti­ver Angabe immer zen­triert dar­ge­stellt wird.

Relative Platzierung mit zusätz­li­chem „trans­la­te()“

Fazit

Auch wenn die Möglichkeiten, beim SVG-Format nicht so umfang­reich sind wie bei HTML, so las­sen sich SVG-Elemente durch­aus respon­siv gestal­ten. Hier und da muss man etwas trick­sen. Aber an sich ist doch rela­tiv viel mach­bar.

(Artikelbild: Depositphotos)

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.

Schreibe einen Kommentar

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