Probleme mit SVG-Export für Shopify: Lösungen und Workarounds

Shopify akzeptiert SVG-Dateien nicht immer reibungslos, insbesondere wenn width und height fehlen oder das Seitenverhältnis nicht korrekt ist. Viele Nutzer berichten von Problemen mit dem Illustrator-Export, vor allem in Verbindung mit Firefox. In diesem Artikel zeigen wir dir, wie du das Problem beheben kannst und warum ein einfacher Browserwechsel oft schon die Lösung ist.

Das Problem: Fehlende width und height Attribute in Illustrator-SVGs

Wenn du ein SVG in Adobe Illustrator erstellst und es für Shopify exportierst, fehlt oft folgendes Format:

<svg viewBox=“0 0 500 200″ width=“500px“ height=“200px“ xmlns=“http://www.w3.org/2000/svg“>

Stattdessen enthält das SVG oft nur das viewBox-Attribut, während width und height fehlen. Shopify verlangt jedoch explizite Werte, weshalb die Datei unter Umständen nicht korrekt dargestellt oder abgelehnt wird.

Lösung 2: Manuelle Anpassung der SVG-Datei

Falls der Browserwechsel nicht hilft, kannst du das SVG manuell bearbeiten:

1. SVG-Datei in einem Texteditor öffnen (z. B. Notepad++, VS Code oder Sublime Text).
2. Finde die <svg>-Zeile und füge width und height hinzu:
   <svg viewBox=“0 0 500 200″ width=“500px“ height=“200px“ xmlns=“http://www.w3.org/2000/svg“>
3. Datei speichern und erneut in Shopify hochladen.

Das sorgt dafür, dass Shopify die Datei korrekt interpretiert.

Lösung 3: Illustrator-Export richtig konfigurieren

Falls du Illustrator verwendest, kannst du beim Export folgende Schritte beachten:

1. Datei > Exportieren > Exportieren als…
2. SVG als Format wählen und Zeichenfläche verwenden aktivieren
3. SVG-Optionen einstellen:
   CSS-Eigenschaften: Präsentationsattribute (sorgt dafür, dass width und height in der Datei stehen)
   Zeichenflächen exportieren: Aktivieren
   ViewBox verwenden: Aktivieren
4. Speichere die Datei und teste sie in Shopify.

Sollte das nicht ausreichen, bearbeite die Datei wie in Lösung 2 beschrieben manuell.

In Kürze

Falls dein SVG nicht in Shopify funktioniert, gibt es mehrere Lösungen:

• Teste zuerst einen anderen Browser (vorzugsweise Chrome statt Firefox).

• Falls das Problem bleibt, bearbeite die Datei manuell und füge width und height hinzu.

• Konfiguriere Illustrator richtig, um beim Export saubere SVGs zu erhalten.

Mit diesen Tricks kannst du Shopify-kompatible SVGs erstellen und problemlos hochladen. Hast du noch Fragen oder weitere Tipps? Lass es uns wissen!

Falls Sie sich entscheiden, Ihre Homepage von mir erstellen zu lassen oder mein Kunde werden, gebe ich Ihnen auch zu weiteren relevanten Themen informative Tipps und Tricks!