SVG in HTML

Converti SVG in HTML online

Importa un file SVG o incollane il codice per ottenere un SVG inline da inserire in una pagina HTML. Visualizza l’anteprima del risultato, regola le impostazioni di ottimizzazione e copia il codice. Analisi, ottimizzazione e conversione avvengono in locale nel tuo browser, senza inviare il tuo SVG a un server.

Prepara un SVG inline responsive

Mantieni il viewBox per conservare il sistema di coordinate dell’SVG. Rimuovi larghezza e altezza fisse quando l’SVG ha un viewBox utilizzabile, poi dimensionalo nel tuo CSS.

Capire il peso dell’SVG e il risparmio

«Peso originale» è il peso dell’SVG di partenza. «Peso dell’SVG ottimizzato» è il suo peso dopo l’elaborazione con le opzioni scelte, come la rimozione dei commenti, l’arrotondamento delle coordinate e la minificazione del codice. I pesi sono indicati in kB, dove 1 kB equivale a 1.000 byte. «Risparmio» indica la riduzione percentuale: passare da 10 kB a 7 kB significa risparmiare il 30%. Se l’output è più pesante, ad esempio per via di una formattazione leggibile, viene mostrato invece «Aumento di peso». Questi valori confrontano il codice SVG, non il peso delle esportazioni JSX, React, Data URI CSS o Base64.

Precisione decimale e rientro

«Precisione decimale» stabilisce quante cifre vengono mantenute dopo il punto decimale nelle coordinate e negli attributi numerici. Con una precisione di 2, 12.34567 diventa 12.35. Meno decimali possono ridurre il peso del file, ma alterare i dettagli più fini; il valore predefinito di 3 è un punto di partenza, quindi controlla l’anteprima. Il rientro usa 2 spazi, 4 spazi o tabulazioni per rendere più leggibile il codice HTML e JSX senza modificare l’immagine. «Minifica SVG» elimina gli spazi di formattazione superflui per compattare l’output, quindi il rientro è disattivato quando la minificazione è attiva.

HTML, JSX, React e Data URI SVG

L’output HTML è codice SVG inline e si scarica come file SVG. JSX adatta i nomi degli attributi e gli stili inline per React. «Componente React» lo racchiude in una funzione TypeScript che accetta le props SVG standard. «Data URI CSS» produce una dichiarazione background-image; Base64 produce un URI di immagine SVG codificato. Le statistiche sul peso descrivono l’SVG ottimizzato, non i formati codificati, più pesanti. Controlla gli ID prima di usare più copie inline nella stessa pagina.

Un flusso di lavoro SVG statico e locale

L’anteprima è un’immagine isolata, non codice eseguibile nella pagina. Script, HTML incorporato, animazioni, immagini esterne e fogli di stile vengono rimossi. Gli stili di presentazione inline supportati e i riferimenti a frammenti locali vengono mantenuti. Questo strumento è pensato per grafica statica; le funzionalità non supportate possono modificarne l’aspetto. currentColor cambia riempimenti e contorni a tinta unita e, quando l’SVG è inline, ne eredita il colore; un’anteprima come immagine usa un proprio contesto di colore.