Come si usa
- Incolla la stringa Base64 o l’URI data:image/svg+xml;base64.
- Controlla l’anteprima, il formato rilevato e le dimensioni.
- Lascia SVG in Scarica come. Se l’input è un SVG, il file viene salvato come testo SVG.
- Scarica il file .svg e aprilo in un editor se vuoi leggere o modificare il markup.
Riconoscere un SVG nel Base64
A differenza degli altri formati di immagine, SVG è semplice testo XML. Un file che inizia con <svg produce un Base64 che comincia con PHN2Zy, mentre uno che inizia con una dichiarazione XML (<?xml) comincia con PD94bWwg. Gli SVG in Base64 sono comuni nelle immagini di sfondo CSS, nei set di icone, nelle esportazioni degli strumenti di design e nei modelli di email. Il tipo MIME è image/svg+xml.
Molti data URI SVG non sono affatto in Base64, ma testo con codifica percentuale, come data:image/svg+xml,%3Csvg.... Questo strumento si aspetta Base64, quindi per analizzarli usa invece il generatore di data URI.
Leggere il codice SVG
L’anteprima mostra come viene resa la grafica, ma spesso la parte interessante è il markup: dati dei tracciati, colori, un viewBox o font incorporati. Scarica il file come Originale o SVG e aprilo in un qualsiasi editor di testo, oppure incolla lo stesso Base64 in Decodifica Base64 per vedere subito l’XML come testo.
Da raster a SVG: un contenitore, non una vettorializzazione
Se i dati Base64 sono un PNG, un JPEG o un’altra bitmap, scegliendo SVG ottieni un file SVG che contiene i pixel originali in un elemento <image>. È utile quando uno strumento accetta solo file SVG, ma non ricalca l’immagine trasformandola in forme: l’immagine diventa comunque sfocata quando la ingrandisci, e il file è più grande della bitmap perché al suo interno i pixel sono memorizzati in Base64. Per ottenere veri tracciati vettoriali usa un software di vettorializzazione come Potrace o la funzione Vettorizza bitmap (Trace Bitmap) di Inkscape.
Gestire SVG non attendibili
Un SVG può contenere elementi <script>, attributi di gestione degli eventi e link a risorse esterne. I browser bloccano tutto questo quando un SVG viene mostrato come immagine, tramite un tag <img> o uno sfondo CSS. Gli script possono essere eseguiti e le risorse esterne caricate quando il file viene aperto direttamente in una scheda del browser o il suo markup viene incollato inline in una pagina. Controlla o sanifica gli SVG di provenienza sconosciuta prima di usarli in questo modo.
Domande frequenti
Può trasformare un PNG in un vero SVG vettoriale?
No. Convertire una bitmap in SVG si limita a incorporare l’immagine in un file SVG. Il risultato si ridimensiona come la bitmap originale, non come un disegno vettoriale.
Perché il mio data URI SVG non viene decodificato?
;base64,. In caso contrario, l’SVG è in codifica percentuale o in testo semplice e non è Base64. Il generatore di data URI è in grado di analizzarlo.È sicuro decodificare un SVG di provenienza sconosciuta?
Decodificarlo e salvarlo è innocuo, perché il risultato è solo testo. Gli script contenuti in un SVG possono essere eseguiti solo quando lo apri come documento o lo inserisci inline in una pagina web.
Perché mancano font o immagini collegate dopo la conversione di un SVG in PNG?
Per rasterizzare un SVG, il browser lo carica come immagine, e in questa modalità un SVG non può recuperare file esterni. Font web e immagini collegate vengono ignorati e al loro posto si usano i font predefiniti. Incorpora font e immagini nell’SVG per renderlo autosufficiente.