Eine SVG, viele Displaygrößen: Fluide Einbettung von Grafiken
Kommentare

Die meisten Nutzer kennen das Problem mit der Darstellung von Websites auf unterschiedlichen Geräten mit verschiedenen Displaygrößen. Insbesondere Bilder sorgen dabei immer wieder für Probleme. Häufig

Die meisten Nutzer kennen das Problem mit der Darstellung von Websites auf unterschiedlichen Geräten mit verschiedenen Displaygrößen. Insbesondere Bilder sorgen dabei immer wieder für Probleme. Häufig werden Bilder nur auf Desktops korrekt dargestellt, während sie auf größerem Displays verwaschen erscheinen. Auch die verschiedenen Browser haben unterschiedliche Anforderungen, damit ein Bild als responsive image dargestellt wird. Responsive images sind schon seit langem ein Problem; allerdings sind Lösungsansätze wie srcset noch in der Anfangsphase. Dementsprechend werden Grafiken nur in manchen Browsern richtig angezeigt, erscheinen in anderen aber ebenso in anderen Dimensionen. Eine Lösung, um die Bilddarstellung in verschiedenen Browsern und auf verschieden großen Displays zu verbessern, ist die Nutzung von SVG.

SVG als responsive image nutzen

Um die korrekte Darstellung von Bildern auf Websites für verschiedene Displaygrößen und verschiedene Browser zu vereinfachen, sind SVGs eine gute Lösung. Sara Soueidan beschreibt dazu in einem interessanten Artikel Making SVGs Responsive with CSS verschiedene Möglichkeiten, die SVGs fluide machen können.

Um eine SVG in eine Website einzubetten, gibt es verschiedene Möglichkeiten. Auch als CSS-Hintergrundbild kann eine SVG eingebunden werden. Um die SVG fluide machen zu können, sollte in jedem Fall zunächst die Höhen- und Breitenspezifikationen des Bildes entfernt werden.

Möglichkeiten, um SVGs fluide in Websites einzubetten

Möglichkeit eins, eine SVG einzubetten, ist mit . Normalerweise muss die Höhe und Breite dabei nicht spezifiziert werden, denn zumindest Chrome und Firefox gehen von einer Breite von 100% aus, wenn das in ein

platziert wird. Für den Internet Explorer muss die Breite des -Tags auf 100% gesetzt werden, um eine SVG fluide darzustellen. Die gleichen Anforderungen gelten auch, wenn die SVG als eingebunden wird.

Bei der Nutzung von iframe entsteht das Problem, dass die Browser automatisch von einer festen Höhe und Breite der SVG ausgehen, nämlich 300x150px. Zwar kann die Höhe und Breite in iframe angepasst werden, allerdings führt dies zu weißen Rändern um das Bild herum.

Einen Weg, darum herumzuarbeiten, bieten mehrere Hacks, zum Beispiel der Padding Hack. Dazu wird zunächst die Position für die SVG definiert, bevor sie absolut innerhalb des Containers gesetzt und auf seine Höhe und Breite skaliert wird.

Eine weitere Möglichkeit, SVGs auf unterschiedlichen Displaygrößen darzustellen, ist über den Einsatz von CSS. In ihrem Artikel geht Sara Soueidan detaillierter auf diese Methode ein. 

Egal, mit welcher Methode die SVGs in die Website eingebettet werden, sie sorgen in jedem Fall dafür, dass Grafiken sich den Bildschirmgegebenheiten anpassen. Neben Bildern ist natürlich auch die Darstellung von Icons interessant. Einen Blogpost dazu hat Sven Wolfermann verfasst. Wer noch mehr zum Thema SVG erfahren möchte, findet einen spannenden Vortrag dazu in unseren Web-Bits.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -