Icone SVG Shopify: prepara un simbolo del marchio

Un'icona SVG personalizzata può entrare in un tema Shopify in due modi pratici: carica il file come risorsa del tema e visualizzalo con un tag immagine, oppure inserisci il suo markup in uno snippet Liquid e renderizza quello snippet nel punto destinato all'icona. Il primo metodo è più semplice per un simbolo dai colori fissi. Il secondo offre controllo diretto sui tracciati e sul colore. I controlli disponibili nell'editor del tema dipendono dal tema, quindi ispeziona i suoi blocchi di icone esistenti prima di cambiare il codice.

Se il tuo unico sorgente è un PNG, crea prima un SVG composto da tracciati. Rinominare il file non trasforma i pixel in forme. Un SVG originale pulito è preferibile quando lo possiedi; una foto dettagliata di solito è meglio lasciarla come immagine. I passaggi seguenti accompagnano un piccolo pittogramma del marchio dalla preparazione del file all'anteprima del tema, senza presupporre uno specifico account commerciante o una versione del tema.

Scegli dove collocare l'icona

I temi Shopify hanno una directory assets per i file e una directory snippets per il markup Liquid riutilizzabile. Shopify documenta entrambe nella sua architettura dei temi e raccomanda di controllare le opzioni dell'editor prima di modificare il codice nella guida al codice dei temi. Un tema con un campo SVG personalizzato potrebbe non richiedere nessuno dei due metodi tramite codice descritti sotto. La presenza di un campo in un tema non implica che tutti i temi lo abbiano.

Due metodi di inserimento

La distinzione conta perché il CSS della pagina non può raggiungere l'interno di un SVG caricato attraverso un normale <img>. I tracciati incorporati possono usare currentColor, che prende il proprio valore dalla proprietà CSS color. Consulta la guida MDN al contesto delle immagini SVG e la sua spiegazione di currentColor. Per esempi più generali nel browser, leggi SVG incorporato rispetto a tag immagine.

Prepara l'SVG prima di intervenire sul tema

Inizia con la versione più piccola utile del simbolo del marchio. Per un'icona, conserva la sagoma e ogni apertura intenzionale alle dimensioni effettivamente viste dai clienti. Scritte fini o texture che appaiono bene sulla tavola da disegno possono confondersi a 20–32 pixel. Conserva il file sorgente del marchio come originale; crea un'esportazione separata per l'icona.

1. Recupera il sorgente pulito. Esporta un SVG dal progetto vettoriale originale se esiste. Se l'unico sorgente è un PNG piatto, PerfectVector può aiutare con quel singolo passaggio: crea un candidato SVG con la sua procedura da clipart a SVG, poi apri il file scaricato in un editor vettoriale. Confronta la sagoma e le forme separate con il PNG. Un ricalco è un punto di partenza, non una garanzia di geometria identica.
2. Ispeziona la struttura. Conferma che il simbolo visibile sia composto da tracciati o forme vettoriali di base, non da un unico rettangolo raster <image> incorporato. Rimuovi riquadri di sfondo accidentali, frammenti isolati, contorni duplicati e minuscole regioni di colore. La guida alla preparazione delle icone PNG tratta griglie coerenti e dimensioni ottiche uniformi in un insieme.
3. Imposta tela e colori. Assegna all'esportazione un viewBox con margini ragionevoli. Mantieni i colori fissi del marchio se il simbolo deve rimanere bicolore. Se un'icona monocromatica deve ereditare il colore del tema, fai usare currentColor ai tracciati previsti. Cambiare il colore SVG spiega perché un riempimento fissato nel codice può opporsi a una successiva modifica di colore.
4. Esamina il file come codice. Conserva soltanto elementi e attributi necessari all'icona. Rimuovi script inattesi, riferimenti esterni, residui dell'editor e markup non attendibile prima di incorporarlo in un tema. Apri l'SVG pulito alle dimensioni dell'icona e a dimensioni maggiori per ispezionarlo; i due controlli individuano errori diversi.

Per una piccola stella monocromatica, il sorgente potrebbe essere semplice come questo. Il tracciato seguente è un esempio originale, non un'icona fornita da Shopify né un risultato di conversione PerfectVector. Ha un sistema di coordinate esplicito e nessuna immagine incorporata:

<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 simbolo del marchio bicolore richiede tracciati o forme separate con riempimenti scelti deliberatamente. Sostituire ogni colore con currentColor cancellerebbe questa distinzione. Se il simbolo fa parte di una famiglia di icone più ampia, applica le stesse regole di dimensione e colore ad alcune icone rappresentative prima di esportare le altre.

Metodo A: visualizza una risorsa del tema

Il filtro asset_url di Shopify restituisce l'URL CDN di un file nella directory assets del tema. Aggiungi lì l'SVG esaminato, poi fai riferimento al nome esatto del file nel template, nella sezione o nello snippet Liquid appropriato. Il semplice esempio seguente presuppone che brand-mark.svg sia un simbolo decorativo dai colori fissi accanto a testo visibile:

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

Usa un testo alt descrittivo se l'immagine comunica informazioni non presenti nel testo adiacente. Per un'immagine puramente decorativa, alt="" è appropriato. Le indicazioni di accessibilità dei temi Shopify richiedono un attributo alt su ogni immagine e un valore vuoto sulle icone decorative. Larghezza e altezza esplicite riservano inoltre spazio mentre la risorsa viene caricata, come spiega la guida Shopify alla distribuzione delle risorse.

