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.