Eigene Shopify-SVG-Icons: Ein sauberes Markenzeichen

Ein eigenes SVG-Icon lässt sich auf zwei praktische Arten in ein Shopify-Theme einfügen: Lade die Datei als Theme-Asset hoch und zeige sie mit einem Bild-Tag an, oder lege ihr Markup in einem Liquid-Snippet ab und rendere dieses dort, wo das Icon hingehört. Der erste Weg ist für ein Zeichen mit festen Farben einfacher. Der zweite gibt dir direkte Kontrolle über Pfade und Farbe. Welche Steuerelemente im Theme-Editor erscheinen, hängt von deinem Theme ab. Prüfe deshalb dessen vorhandene Icon-Blöcke, bevor du Code änderst.

Wenn deine einzige Quelle ein PNG ist, erstelle zuerst ein pfadbasiertes SVG. Die Datei nur umzubenennen verwandelt Pixel nicht in Formen. Ein sauberes originales SVG ist vorzuziehen, wenn du eines hast; ein detailreiches Foto bleibt meist besser ein Bild. Die folgenden Schritte führen ein kleines Markenpiktogramm von der Dateivorbereitung bis zur Theme-Vorschau, ohne ein bestimmtes Händlerkonto oder eine Theme-Version vorauszusetzen.

Entscheiden, wo das Icon hingehört

Shopify-Themes haben ein Verzeichnis assets für Dateien und ein Verzeichnis snippets für wiederverwendbares Liquid-Markup. Shopify dokumentiert beide in seiner Theme-Architektur und empfiehlt in seinem Leitfaden zum Theme-Code, vor Codeänderungen die Optionen des Theme-Editors zu prüfen. Ein Theme mit einem eigenen SVG-Feld benötigt möglicherweise keinen der folgenden Codewege. Ein Feld in einem Theme bedeutet nicht, dass jedes Theme es hat.

Zwei Wege zur Einbindung

Der Unterschied ist wichtig, weil CSS auf der Seite nicht in ein über ein gewöhnliches <img> geladenes SVG hineinwirken kann. Inline-Pfade können currentColor verwenden, das seinen Wert aus der CSS-Eigenschaft color bezieht. Siehe MDNs Leitfaden zum SVG-Bildkontext und die Erklärung zu currentColor. Allgemeinere Browserbeispiele findest du unter Inline-SVG gegenüber einem Bild-Tag.

Das SVG vorbereiten, bevor du das Theme bearbeitest

Beginne mit der kleinsten sinnvollen Version des Markenzeichens. Erhalte bei einem Icon seine Silhouette und alle beabsichtigten Aussparungen in der Größe, die Kunden tatsächlich sehen. Feine Schrift oder Textur, die auf einer Zeichenfläche gut aussieht, kann bei 20 bis 32 Pixeln zusammenfallen. Behalte die Markenquelldatei als Vorlage und erstelle einen separaten Icon-Export.

1. Die saubere Quelle wiederherstellen. Exportiere SVG aus dem ursprünglichen Vektordesign, falls es existiert. Wenn nur ein flaches PNG vorhanden ist, kann PerfectVector bei diesem einen Schritt helfen: Erstelle einen SVG-Kandidaten mit dem Clipart-zu-SVG-Ablauf und öffne die heruntergeladene Datei anschließend in einem Vektoreditor. Vergleiche Silhouette und einzelne Formen mit dem PNG. Eine Nachzeichnung ist ein Ausgangspunkt, kein Versprechen identischer Geometrie.
2. Die Struktur prüfen. Bestätige, dass das sichtbare Zeichen aus Pfaden oder einfachen Vektorformen besteht, nicht aus einem einzigen eingebetteten Rasterrechteck mit <image>. Entferne versehentliche Hintergrundfelder, verstreute Fragmente, doppelte Konturen und winzige Farbbereiche. Der Leitfaden zur Vorbereitung von PNG-Icons behandelt einheitliche Raster und optische Größen innerhalb eines Sets.
3. Zeichenfläche und Farben festlegen. Lege für den Export mit viewBox einen sinnvollen Randabstand fest. Behalte feste Markenfarben bei, wenn das Zeichen zweifarbig bleiben muss. Soll ein einfarbiges Icon die Theme-Farbe übernehmen, verwende für die vorgesehenen Pfade currentColor. SVG-Farben ändern erklärt, warum eine fest codierte Füllung einer späteren Farbänderung widerstehen kann.
4. Die Datei als Code prüfen. Behalte nur die Elemente und Attribute, die das Icon benötigt. Entferne unerwartete Skripte, externe Referenzen, Editor-Ballast und nicht vertrauenswürdiges Markup, bevor du es inline in ein Theme einfügst. Öffne das bereinigte SVG in Icon-Größe und in einer größeren Prüfgröße; beide Prüfungen decken unterschiedliche Fehler auf.

Für einen kleinen einfarbigen Stern kann die Quelle so schlicht aussehen. Der folgende Pfad ist ein eigenes Beispiel, kein von Shopify bereitgestelltes Icon und kein PerfectVector-Konvertierungsergebnis. Er besitzt ein ausdrückliches Koordinatensystem und kein eingebettetes Bild:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z" fill="currentColor"/>
</svg>

Ein zweifarbiges Markenzeichen benötigt separate Pfade oder Formen mit bewusst gewählten Füllungen. Jede Farbe durch currentColor zu ersetzen würde diesen Unterschied beseitigen. Gehört das Zeichen zu einer größeren Icon-Familie, wende dieselben Größen- und Farbregeln zuerst auf einige repräsentative Icons an, bevor du den Rest exportierst.

Weg A: Ein Theme-Asset anzeigen

Shopifys Filter asset_url liefert die CDN-URL einer Datei im Verzeichnis assets des Themes. Füge dort dein geprüftes SVG hinzu und referenziere dann seinen exakten Dateinamen in der passenden Liquid-Vorlage, Section oder im Snippet. Das einfache Beispiel unten setzt voraus, dass brand-mark.svg ein dekoratives Zeichen mit festen Farben neben sichtbarem Text ist:

<img
  src="{{ 'brand-mark.svg' | asset_url }}"
  alt=""
  width="24"
  height="24"
>

Verwende beschreibenden alt-Text, wenn das Bild Informationen vermittelt, die benachbarter Text nicht enthält. Für ein rein dekoratives Bild ist alt="" passend. Shopifys Hinweise zur Barrierefreiheit von Themes verlangen ein alt-Attribut für jedes Bild und einen leeren Wert bei dekorativen Icons. Die ausdrückliche Breite und Höhe reservieren außerdem während des Ladens Platz, wie Shopifys Hinweise zur Asset-Auslieferung erklären.

Bei diesem Weg bleibt das SVG aus Sicht der Seite ein einziges Bild. Wenn sich die Theme-Farbe ändert, passe die SVG-Füllungen an oder wähle eine Inline-Einbindung, statt anzunehmen, dass eine CSS-Regel eines übergeordneten Elements die Datei umfärbt. Füge keine Datei-URL aus einem Shop in ein anderes Theme ein; lass asset_url das Theme-Asset auflösen.

Weg B: Ein Inline-Icon-Snippet rendern

Lege für ein wiederholt verwendetes einfarbiges Icon geprüftes SVG-Markup in einem Snippet wie snippets/brand-mark-icon.liquid ab. Shopifys Snippet-Dokumentation verwendet {% render %}, um wiederverwendbares Markup einzufügen. Ein minimales Snippet kann eine Farbe aus dem umgebenden Textstil übernehmen:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  width="24" height="24" aria-hidden="true" focusable="false">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z"
    fill="currentColor"/>
</svg>

Rendere es anschließend in der passenden Theme-Datei:

<span class="brand-mark-icon">{% render 'brand-mark-icon' %}</span>

Hier ist aria-hidden="true" für ein Icon vorgesehen, das lediglich benachbarten sichtbaren Text dekoriert. Wenn das Icon allein einen Button oder Link beschriftet, gib dem Bedienelement einen zugänglichen Namen, statt dich auf ein dekoratives SVG zu verlassen. Teste es mit Tastatur und Screenreader. Halte seine CSS-Farbe und Abmessungen im normalen Stilsystem des Themes, statt einzelne Inline-Werte zu verstreuen.

Ein Snippet ist wiederverwendbar, bleibt aber Theme-Code. Shopify empfiehlt, ein Theme vor Codeänderungen zu duplizieren. Nimm die Änderung in der Kopie vor, sieh dir genau die Seite oder Section in der Vorschau an und sichere das ursprüngliche Snippet, damit du es nach einem Theme-Update vergleichen kannst. Theme-spezifische Icon-Bibliotheken können eigene Argumente und Strukturen haben; prüfe diese Dateien, bevor du ein eingebautes Icon ersetzt. Die aktuelle Shopify-Community-Diskussion über eine Icon-Bibliothek zeigt, warum das Rendern einer ganzen Bibliothek nicht zwangsläufig dasselbe ist wie das Auswählen eines einzelnen Icons daraus.

Die Übergabe in der endgültigen Größe prüfen

Eine Datei kann technisch gültig sein und im Shop trotzdem falsch aussehen. Prüfe die Seite sowohl auf hellen als auch auf dunklen Hintergründen, wenn das Theme sie verwendet. Prüfe das Zeichen in seiner tatsächlichen CSS-Größe, in einem schmalen Darstellungsbereich und neben benachbarten Icons. Stelle sicher, dass Aussparungen offen bleiben, Farben genügend Kontrast bieten und das Icon nicht durch seine viewBox oder seinen Container abgeschnitten wird.

Wenn das Asset beim Vergrößern als unscharfes Rechteck erscheint, untersuche es auf eingebettete Rasterbilder. Ignoriert ein Inline-Icon die Theme-Farbe, suche nach fest codierten Füllungen, Inline-Stilen oder einem spezifischeren Selektor. Erscheint nichts, prüfe zuerst den Asset-Dateinamen oder Snippet-Namen und anschließend das Section-Markup des Themes. Ändere nicht mehrere Dinge gleichzeitig. Der Leitfaden zu CSS-Masken-Icons erklärt einen weiteren Weg, wenn du eine Silhouette umfärben möchtest, ohne ihre Pfade inline einzufügen.

Für dein eigenes flaches Piktogramm, das nur als Rasterbild vorliegt, erstelle einen SVG-Kandidaten mit PerfectVector und prüfe dann seine Pfade, Aussparungen und Farben in der vorgesehenen Icon-Größe, bevor du den Theme-Weg wählst. Wenn du bereits ein gutes SVG hast, überspringe das Nachzeichnen und investiere die Zeit in die Shop-Vorschau.

FAQ

Kann ich über den Customize-Bildschirm jedes Shopify-Themes ein SVG-Icon hochladen? Nein. Manche Themes bieten ein Icon-Feld oder ein Feld für eigenes SVG; andere erfordern ein Asset oder eine Codeänderung. Prüfe die Sections und die Dokumentation des konkreten Themes, bevor du ein Feld voraussetzt.

Warum folgt mein hochgeladenes SVG nicht der Theme-Farbe? Ein über einen Bild-Tag verwendetes SVG ist eine Bildressource, weshalb Seiten-CSS seine internen Pfade nicht gestaltet. Bearbeite bei einem Asset mit festen Farben die SVG-Füllungen oder verwende geprüftes Inline-Markup mit currentColor, wenn die Farbe vom Theme gesteuert werden soll.

Sollte ich ein PNG-Markenicon vor dem Einfügen in SVG konvertieren? Konvertiere ein flaches Piktogramm, wenn es skalierbare, bearbeitbare Pfade braucht. Prüfe die Nachzeichnung in der vorgesehenen Icon-Größe und entferne verstreute Formen. Behalte ein Foto oder texturiertes Bild als Rasterbild, wenn das Nachzeichnen die prägenden Details beseitigen würde.

Quellen

1. Shopify Developers — Theme-Architektur — Theme-Assets, Snippets und der richtige Ort für Markup.
2. Shopify Developers — asset_url — Verhalten von Theme-Asset-URLs im Liquid-Beispiel.
3. Shopify Developers — Snippets — Wiederverwendbares Liquid-Markup und der render-Tag.
4. Shopify Help Center — Theme-Code bearbeiten — Vorrang des Editors, Duplizieren von Themes und Vorsicht bei Codeänderungen.
5. Shopify Developers — Bewährte Verfahren zur Barrierefreiheit — Alternativtext und Umgang mit dekorativen Icons.
6. Shopify Developers — Assets über das Shopify-CDN ausliefern — Asset-Filter und ausdrückliche Bildabmessungen.
7. MDN — SVG als Bild — Einschränkungen des Bildkontexts im Browser.
8. MDN — SVG-color-Attribut — Wie currentColor SVG-Füllungen und Konturen beeinflusst.