SVG-Dateien aus Illustrator lassen sich in Shopify oft nicht hochladen? Die Ursache liegt fast immer an fehlenden width/height-Attributen — hier die drei zuverlässigsten Lösungen.
Ein SVG-Logo aus Adobe Illustrator exportiert, in Shopify hochgeladen — und plötzlich eine Fehlermeldung, obwohl die Datei technisch einwandfrei aussieht? Dieses Problem begegnet uns in Kundenprojekten immer wieder, und die Ursache ist in den allermeisten Fällen dieselbe.
Viele aus Illustrator exportierte SVG-Dateien enthalten kein explizites width- und height-Attribut im <svg>-Tag — nur eine viewBox. Chrome korrigiert das beim Anzeigen automatisch im Hintergrund, weshalb der Fehler dort oft gar nicht auffällt. Firefox und einige serverseitige Validierungen, darunter Shopifys Upload-Prüfung, sind hier deutlich strenger und lehnen die Datei ab.
Der schnellste Test: die Datei in Chrome statt Firefox hochladen. Das behebt das Problem zwar nicht dauerhaft, bestätigt aber zuverlässig, ob genau dieser Fehler die Ursache ist.
Öffnen Sie die SVG-Datei in einem Texteditor und ergänzen Sie im öffnenden <svg>-Tag explizit width und height passend zur vorhandenen viewBox. Diese kleine manuelle Korrektur reicht in den meisten Fällen bereits aus.
Am saubersten ist es, die Ursache direkt beim Export zu beheben: Achten Sie beim SVG-Export in Illustrator auf die korrekten Angaben zu Zeichenfläche (Canvas) und aktivieren Sie „Darstellungsattribute" (Presentation Attributes) in den erweiterten Export-Optionen. So werden width/height von Anfang an korrekt gesetzt.
Testen Sie neu exportierte SVG-Dateien routinemäßig in mehreren Browsern (Chrome, Edge, Firefox), bevor Sie sie in Shopify oder anderen Systemen hochladen — das erspart im Kundenprojekt unnötige Rückfragen und Verzögerungen.
Webdesigner & SEO-Experte aus Augsburg — 15+ Jahre Erfahrung
