Firefox SVG – Das Problem mit der Größe

Da ich zuletzt (mal wieder) auf ein Problem mit der Größe eines SVGs gestoßen bin, welches ich nur durch einen Glückstreffer bei Google lösen konnte, möchte ich dir hier kurz Problem und Lösung schildern.

Vielleicht hast du genau das gleiche Problem und tappst im Dunkeln.

Das Problem mit der Größe

Bei einer kleinen Javascript Anwendung, die ich entwickelt habe, wurden einige SVGs im Firefox falsch (viel zu groß) dargestellt. In anderen Browsern gab es keine Probleme.

Der gemeinsame Nenner war nicht auf den ersten Blick ersichtlich. In einem englischen Artikel bin ich dann auf die Lösung gestoßen: Adobe Illustrator exportiert SVGs responsive (eigentlich löblich!) und gibt den SVGs daher keine Abmessungen mit.

In bestimmten Fällen braucht man aber genau diese Abmessungen – auch wenn das SVG später anders skaliert wird. Und speziell der gute Firefox brauchte in meinem Fall die initiale Angabe der Abmessungen.

Illustrator SVG Export mit Abmessungen

Die Lösung besteht darin, den (eigentlich intelligenten) responsive SVG-Export in Illustrator zu deaktivieren.

Das kannst du tun, wenn du auf „Speichern unter“ gehst, SVG wählst und in den erweiterten Optionen das entsprechende Häkchen wegnimmst.

SVG Export einfach

Auch wenn du mehrere Zeichenflächen als SVG exportierst, gibt es diese Funktion. Dazu klickst du auf das kleine Zahnrad bei „Formate“ und klickst anschließend auf SVG.

SVG Export multi

Ich hoffe der kleine Quick-Tipp konnte dir helfen und du kannst dich wieder deinem Projekt widmen.

Schreibe einen Kommentar