Come si usa
- Trascina un file .svg nell’area di rilascio, fai clic per sceglierne uno oppure incolla un’immagine.
- Lascia Converti in su Mantieni originale per codificare il markup SVG vero e proprio, oppure scegli PNG, JPEG o WebP per trasformarlo in pixel.
- Se lo rasterizzi, imposta una Larghezza massima per controllare la dimensione in pixel.
- Copia l’output background-image CSS per un foglio di stile, oppure la versione data URI, Base64 puro, tag img o Markdown.
SVG come data URI
SVG (Scalable Vector Graphics, tipo MIME image/svg+xml) descrive le forme come testo XML, quindi resta nitido a qualsiasi dimensione. Il suo Base64 di solito inizia con PHN2Zy (cioè <svg codificato) oppure con PD94bWw quando il file comincia con una dichiarazione XML.
Quando un SVG viene usato come immagine, l’elemento radice deve avere l’attributo xmlns="http://www.w3.org/2000/svg". Molti frammenti inline copiati dall’HTML lo omettono e in quel caso il data URI non mostra nulla. In modalità immagine anche le risorse esterne vengono bloccate, quindi i web font e le immagini collegate all’interno dell’SVG non vengono caricati: converti prima il testo in tracciati o incorpora quelle risorse.
Base64 o codifica URL?
Dato che SVG è già testo, un data URI può contenere direttamente il markup, con solo pochi caratteri in codifica percentuale (<, >, #, % e le virgolette). Per un’icona tipica in CSS questa forma è più corta del Base64 e si comprime meglio con gzip. Base64 è la scelta più sicura quando la stringa passa attraverso sistemi che alterano virgolette o caratteri speciali, oppure quando un’API si aspetta Base64.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* Codifica percentuale */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");Per creare la forma in codifica percentuale, usa il Generatore di data URI e scegli Codifica percentuale.
Sanifica gli SVG non attendibili
Un SVG può contenere elementi <script>, attributi di gestione degli eventi come onload e link ad altri documenti. I browser non eseguono gli script di un SVG mostrato tramite <img> o uno sfondo CSS, ma lo stesso file inserito inline nell’HTML o aperto da solo può eseguirli. Se gli utenti possono caricare file SVG nella tua applicazione, sanificali, per esempio con DOMPurify, prima di salvarli o incorporarli. Base64 nasconde il markup solo a un’occhiata veloce, ma non lo rende sicuro.
Domande frequenti
Per gli SVG è meglio Base64 o la codifica URL?
Per gli SVG nei CSS la codifica URL di solito produce una stringa più corta e resta leggibile. Base64 è più robusto quando la stringa passa attraverso altri sistemi o quando un’API richiede Base64.
Perché il mio data URI SVG non viene visualizzato?
xmlns sull’elemento radice, un # non codificato in un URI in codifica percentuale e font o immagini che l’SVG carica da altri file.Posso convertire un SVG in una stringa Base64 PNG?
Sì. Scegli PNG come formato di destinazione. Il browser trasforma l’SVG in pixel e l’opzione Larghezza massima ti permette di ottenere un risultato più piccolo.