SVG in Base64 e Data URI
Incorpora gli SVG direttamente nel CSS o nell’HTML. Ottieni data URI codificati URL e in Base64, snippet CSS pronti e un tag <img>.
- Nessun caricamento
- Funziona offline
- Gratis, senza registrazione
- I file non lasciano mai il browser
Trascina qui i file SVG
oppure incolla codice SVG nell’editor. Puoi aprire più file contemporaneamente.
Il tuo SVG resta su questo dispositivo. Non viene caricato nulla.
Come usare il Convertitore da SVG a Base64 / Data URI
- 1
Incolla il tuo SVG
Incolla il codice SVG o trascina un file. Puoi anche incollare un data URI esistente per decodificarlo di nuovo in SVG.
- 2
Scegli un output
Scegli un data URI codificato URL (di solito il più leggero), Base64, sfondo CSS, maschera CSS o un tag HTML <img>.
- 3
Copia
Copia lo snippet nel tuo foglio di stile o nel tuo HTML. La dimensione di ogni opzione compare accanto.
Quando incorporare un SVG come data URI
Un data URI mette l’intera immagine dentro il CSS o l’HTML, così il browser non fa una richiesta separata. È ideale per grafiche piccole e usate spesso: icone nel CSS, checkbox e frecce dei select personalizzate, motivi di sfondo e segnaposto.
Per le illustrazioni grandi di solito è meglio un file .svg separato: il browser può metterlo in cache a parte e non appesantisce il foglio di stile.
SVG codificato URL o Base64?
Il Base64 trasforma ogni 3 byte in 4 caratteri, quindi aggiunge sempre circa il 33% alla dimensione. Un SVG codificato URL esegue l’escape solo dei pochi caratteri non sicuri in un URL (<, >, #, % e virgolette), quindi resta leggibile e di solito è più leggero, soprattutto dopo gzip. viewsvg mostra entrambi con la loro dimensione, così puoi scegliere.
Tutto ciò che serve per lavorare con gli SVG
Il Convertitore da SVG a Base64 / Data URI fa parte di un unico spazio di lavoro per visualizzare, modificare, ottimizzare e convertire file SVG, senza registrazione, senza pubblicità e senza caricamenti.
Anteprima istantanea
Zoom fino al 6400%, spostamento, adattamento allo schermo e verifica su sfondo trasparente, bianco, nero o di qualsiasi colore.
Editor di codice in tempo reale
Evidenziazione della sintassi, indicatori di errore per riga, formattazione e minificazione, ricerca e cronologia completa degli annullamenti.
Contorno e griglia di pixel
Vedi ogni tracciato in modalità contorno e controlla l’allineamento dei pixel con la griglia quando ingrandisci.
Ispeziona
Dimensione del file e con gzip, viewBox, albero degli elementi con evidenziazione e sostituzione dei colori con un clic.
Ottimizza con SVGO
Riduci i file con anteprime prima/dopo e precisione regolabile. Ottimizza tutti i file aperti in una volta.
PNG, JPG, WebP e ICO
Esporta a qualsiasi dimensione fino a 16384 px, con trasparenza, o copia il PNG direttamente negli appunti.
React, Vue e Svelte
Componenti JSX/TSX, React Native, Vue e Svelte puliti, con supporto per currentColor e props.
Più file insieme
Apri molti SVG come schede, poi ottimizzali in blocco o scaricali in uno ZIP di SVG o PNG.
Privato e offline
Nessun caricamento, nessun account. Il tuo lavoro resta salvato nel browser e l’app funziona offline dopo la prima visita.
Domande frequenti
Meglio data URI SVG in Base64 o codificati URL?
Per gli SVG, un data URI codificato URL è di solito più leggero del 20–30% rispetto al Base64 e si comprime meglio con gzip. Il Base64 è utile dove i caratteri speciali creano problemi.
Come ricoloro un’icona SVG usata nel CSS?
Usa lo snippet della maschera CSS. L’SVG diventa una maschera riempita dal background-color dell’elemento (currentColor per impostazione predefinita), così cambi il colore dell’icona con il CSS.
Posso riconvertire un data URI in SVG?
Sì. Incolla un URI data:image/svg+xml o una stringa Base64 nell’editor e viewsvg lo decodifica automaticamente in SVG.
I miei file SVG vengono caricati da qualche parte?
No. viewsvg funziona interamente nel tuo browser. I file vengono letti, visualizzati, ottimizzati e convertiti sul tuo dispositivo e niente viene inviato a un server. Dopo la prima visita funziona anche offline.
viewsvg è gratuito?
Sì. Tutte le funzioni sono gratuite, senza registrazione, senza filigrane e senza limiti sui file.