Questo metodo mantiene l'SVG come un'unica immagine dal punto di vista della pagina. Se il colore del tema cambia, aggiorna i riempimenti dell'SVG o scegli un metodo incorporato, invece di presumere che una regola CSS del genitore ricolori il file. Non incollare l'URL di un file di un negozio in un altro tema; lascia che asset_url risolva la risorsa del tema.

Metodo B: renderizza uno snippet con icona incorporata

Per un'icona monocromatica ripetuta, inserisci il markup SVG esaminato in uno snippet come snippets/brand-mark-icon.liquid. La documentazione sugli snippet Shopify usa {% render %} per inserire markup riutilizzabile. Uno snippet minimo può prendere il colore dallo stile del testo circostante:

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

Renderizzalo poi nel file pertinente del tema:

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

Qui aria-hidden="true" serve per un'icona che decora soltanto il testo visibile vicino. Se l'icona da sola identifica un pulsante o un link, assegna al controllo un nome accessibile invece di affidarti a un SVG decorativo. Provalo con tastiera e lettore di schermo. Mantieni colore CSS e dimensioni nel normale sistema di stili del tema, anziché disseminare valori incorporati per singoli casi.

Uno snippet è riutilizzabile, ma rimane codice del tema. Shopify consiglia di duplicare un tema prima di modificare il codice. Apporta la modifica nella copia, visualizza l'anteprima della pagina o sezione esatta e salva lo snippet originale per confrontarlo dopo un aggiornamento del tema. Le librerie di icone specifiche del tema possono avere argomenti e strutture propri; ispeziona quei file prima di sostituire un'icona integrata. L'attuale discussione della Shopify Community su una libreria di icone illustra perché renderizzare un'intera libreria non equivale necessariamente a selezionare una sua icona.

Controlla il risultato alle dimensioni finali

Un file può essere tecnicamente valido ma apparire sbagliato nella vetrina del negozio. Esamina la pagina su sfondi sia chiari sia scuri, se il tema li usa. Controlla il simbolo alle sue dimensioni CSS effettive, con una finestra stretta e accanto alle icone vicine. Conferma che un foro rimanga aperto, che i colori abbiano contrasto sufficiente e che l'icona non sia tagliata dal viewBox o dal contenitore.

Se la risorsa appare come un rettangolo sfocato quando viene ingrandita, cerca un raster incorporato. Se un'icona incorporata ignora il colore del tema, cerca riempimenti fissati nel codice, stili incorporati o un selettore più specifico. Se non appare nulla, controlla prima il nome del file della risorsa o dello snippet, poi il markup della sezione del tema. Non cambiare più cose contemporaneamente. La guida alle icone con maschere CSS tratta un altro metodo quando devi ricolorare una sagoma senza incorporarne i tracciati.

Per un tuo pittogramma piatto disponibile soltanto come raster, crea un candidato SVG con PerfectVector, poi ispeziona tracciati, aperture e colori alle dimensioni previste per l'icona prima di scegliere il metodo per il tema. Se possiedi già un buon SVG, salta il ricalco e dedica quel tempo all'anteprima della vetrina.

FAQ

Posso caricare un'icona SVG dalla schermata Customize di ogni tema Shopify? No. Alcuni temi forniscono un campo per un'icona o un SVG personalizzato; altri richiedono una risorsa o una modifica al codice. Controlla le sezioni e la documentazione del tema specifico prima di presumere che il campo esista.

Perché l'SVG caricato non segue il colore del tema? Un SVG usato attraverso un tag immagine è una risorsa immagine, quindi il CSS della pagina non applica stili ai suoi tracciati interni. Modifica i riempimenti dell'SVG per una risorsa dai colori fissi oppure usa markup incorporato esaminato con currentColor quando serve il colore controllato dal tema.

Devo convertire un'icona PNG del marchio in SVG prima di aggiungerla? Converti un pittogramma piatto se richiede tracciati scalabili e modificabili. Ispeziona il ricalco alle dimensioni previste per l'icona e rimuovi le forme isolate. Mantieni raster una fotografia o un'immagine con texture se il ricalco eliminerebbe i dettagli che la definiscono.

Fonti

1. Shopify Developers — Architettura dei temi — Risorse, snippet e collocazione del markup nel tema.
2. Shopify Developers — asset_url — Comportamento degli URL delle risorse del tema usato nell'esempio Liquid.
3. Shopify Developers — Snippet — Markup Liquid riutilizzabile e tag render.
4. Shopify Help Center — Modificare il codice del tema — Uso iniziale dell'editor, duplicazione del tema e precauzioni per le modifiche al codice.
5. Shopify Developers — Buone pratiche di accessibilità — Testo alternativo e gestione delle icone decorative.
6. Shopify Developers — Distribuire risorse dalla CDN Shopify — Filtri delle risorse e dimensioni esplicite delle immagini.
7. MDN — SVG come immagine — Restrizioni del contesto immagine nel browser.
8. MDN — Attributo color SVG — Come currentColor alimenta riempimenti e tratti SVG.