SVG inline contro tag immagine
Usa SVG inline o componenti quando ti serve il cambio colore al passaggio e animazioni CSS. Usa il tag immagine con larghezza, altezza e testo alternativo se vuoi che la ricerca immagini indicizzi l icona.
L'SVG in linea vive nel documento, quindi il CSS lo raggiunge: stati hover, temi currentColor e keyframe CSS ridanno stile o animazione alla grafica, e uno sprite di riferimenti symbol tiene le icone ripetute a un solo scaricamento. Un tag <img> carica la grafica come immagine: il CSS non può ridarle stile, ma il browser la memorizza nella cache, il testo alt la descrive quando le immagini sono bloccate e può comparire nella ricerca immagini. Inserisci in linea le icone che devono reagire all'interfaccia; incorpora una volta con un URI dati CSS da qualsiasi pagina icona, o riferisci un file, quando la grafica deve restare in cache e fuori dall'HTML.
Inline SVG, styled by CSS
<span class="text-blue-600">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
<path d="M4 10.5 12 4l8 6.5V20h-5.5v-4.5h-5V20H4Z"/>
</svg>
Save
</span>Image tag, cached and described with alt text
<img src="save.svg" width="20" height="20" alt="Save">Fatti verificati su questo sito
- Formati di esportazione: Optimized SVG, PNG, WebP, React TSX, Vue 3 SFC, Svelte, CSS mask or data URI, SVG sprite
- Dimensioni di esportazione raster: 64px, 128px, 256px, 512px, 1024px, 2048px
- Limite di caricamento per file nel workspace: 2 MB
- Licenza e autore sono documentati in ogni pagina icona.