SVG inline o img: scegli il comportamento della grafica

Usa un SVG in un elemento <img> quando vuoi visualizzare una grafica finita. Inserisci l'SVG inline quando la pagina deve cambiare singole forme con CSS o JavaScript. Entrambi gli approcci possono visualizzare la stessa grafica vettoriale a dimensioni diverse; inserirla inline non ne migliora la geometria.

Questa distinzione conta quando un logo appare corretto in una scheda del browser ma ignora la regola di colore del sito. Il file può essere a posto. La regola può semplicemente non avere accesso al suo interno. Qui sotto la stessa illustrazione di montagne appare in entrambe le forme, così puoi controllare la differenza prima di cambiare il procedimento di gestione delle risorse.

Scegli il comportamento necessario

Un SVG esterno resta un file vettoriale quando viene visualizzato attraverso <img>. Il limite è tra la pagina e gli elementi interni del file. Il CSS della pagina può ridimensionare o ruotare l'elemento immagine, oppure ridurne l'opacità, ma un selettore come .logo path non può raggiungere i tracciati dentro la risorsa src. Le forme inline diventano parte dell'albero del documento della pagina. La guida MDN all'incorporamento SVG descrive questi due approcci.

Se stai ancora controllando cosa contiene il file, parti da che cos'è un file SVG. L'estensione .svg da sola non significa che ogni dettaglio visibile sia un tracciato. Per una consegna a un negozio online, segui la guida alle icone SVG personalizzate Shopify dopo aver verificato il contenuto del file.

Testa la stessa grafica in entrambe le forme

Per questa dimostrazione abbiamo scritto a mano due tracciati di montagne e un cerchio per il sole. Abbiamo caricato quella grafica da un file separato e incollato le stesse forme nell'HTML. È un test di incorporamento, non un risultato di conversione PerfectVector.

Nel nostro test nel browser Chromium, entrambe le versioni occupavano inizialmente 360 × 240 pixel CSS e mostravano un sole ambra. Abbiamo poi abilitato una regola di pagina rivolta a .sun. Il sole inline è diventato corallo; quello dell'immagine esterna è rimasto ambra. Ridurre entrambi i riquadri a 180 × 120 ha cambiato le dimensioni di visualizzazione senza cambiare quella differenza.

1. Salva il file SVG separato

Crea artwork.svg con questa sorgente completa. Il viewBox definisce lo spazio di coordinate del disegno. Larghezza e altezza gli assegnano dimensioni iniziali esplicite.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160" viewBox="0 0 240 160">
  <path d="M34 120 104 26 174 120Z" fill="#233b63" />
  <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
  <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
</svg>

2. Aggiungi l'immagine e la copia inline

Salva quanto segue come index.html accanto a artwork.svg, poi aprilo in un browser. Le due grafiche hanno la stessa geometria e attributi di disegno. La versione inline ha anche un nome per le tecnologie assistive.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG embedding test</title>
<style>
  .artwork {
    display: block;
    width: 360px;
    max-width: 100%;
    height: auto;
  }
  .theme .sun { fill: #d94862; }
</style>
<body class="theme">
  <h1>External image</h1>
  <img class="artwork" src="artwork.svg"
       width="240" height="160"
       alt="Mountain and sun illustration">
 
  <h2>Inline SVG</h2>
  <svg class="artwork" xmlns="http://www.w3.org/2000/svg"
       width="240" height="160" viewBox="0 0 240 160"
       role="img" aria-labelledby="mountain-title">
    <title id="mountain-title">Mountain and sun illustration</title>
    <path d="M34 120 104 26 174 120Z" fill="#233b63" />
    <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
    <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
  </svg>
</body>
</html>

La schermata usa un layout di confronto stilizzato intorno a queste stesse forme. L'esempio più piccolo qui sopra mantiene facile la riproduzione del comportamento.

3. Cambia una variabile alla volta

Rimuovi class="theme" da body e ricarica. Entrambi i soli dovrebbero ora essere ambra. Ripristina la classe e soltanto il sole inline dovrebbe diventare corallo. Cambia .artwork da width: 360px a width: 180px; con spazio nel contenitore, entrambe le grafiche dovrebbero ridursi a 180 × 120.

Se vuoi cambiare permanentemente il sole dell'immagine esterna, modifica il suo fill in artwork.svg. Se vuoi che risponda allo stato della pagina, scegli markup inline o un altro metodo deliberato di consegna. La nostra guida per cambiare i colori SVG descrive la modifica del file stesso.

Il nome .sun è stato aggiunto per questo esempio. Un file convertito o esportato non conterrà necessariamente una classe utile per ogni parte significativa. Esamina e nomina le forme che intendi controllare anziché supporre che un oggetto visibile sia un solo tracciato selezionabile.

Mantieni espliciti dimensioni e nomi accessibili

Conserva il viewBox quando trasferisci la grafica in HTML. Imposta attributi di larghezza e altezza come riferimento iniziale sensato, poi applica CSS responsivo. Per questa illustrazione 3:2, width: 180px; height: auto conserva le proporzioni. Un grande margine vuoto nel viewBox resta parte dell'area di disegno con entrambi i metodi; cambiare l'incorporamento non può eliminarlo.

Quando il riquadro di layout ha un rapporto diverso, la guida all'adattamento con preserveAspectRatio confronta adattamento dell'intera grafica, ritaglio e deformazione.

Per un'immagine esterna significativa, scrivi alt sull'<img> HTML. Per un'immagine inline significativa, l'esempio usa role="img" e aria-labelledby che punta al suo <title>. L'SVG inline non usa l'attributo alt dell'immagine HTML. Queste opzioni di denominazione sono documentate nella guida MDN agli SVG in HTML.

Se ripeti l'esempio inline, assegna un valore univoco a ogni ID del titolo e aggiorna il relativo aria-labelledby. La stessa disciplina vale per gli ID usati da gradienti, maschere o tracciati di ritaglio. Per grafica decorativa accanto a testo visibile equivalente, usa un alt vuoto su <img> o nascondi l'SVG inline alle tecnologie assistive con aria-hidden="true". Testa il link o pulsante completo nel suo contesto così il suo scopo conserva un nome accessibile.

Per molte icone riutilizzabili, uno sprite di simboli SVG introduce un approccio separato con definizioni e istanze. Decidi se ti serve quel riuso prima di incollare molte copie in ogni pagina.

Tratta le prestazioni come una misura

Il markup inline mette le forme nel documento anziché recuperare quella grafica come risorsa immagine separata. Aumenta anche il markup del documento. Un file esterno può essere riutilizzato dalla cache del browser, a seconda di URL, intestazioni della risposta e stato della cache. La guida MDN alla cache HTTP spiega quelle condizioni.

Nessuno di questi fatti dimostra quale versione renda la pagina più veloce. Confronta la pagina effettiva alla prima visita e a una visita successiva, con il numero reale di copie e la complessità SVG reale. Questa dimostrazione testa accesso ai colori e dimensioni; non è un benchmark della velocità di caricamento.

La modalità immagine esterna ha anche restrizioni oltre al CSS. MDN documenta che SVG usato come immagine disabilita JavaScript e limita le risorse esterne. Non spostare inline un SVG sconosciuto soltanto per far funzionare una funzione assente. Esamina e sanitizza il markup non attendibile prima di incorporarlo in una pagina.

Quando la grafica iniziale è soltanto un PNG

La vettorializzazione precede questa scelta di incorporamento se la sorgente non ha le forme necessarie. Per un logo o un'illustrazione raster adatti, converti il PNG in SVG con PerfectVector, esamina il risultato rispetto alla sorgente e conserva l'SVG accettato come originale della grafica. Controlla sagoma, fori e piccole regioni di colore prima di aggiungere classi o preparare una copia web.

PerfectVector fornisce la grafica vettoriale. Devi comunque scegliere quali parti devono rispondere al CSS, aggiungere nomi significativi e testare la pagina finale. Convertire un'immagine non produce automaticamente un componente con nomi di classe semantici. Se un SVG esistente contiene già tracciati utilizzabili, lavora su quelli anziché ricalcare una copia renderizzata.

Controlla anche la presenza di un SVG contenente un'immagine raster incorporata. Incollare un file simile inline espone il suo elemento <image>; non trasforma i pixel al suo interno in forme ricolorabili separatamente. Per una fotografia che deve restare fotografica, mantieni un formato raster appropriato per la consegna.

Controlla la pagina finale

• Conferma che la grafica autonoma appaia corretta prima di testare il CSS di pagina.
• Scegli <img> per una visualizzazione finita o SVG inline per controllare direttamente gli elementi.
• Verifica dimensioni renderizzate e proporzioni nel layout più stretto supportato.
• Testa la forma esatta da ricolorare; non affidarti a una regola generica path.
• Controlla nomi delle immagini, ID duplicati e link o pulsante circostante.
• Misura il comportamento di caricamento se influisce sulla decisione; non dedurre un risultato di velocità da questo esempio.

FAQ

Un SVG diventa bitmap quando uso un tag img? No. Un SVG caricato attraverso img può ancora renderizzare geometria vettoriale. L'elemento immagine impedisce alla pagina ospitante di selezionare direttamente le forme interne; non converte quelle forme in PNG.

Perché currentColor non segue il colore del testo della pagina? Un'immagine SVG esterna ha il proprio contesto di stile. Il colore della pagina non diventa automaticamente il currentColor usato dentro quel file. Usa SVG inline quando il suo colore deve essere ereditato dalla pagina e imposta il riempimento o contorno interessato per usare currentColor.

Dovrei convertire il mio SVG esistente prima di inserirlo inline? Non serve una conversione se contiene già le forme vettoriali desiderate. Esamina il markup, conserva i riferimenti necessari, aggiungi nomi appropriati e testalo nella pagina. La conversione da raster a vettore è pertinente soltanto quando devi recuperare forme da una sorgente raster.

Fonti

1. MDN — Inserire grafica vettoriale in HTML — Comportamento di incorporamento come immagine esterna e inline.
2. MDN — Introduzione a SVG in HTML — Markup inline, viewBox e denominazione accessibile.
3. MDN — Cache HTTP — Il riuso della cache dipende dalla politica della risposta e dall'identità della risorsa.
4. MDN — SVG come immagine — Restrizioni su script e risorse nei contesti immagine.

Scegli l'incorporamento adatto al compito della grafica, poi testalo con gli stili reali della pagina. Se l'unica sorgente è un PNG adatto, recupera prima le forme vettoriali, esamina il risultato e prepara la grafica accettata per quell'incorporamento.