svg-Dateien und background-size: 100% 100%

In der Regel kann man svg-Dateien verwenden wie normale Bilddateien, also wie png oder jpg. Nutzt man aber:

background-size: 100% 100%;

in der CSS-Datei um einer svg die gewünschten Eigenschaften eines strech bzw. gestrechten Optik zu geben klappt dies meist nicht. In IE/Edge funktioniert es meist noch, aber im Firefox und Chrome ist das Ergebnis, dass die svg-Datei immer proportional abgebildet wird. Ein strechen der svg ist nicht möglich. Die modernen Browser interpretieren scheinbar die Informationen der svg-Dateien nun noch intensiver und rücken davon ab, es wie eine "normale Bildatei" zu behandeln. Und wenn es in der svg-Datei nicht explizit erlaubt ist diese zu strecken, ignoriert der Browser die CSS Angaben und richtet sich nach der svg-Datei.

Die Lösung:

Öffnet einmal die svg-Datei mit einem Texteditor (z.B. Notepad++). Um den Strech, also das strecken der Datei zu erlauben muss in der Datei preserveAspectRatio="none" ergänzt werden. Dies sieht dann Beispielweise so aus:

<svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="200px" viewBox="0 0 400 200" enable-background="new 0 0 400 200" preserveAspectRatio="none" xml:space="preserve">

Wichtig: Wenn das Problem schon aufgetreten ist, müsst Ihr nach der Änderung der svg den Browsercache vernüftig leeren, damit die neuen svg-Datei korrekt geladen wird.

Zurück

Kein Erfolg mit den hier beschriebenen Contao-Lösungen? Klappt es nicht mit dem gewünschten Contao-Update oder dem Umzug auf einen neuen Hostingserver?

Wenn die Frustration zu groß wird, einfach bei mir melden:
info@liquid-artwork.de - Ansprechpartner: Lars Scheumann

Manchmal ist es besser solche umfangreichen Aufgaben dem Profi zu überlassen, der schneller und sorgfältiger damit umgehen kann. Kostet seinen Preis, aber lohnt sich schnell, bevor man sich tagelang damit herum ärgert. LIQUID-ARTWORK betreut auch Kunden die ihre Webseite selbst erstellt haben, oder durch Dritte. Kurze Anfrage bei mir und nach einer ersten Prüfung kann ich meist einen Preis nennen. Die Anfrage alleine kostet dabei nichts!

Viele weitere, ähnliche und hoffentlich hilfreiche Beiträge findet Ihr im kompletten Contao-Helpdesk das ständig erweitert wird.

Zum Contao-Helpdesk...