PricingLoginStart free
HTML Academy · Lezione

SVG inline a confronto con img e object

Scegliere il metodo di incorporamento SVG più adatto al proprio caso d’uso

Lezione 1 di 412 passaggi

SVG inline a confronto con img e object è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Tre modi per incorporare SVG

SVG (Scalable Vector Graphics) può essere incorporato in tre modi:

  • <img src="icon.svg"> — semplice, memorizzato nella cache, senza accesso a JS/CSS
  • <object data="chart.svg"> — interazione inline, documento separato
  • SVG inline all'interno dell'HTML — accesso completo a CSS/JS, senza richieste aggiuntive

SVG con img src

Il metodo più semplice: fare riferimento a SVG come immagine:

<img src="logo.svg" alt="Company logo" width="120" height="40">
<!-- Pros: simple, cached by browser, clean HTML -->
<!-- Cons: cannot style with CSS, no JS interaction,
     cannot use SVG filters or animations from CSS -->

SVG come background-image CSS

Utilizzi SVG come sfondo CSS per icone decorative:

.icon-check {
  background-image: url('/icons/check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 1rem;
  height: 1rem;
}
<!-- Decorative: not in accessibility tree, no alt text needed -->

Elemento object per SVG

Incorpori SVG con <object> per utilizzare SVG interattivi:

<object
  type="image/svg+xml"
  data="interactive-chart.svg"
  width="800"
  height="400"
  aria-label="Interactive revenue chart"
>
  <!-- Fallback: -->
  <img src="chart-static.png" alt="Revenue chart">
</object>
<!-- SVG can have its own scripts
     SVG document is somewhat isolated from parent page -->

SVG inline

Incorpori SVG direttamente nell'HTML per avere il pieno controllo:

<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 2L2 7l10 5 10-5-10-5z"/>
  <path d="M2 17l10 5 10-5"/>
</svg>

Vantaggi degli SVG inline

Perché utilizzare SVG inline:

  • Stile CSS completo: fill, stroke, transizioni, animazioni
  • Interazione JavaScript: selezionare gli elementi SVG, ascoltare gli eventi
  • currentColor: ereditare il colore dal CSS dell'elemento padre
  • Nessuna richiesta HTTP aggiuntiva
  • Può entrare a far parte dell'albero dell'accessibilità con role e title

Svantaggi degli SVG inline

Svantaggi degli SVG inline:

  • Il file HTML diventa più grande
  • Non vengono memorizzati separatamente nella cache dal browser
  • Non è possibile riutilizzare facilmente lo stesso SVG in più pagine senza duplicarlo
  • Ripetizione del codice per le icone riutilizzate

Elemento use per gli sprite

Definisca le icone SVG una sola volta e vi faccia riferimento con <use>:

<!-- Icon sprite (often hidden): -->
<svg style="display:none">
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12"/>
  </symbol>
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M20 6L9 17l-5-5"/>
  </symbol>
</svg>

<!-- Use the icons: -->
<svg aria-hidden="true"><use href="#icon-close"/></svg>
<svg aria-hidden="true"><use href="#icon-check"/></svg>

SVG accessibili

Renda accessibili gli SVG inline:

<!-- Informative SVG: -->
<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Revenue growth chart Q1-Q4 2024</title>
  <!-- chart paths -->
</svg>

<!-- Decorative SVG: -->
<svg aria-hidden="true" focusable="false">
  <!-- decorative paths -->
</svg>

<!-- focusable="false" needed for IE to prevent tab focus -->

Il trucco di currentColor

Utilizzi currentColor per ereditare il colore del testo dal CSS:

<button class="btn btn-primary">
  <svg aria-hidden="true" width="16" height="16">
    <path fill="currentColor" d="M10 6H6v4H2v4h4v4h4v-4h4v-4h-4V6z"/>
  </svg>
  Add Item
</button>
<!-- fill="currentColor" inherits the button's text color
     When button is hovered/focused, icon color changes too
     No need for separate icon color rules -->

Verifica rapida

Qual è il principale vantaggio di un SVG inline rispetto all'utilizzo di un SVG con img src?

Rispondi nella lezione interattiva

Riepilogo: incorporamento di SVG

Elementi essenziali per incorporare SVG:

  • <img src> — semplice; nessun accesso a CSS/JS; memorizzato nella cache
  • background-image CSS — solo decorativo
  • <object data> — SVG interattivo; parzialmente isolato
  • SVG inline — controllo completo su CSS/JS; nessuna richiesta aggiuntiva
  • Sprite SVG con <symbol> + <use> — riutilizzo efficiente
Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi
40
Lezioni
159
Inizia a imparare gratisVisualizza il corso completo

Domande Frequenti

La lezione «SVG inline a confronto con img e object» è gratuita?

Sì — il testo completo di «SVG inline a confronto con img e object» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «SVG inline a confronto con img e object»?

Scegliere il metodo di incorporamento SVG più adatto al proprio caso d’uso Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «SVG inline a confronto con img e object»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. SVG inline a confronto con img e object
  2. Forme SVG di base: rect circle path
  3. viewBox SVG e ridimensionamento responsive
  4. Animare SVG con CSS e SMIL
← Torna a HTML Academy