So lassen sich SVGs skalieren

SVGs im Responsive Design
Kommentare

Die Implementierung von Bildern in Websites stellt nach wie vor viele Webdesigner vor Probleme – insbesondere, wenn die Seite responsiv gestaltet werden soll. Nicht nur muss man sich Gedanken darüber machen, welches Bildformat für die Website notwendig ist, auch die Frage, auf welche Art und Weise die Bilder skaliert werden, ist wichtig. 

Gerade SVGs, die zwar theoretisch in jeder Größe ansprechend aussehen, können auf zahlreiche unterschiedliche Methoden skaliert werden. Amelia Bellamy-Royds hat einige unterschiedliche Möglichkeiten zum Skalieren von SVGs vorgestellt.

SVGs skalieren: Die Attribute-Toolbox

Gerade für Webdesigner, die sich erst mit der Nutzung von SVGs vertraut machen, wirken die vielen unterschiedlichen Möglichkeiten, mit denen sie skaliert werden können oft ein wenig einschüchternd. Ein Problem dabei ist vor allem, dass SVGs sich beim Skalieren nicht wie andere Bildformate verhalten, weil SVGs keine eindeutig definierte Höhe oder Breite für die Darstellung benötigen. Damit die SVG-Bilder überhaupt skaliert werden, müssen daher die Höhe, Breite und das Seitenverhältnis ausdrücklich bestimmt werden.

Genauso müssen sich Webdesigner mit den verschiedenen Skalierungs-Tools für SVG-Bilder vertraut machen. Dazu gehören vor allem die height– und width-Attribute, aber auch das viewbox-Attribut, mit dem das Seitenverhältnis definiert werden kann, und das preserveAspectRatio-Attribut. Je nachdem, welche Anforderungen an die Bilder einer Website gestellt werden, kommen die verschiedenen Attribute beim Skalieren von SVGs zum Einsatz.

SVGs automatisch auf die verfügbare Breite skalieren

Die vermutlich häufigste Anforderung an SVG-Icons ist, dass sie für eine bestimmte Größe skaliert werden sollen ohne dabei verzerrt zu wirken. Sie ist gleichzeitig auch am einfachsten mit dem viewbox-Attribut zu lösen, mit dem die genaue Position des Icons definiert werden kann.

Ein wenig komplizierter wird es, wenn das SVG automatisch die verfügbare Breite einnehmen und die Höhe entsprechend angepasst werden soll. Dafür gibt es mehrere Optionen. So kann das Bild in fast allen Browsern – außer Internet Explorer – automatisch mit skaliert werden, wenn es mit einem viewbox-Attribut versehen ist.

Eine andere Möglichkeit ist es, das SVG als CSS-Hintergrundbild zu nutzen und mit dem padding-bottom-Hack zu skalieren. Damit sollen gleichmäßig große Ränder und Paddings erstellt werden, auch wenn die Höhe automatisch angepasst wird. So kann allerdings auch das Seitenverhältnis kontrolliert werden, indem mit einem

-Element mit 100% das Seitenverhältnis von 4:3 des Hintergrundbilds im Code angegeben wird.

Ist man nicht auf den Support von Browsern wie Internet Explorer angewiesen, können auch inline SVGs genutzt werden. Wird die viewbox auf auto gesetzt, werden die Bilder in Firefox und den aktuellsten auf Blink laufenden Browsern angepasst, sodass das gesamte Seitenverhältnis der viewBox entspricht.

Da allerdings viele Browser-Versionen kein automatisches Anpassen von inline SVGs unterstützen, bietet es sich stattdessen eher an, mit dem padding-bottom-Hack in einem Container das Seitenverhältnis zu kontrollieren. Dabei muss das SVG als position: absolute und einer Höhe und Breite von 100% gesetzt werden. Dabei wird das gesamte

Element kontrolliert. Eine weitere Möglichkeit ist das Seitenverhältnis desBereichs zu kontrollieren.

Flexibilität von SVG-Bildern

In vielen Fällen ist es ratsam, das Seitenverhältnis beizubehalten. Es gibt allerdings auch Szenarien, in denen das Bild gestreckt werden soll, um den Viewport zu füllen. Das kann zum Beispiel über die Angabe von Prozentwerten für alle Größen-und Positions-Attribute im SVG geschehen. Genauso kann auch viewBox und preserveAspectRatio=‘‘none‘‘ genutzt werden.

Durch diese beiden Attribute wird die Nutzung von SVGs deutlich flexibler. So ist es auch möglich, einzelne Teile eines SVG-Bildes zu skalieren – zum Beispiel um Header-Grafiken zu erstellen, die die gesamte Breite eines Widescreen-Displays einnehmen ohne dabei auch mehr Höhe zu beanspruchen.

Dies ist natürlich nur ein kurzer Einblick in die vielfältigen Möglichkeiten, SVGs zu skalieren. Amelia Bellamy-Royds erklärt die einzelnen Möglichkeiten deutlich ausführlicher und mit verschiedenen Code-Beispielen und bietet so einen guten Überblick über die verschiedenen Optionen, die Webdesigner zum Skalieren von SVGs in ihrem nächsten Projekt nutzen können.

Aufmacherbild: setsquare isolated on white background von Shutterstock / Urheberrecht: Nomad_Soul

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -