Icônes SVG Shopify : préparer un symbole de marque propre

Une icône SVG personnalisée peut rejoindre un thème Shopify de deux façons pratiques : téléverse le fichier comme ressource du thème et affiche-le avec une balise image, ou place son balisage dans un snippet Liquid et affiche ce snippet à l’endroit prévu. La première méthode est plus simple pour un symbole aux couleurs fixes. La seconde te donne un contrôle direct sur ses tracés et sa couleur. Les commandes disponibles dans l’éditeur de thème dépendent de ton thème ; examine donc ses blocs d’icônes existants avant de changer le code.

Si ta seule source est un PNG, crée d’abord un SVG composé de tracés. Renommer le fichier ne transforme pas les pixels en formes. Un SVG original propre est préférable si tu en as un ; une photo détaillée gagne généralement à rester une image. Les étapes ci-dessous accompagnent un petit pictogramme de marque de la préparation du fichier à l’aperçu du thème, sans supposer un compte marchand ni une version de thème particuliers.

Choisir où placer l’icône

Les thèmes Shopify possèdent un répertoire assets pour les fichiers et un répertoire snippets pour le balisage Liquid réutilisable. Shopify décrit les deux dans son architecture des thèmes et recommande de vérifier les options de l’éditeur avant de modifier le code dans son guide du code des thèmes. Un thème avec un champ SVG personnalisé peut n’avoir besoin d’aucune des deux méthodes de code ci-dessous. La présence d’un champ dans un thème n’implique pas que tous les thèmes le possèdent.

Deux méthodes de livraison

Cette distinction compte, car le CSS de la page ne peut pas atteindre l’intérieur d’un SVG chargé par un <img> ordinaire. Les tracés intégrés peuvent utiliser currentColor, qui reprend la valeur de la propriété CSS color. Consulte le guide MDN du SVG comme image et son explication de currentColor. Pour des exemples navigateur plus généraux, lis SVG intégré ou balise image.

Préparer le SVG avant de toucher au thème

Commence par la plus petite version utile du symbole de marque. Pour une icône, préserve sa silhouette et toute ouverture voulue à la taille réellement vue par les clients. Un lettrage fin ou une texture réussie sur un plan de travail peut se perdre à 20 à 32 pixels. Garde le fichier source de la marque comme original ; crée un export distinct pour l’icône.

1. Retrouve une source propre. Exporte un SVG depuis le dessin vectoriel original s’il existe. Si la seule source est un PNG à aplats, PerfectVector peut t’aider pour cette étape : crée un SVG candidat avec sa procédure clipart vers SVG, puis ouvre le fichier téléchargé dans un éditeur vectoriel. Compare la silhouette et les formes distinctes au PNG. Une vectorisation est un point de départ, pas une garantie de géométrie identique.
2. Examine la structure. Confirme que le symbole visible se compose de tracés ou de formes vectorielles simples, pas d’un seul rectangle <image> matriciel intégré. Retire les boîtes de fond accidentelles, fragments isolés, contours en double et minuscules zones colorées. Le guide de préparation des icônes PNG traite des grilles cohérentes et de la taille optique dans un ensemble.
3. Règle le canevas et les couleurs. Donne à l’export un viewBox avec des marges raisonnables. Garde les couleurs de marque fixes si le symbole doit rester bicolore. Si une icône monochrome doit hériter de la couleur du thème, fais utiliser currentColor aux tracés prévus. Changer la couleur d’un SVG explique pourquoi un remplissage codé en dur peut résister à un changement de couleur ultérieur.
4. Examine le fichier comme du code. Ne garde que les éléments et attributs nécessaires à l’icône. Retire les scripts inattendus, références externes, données d’éditeur superflues et balisage non fiable avant de l’intégrer à un thème. Ouvre le SVG nettoyé à la taille d’icône et à une taille d’inspection plus grande ; ces vérifications détectent des erreurs différentes.

Pour une petite étoile monochrome, la source peut être aussi simple que ceci. Le tracé ci-dessous est un exemple original, pas une icône fournie par Shopify ni un résultat de conversion PerfectVector. Il possède un système de coordonnées explicite et aucune image intégrée :

<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>

Un symbole de marque bicolore exige des tracés ou formes séparés avec des remplissages choisis. Remplacer toutes les couleurs par currentColor effacerait cette distinction. Si le symbole appartient à une famille d’icônes plus large, applique les mêmes règles de taille et de couleur à quelques icônes représentatives avant d’exporter les autres.

Méthode A : afficher une ressource du thème

Le filtre asset_url de Shopify renvoie l’URL CDN d’un fichier du répertoire assets du thème. Ajoute ton SVG vérifié à cet endroit, puis référence son nom exact dans le modèle, la section ou le snippet Liquid approprié. L’exemple simple ci-dessous suppose que brand-mark.svg est un symbole décoratif aux couleurs fixes, à côté d’un texte visible :

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

Utilise un texte alt descriptif si l’image transmet une information absente du texte adjacent. Pour une image purement décorative, alt="" convient. Les consignes d’accessibilité des thèmes Shopify demandent un attribut alt sur chaque image et une valeur vide pour les icônes décoratives. Les valeurs explicites de largeur et de hauteur réservent aussi de la place pendant le chargement de la ressource, comme l’expliquent les consignes Shopify de livraison des ressources.

Cette méthode garde le SVG comme une image unique du point de vue de la page. Si la couleur du thème change, mets à jour les remplissages du SVG ou choisis l’intégration, plutôt que de supposer qu’une règle CSS parente recolorera le fichier. Ne colle pas l’URL d’un fichier d’une boutique dans un autre thème ; laisse asset_url résoudre la ressource du thème.

Méthode B : afficher un snippet d’icône intégré

Pour une icône monochrome répétée, place le balisage SVG vérifié dans un snippet comme snippets/brand-mark-icon.liquid. La documentation Shopify des snippets utilise {% render %} pour insérer du balisage réutilisable. Un snippet minimal peut reprendre une couleur du style de texte environnant :

<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>

Affiche-le ensuite dans le fichier de thème concerné :

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

Ici, aria-hidden="true" correspond à une icône qui décore seulement le texte visible voisin. Si l’icône seule sert de libellé à un bouton ou à un lien, donne à la commande un nom accessible plutôt que de compter sur un SVG décoratif. Teste-la au clavier et avec un lecteur d’écran. Garde sa couleur CSS et ses dimensions dans le système normal de styles du thème au lieu de disperser des valeurs ponctuelles intégrées.

Un snippet est réutilisable, mais reste du code de thème. Shopify conseille de dupliquer un thème avant de modifier son code. Fais le changement dans la copie, affiche l’aperçu de la page ou section exacte et conserve le snippet original pour le comparer après une mise à jour du thème. Les bibliothèques d’icônes propres à un thème peuvent avoir leurs arguments et leur structure ; examine ces fichiers avant de remplacer une icône intégrée. La discussion actuelle de la communauté Shopify sur une bibliothèque d’icônes montre pourquoi afficher une bibliothèque entière ne revient pas nécessairement à sélectionner une de ses icônes.

Vérifier le résultat à la taille finale

Un fichier peut être techniquement valide tout en ayant une mauvaise apparence en boutique. Examine la page sur des fonds clairs et sombres si le thème les utilise. Vérifie le symbole à sa taille CSS réelle, dans une fenêtre étroite et à côté des icônes voisines. Confirme qu’une ouverture reste ouverte, que les couleurs ont assez de contraste et que le viewBox ou le conteneur ne rogne pas l’icône.

Si la ressource ressemble à un rectangle flou en agrandissement, cherche une image matricielle intégrée. Si une icône intégrée ignore la couleur du thème, cherche des remplissages codés en dur, des styles intégrés ou un sélecteur plus spécifique. Si rien n’apparaît, vérifie d’abord le nom du fichier ou du snippet, puis le balisage de section propre au thème. Ne change pas plusieurs choses à la fois. Le guide des icônes en masque CSS SVG traite d’une autre méthode pour recolorer une silhouette sans intégrer ses tracés.

Pour ton propre pictogramme à aplats uniquement matriciel, crée un SVG candidat avec PerfectVector, puis examine ses tracés, ouvertures et couleurs à la taille d’icône prévue avant de choisir la méthode du thème. Si tu as déjà un bon SVG, saute l’étape de vectorisation et consacre ce temps à l’aperçu de la boutique.

FAQ

Puis-je téléverser une icône SVG dans l’écran Customize de tous les thèmes Shopify ? Non. Certains thèmes fournissent un champ d’icône ou de SVG personnalisé ; d’autres exigent une ressource ou une modification du code. Vérifie les sections et la documentation du thème précis avant de supposer qu’un champ existe.

Pourquoi mon SVG téléversé ne suit-il pas la couleur du thème ? Un SVG utilisé avec une balise image est une ressource image ; le CSS de la page n’applique donc pas de styles à ses tracés internes. Modifie les remplissages du SVG pour une ressource aux couleurs fixes, ou utilise un balisage intégré vérifié avec currentColor lorsque la couleur doit être pilotée par le thème.

Dois-je convertir une icône de marque PNG en SVG avant de l’ajouter ? Convertis un pictogramme à aplats s’il a besoin de tracés éditables qui peuvent changer d’échelle. Examine la vectorisation à la taille d’icône prévue et retire les formes parasites. Garde une photographie ou une image texturée en matriciel si la vectorisation supprimerait les détails qui la définissent.

Sources

1. Shopify Developers — Architecture des thèmes — Ressources du thème, snippets et emplacement du balisage.
2. Shopify Developers — asset_url — Fonctionnement des URL de ressources de thème utilisées dans l’exemple Liquid.
3. Shopify Developers — Snippets — Balisage Liquid réutilisable et balise render.
4. Shopify Help Center — Modifier le code d’un thème — Priorité à l’éditeur, duplication du thème et précautions lors des modifications de code.
5. Shopify Developers — Bonnes pratiques d’accessibilité — Texte alternatif et gestion des icônes décoratives.
6. Shopify Developers — Servir les ressources depuis le CDN Shopify — Filtres de ressources et dimensions d’image explicites.
7. MDN — SVG comme image — Restrictions du contexte image dans le navigateur.
8. MDN — Attribut color du SVG — Comment currentColor alimente les remplissages et contours SVG.