Responsives SVG: Was geht, was geht nicht?

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Im Webdesign sind responsive Layouts nicht mehr wegzudenken. Da gibt es auf der einen Seite immer mehr kleine Displays auf Smartphones und auf der anderen Seite immer größer werdende Monitore. Dazwischen finden sich Phablets, Tablets sowie Net- und Notebooks. Dank CSS ist es technisch kein Problem, eine Website für all die verschiedenen Auflösungen zu optimieren. Doch wie sieht es mit SVGs aus? Lassen sich diese auch responsiv gestalten?

Skalieren oder nicht skalieren?

Die einfachste Möglichkeit, eine SVG-Grafik auf verschiedenen Displays und Browserfenstern darzustellen, ist natürlich das Skalieren. Dabei wird die Grafik immer so vergrößert oder verkleinert, dass sie passt – mehr oder weniger jedenfalls.

Denn auch wenn einfaches Skalieren den wenigsten Aufwand mit sich bringt, hat es natürlich seine Nachteile. Gerade bei komplexen Grafiken gehen bei starken Verkleinerungen Details schon mal verloren oder sind kaum noch erkennbar. Texte können auf einmal so klein dargestellt sein, dass sie nicht mehr lesbar sind.

Während bei Fotos das einfache Skalieren meistens völlig in Ordnung ist, kommt es für vektorbasierte SVG-Formate mitunter nicht immer in Frage – jedenfalls nicht ausschließlich. Hier solltest du bei kleinen Darstellungen etwas optimieren, indem du zu kleine Elemente vergrößerst oder verzichtbare Details ausblendest.

<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“ eingebunden wird, sondern direkt im HTML-Quelltext ausgezeichnet ist. Nur so hast du die Möglichkeit, über das Stylesheet des HTML-Dokumentes auch Eigenschaften deiner SVG-Elemente zu verändern.

Mit „viewBox“ skalieren

Im Normalfall werden die Elemente einer SVG-Zeichenfläche nicht skaliert, wenn du die Größe des „<svg>“-Elementes änderst. Sie behalten Position und Größe bei. Lediglich die Zeichenfläche wird nach rechts und unten vergrößert beziehungsweise verkleinert.

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

Um eine Skalierung herbeizuführen, musst du die „viewBox“-Eigenschaft verwenden. Mit diesem Attribut definierst du einen Ausschnitt der SVG-Zeichenfläche, der immer die gesamte Zeichenfläche des „<svg>“-Elementes ausfü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 gesamte Inhalt skaliert. So kannst du für jede SVG-Grafik stets entscheiden, wie sie sich verhalten soll.

E-Book Effektives Online Marketing von Andreas Hecht

E-Book: Effektives Online Marketing

Entdecke die Power des perfekten Online-Marketings für deine Website. Du erfährst neue Techniken, die deine Website automatisch besser ranken lassen und die dir nach und nach einen Expertenstatus verleihen werden. [...]

Größen- und Positionsangaben per CSS ändern

Egal, ob du dich für oder gegen das Skalieren entschieden hast: In jedem Fall sollte geprüft werden, ob bei besonders kleinen Darstellungen Optimierungsbedarf besteht.

SVG ohne „viewBox“-Eigenschaft: Der Kreis skaliert mit der Zeichenfläche

Wird nicht skaliert, kann es dir zum Beispiel passieren, dass die Grafik nicht mehr in die Zeichenfläche passt und am rechten Rand verschwindet. Bei Skalierungen hingegen solltest du prüfen, ob alle Formen und Texte noch gut erkennbar sind.
Bei Bedarf sollten Größe und Position der Formen verändert werden.

Hier hast du schon gleich das erste Problem: Denn Größe und Position von SVG-Grafiken werden nicht per CSS gesteuert, sondern per Attribut der jeweiligen Elemente. Das bietet dir lediglich die Möglichkeit, per “transform”-Eigenschaft Einfluss zu nehmen, auf Größe und Position.

CSS-Transformationen für SVG-Formen

Zunächst einmal werden Größe und Position also über die SVG-Auszeichnung als Attribute angegeben. Damit bleiben dir nur die CSS-Funktionen „translate()“ und „scale()“, um einzelne Formen eines SVGs zu verändern.

Der Nachteil dieser Möglichkeit ist, dass nur relative Änderungen möglich sind. Aber auf diese Weise hast du zumindest die Möglichkeit, Optimierungen vorzunehmen. So kannst du zum Beispiel die Größenverhältnisse einzelner Formen anpassen. Gerade bei kleinen Darstellungen hilft es schon mal, besonders kleine Formen etwas zu vergrößern.

Rahmen und Schrift anpassen

Gänzlich unproblematisch ist es, die Rahmenstärke und Schriftgröße anzupassen. Diese Angaben werden auch beim SVG-Format per CSS definiert.

Wird eine SVG-Grafik auf Mobilgeräten herunterskaliert, bietet es sich gegebenenfalls an, die Rahmenstärke und die Schriftgröße zu erhöhen. So verhindert man, dass Rahmen kaum oder nur sehr dünn erscheinen und Schrift schlecht lesbar ist.

circle {
  stroke-width: 3px;
}

text {
  font-size: 20px;
}

Auch Angaben zur Füll- und Konturfarbe werden per CSS ausgezeichnet, so dass diese Anpassungen ganz problemlos gemacht werden können. Allerdings dürften solche Anpassungen bei responsiven Layouts eher seltener eine Rolle spielen.

Relative Angaben bei Attributen machen

Da also Positionsangaben per CSS nicht ohne weiteres geändert werden können, bietet es sich gegebenenfalls an, Formen statt mit absoluten Werten besser relativ zu platzieren. Gerade wenn es darum geht, Elemente auf einer Zeichenfläche zu verteilen, bietet sich dies an.

Vor allem, wenn sich bei einer SVG-Grafik ohne „viewBox“-Angabe die Breite oder Höhe ändert, lassen sich per relativer Angabe Elemente immer gleichmäßig auf der Zeichenfläche verteilen.

Rechteck per „x“- und „y“-Attribute auf je 50 Prozent platziert

In Kombination mit der CSS-Funktion „translate()“ hast du zudem die Möglichkeit, Elemente immer mittig zu platzieren. So kannst du ein eine Form per „x“- und „y“-Attribute mittig platzieren, indem du jeweils den Wert „50%“ vorgibst. Jetzt ist aber erst einmal nur die linke obere Ecke mittig platziert.

<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 solche mittig zu platzieren, verschiebst du die Form per “translate()” um je die Hälfte der Breite und Höhe nach links beziehungsweise rechts. So erreichst du, dass eine Forme auch bei relativer Angabe immer zentriert dargestellt wird.

Relative Platzierung mit zusätzlichem „translate()“

Fazit

Auch wenn die Möglichkeiten, beim SVG-Format nicht so umfangreich sind wie bei HTML, so lassen sich SVG-Elemente durchaus responsiv gestalten. Hier und da muss man etwas tricksen. Aber an sich ist doch relativ viel machbar.

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.

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
wpDiscuz