Vai al contenuto principale

SVG in Data URI

Converti SVG in un URI dati per CSS o HTML

Crea un URI dati SVG con codifica URL o Base64, insieme a snippet pronti per CSS background-image, CSS mask-image e HTML img. Ottimizza il markup, controlla l’anteprima e copia il formato che ti serve senza caricare il file SVG.

Trascina i file qui

Modifica dei valori predefiniti per i nuovi file

Codifica

La codifica URL applica l'escape solo ai caratteri che un URL non può contenere, quindi per file grandi come un'icona risulta di solito il 20-30% più leggera di Base64 e il markup resta leggibile. Scegli Base64 quando un passaggio di build o un CMS riscrive i segni di percentuale.

Codifica anche spazi, apostrofi e parentesi, così l'URI è sicuro dentro un url(...) senza virgolette e dentro le stringhe di Sass o Less. Costa qualche byte. Base64 non ne ha bisogno.

Ottimizzazione

Esegue il preset di ottimizzazione sicuro prima di generare l'output.

Stile

Sostituisce i riempimenti e i contorni perché l'icona erediti il colore del testo circostante. Utile solo per disegni a un solo colore: appiattisce su un'unica tinta un SVG multicolore.

Nessuna anteprima. Aggiungi e seleziona file per vedere i risultati.

Nessun file ancora. Trascina file sopra o clicca SELEZIONA FILE.

Nessun file ancora. Trascina file sopra o clicca SELEZIONA FILE.

Che cos'è SVG?

SVG (Scalable Vector Graphics) è un formato di immagine vettoriale basato su XML. Anziché pixel, un SVG descrive matematicamente forme, tracciati, riempimenti e contorni, così da poter essere reso a qualsiasi dimensione senza perdere qualità.

SVG è il formato vettoriale standard per il Web. È supportato nativamente da tutti i browser moderni e può essere formattato con CSS o animato con JavaScript o SMIL. Spesso è compatto per loghi, icone e illustrazioni, ma i file SVG complessi possono diventare grandi.

Quando inserire un SVG inline come data URI

Un URI di dati inserisce l'intero SVG all'interno del foglio di stile o del markup, quindi il browser non ha bisogno di una seconda richiesta per disegnarlo. Ciò ripaga per piccole opere d'arte decorative: proiettili, frecce, chevron, segni di spunta nelle caselle di controllo o un segno in un piè di pagina. La codifica URL è solitamente più compatta per il testo SVG, mentre Base64 può essere utile quando un altro strumento lo prevede. Una maschera CSS tratta SVG come uno stencil per il colore di sfondo dell'elemento, quindi un'icona monocromatica può essere ricolorata per stato, tema o componente con una singola dichiarazione CSS.

Come convertire un SVG in data URI online

  1. 1

    Trascina i tuoi file SVG, o clicca SELEZIONA FILE, per aggiungerli alla coda. Fino a 40 alla volta.

  2. 2

    Scegli la codifica URL o Base64 e decidi se ottimizzare prima il markup. Tutti e cinque gli output, e le loro dimensioni in byte, si aggiornano mentre modifichi le opzioni.

  3. 3

    Copia lo snippet che ti serve, o clicca SALVA TUTTO per scaricare un file .css per ogni SVG con le regole di sfondo e di maschera.

Privacy: i tuoi file non escono dal browser

La conversione viene eseguita localmente nel tuo browser utilizzando JavaScript e WebAssembly. Non è previsto il caricamento di file o la conversione lato server, quindi i file che aggiungi rimangono sul tuo dispositivo.

L'elaborazione locale aiuta a proteggere i loghi riservati, i documenti interni e le opere d'arte inedite dei clienti. Le pagine e il codice di conversione vengono memorizzati nella cache mentre li utilizzi, quindi gli strumenti che hai già aperto possono continuare a funzionare senza una connessione di rete.

Domande frequenti

Un data URI con codifica URL è più piccolo di Base64?

Di solito. Base64 aggiunge un sovraccarico di codifica ai byte non elaborati, mentre la codifica URL espande solo i caratteri di cui è necessario eseguire l'escape. La differenza esatta dipende dal markup SVG, quindi lo strumento mostra entrambe le dimensioni e ti consente di confrontarle per il file che hai di fronte.

Come fa la regola di maschera CSS a ricolorare un'icona?

mask-image usa l'SVG come uno stencil: l'elemento dipinge il proprio background-color e la maschera decide quali pixel sopravvivono. Poiché il colore arriva dal CSS, un solo data URI può assumere qualsiasi colore, e una variante al passaggio del mouse o per il tema scuro è un semplice cambio di background-color. Funziona solo con disegni a un solo colore, perché una maschera conserva il canale alfa e scarta i colori propri dell'SVG. Safari richiede ancora il prefisso -webkit-mask-image, che la regola generata include.

Quando è meglio non inserire un SVG inline come data URI?

Quando il file è di grandi dimensioni o condiviso. Un URI di dati viene copiato in ogni foglio di stile o pagina che lo utilizza, quindi non può essere memorizzato nella cache da solo e viene scaricato nuovamente ogni volta che il file cambia. Per opere d'arte di grandi dimensioni o risorse riutilizzate su più pagine, un file .svg separato con le proprie intestazioni di cache è spesso la scelta migliore. Inoltre, non è possibile definire uno stile per un URI di dati dall'esterno, motivo per cui la regola di maschera generata è utile per le icone monocromatiche.