SVG in Base64 non viene visualizzato? Ecco come risolverlo

SVG in Base64 non viene visualizzato? Ecco come risolverlo

Questo problema compare continuamente nei progetti reali:

• Il tuo img src="data:image/svg+xml;base64,..." sembra valido, ma non viene renderizzato nulla.
• La stessa stringa SVG funziona in un punto e si rompe in uno sfondo CSS.
• Il bug è difficile da individuare in code review, ma costoso da debuggare.

Se la situazione ti suona familiare, questa guida ti offre un percorso chiaro e ripetibile per risolverla.

Perché è difficile da debuggare

Il problema raramente dipende da una sola riga rotta. Di solito è una catena di cause:

1. La sorgente SVG potrebbe essere già non valida.
2. La codifica potrebbe non corrispondere al contesto di destinazione.
3. HTML, CSS e JSON richiedono comportamenti di escaping diversi.
4. La pulizia di sicurezza e le regole di rendering variano in base all'ambiente.

Ecco perché uno stesso SVG può essere renderizzato in un contesto e fallire in un altro.

Cause principali più comuni (in ordine di priorità)

1. Prefisso MIME errato
   Usa data:image/svg+xml;base64, oppure data:image/svg+xml,.

2. Flusso di codifica Base64 non corretto
   btoa(svg) diretto può rompersi quando l'SVG contiene caratteri non ASCII.

3. Escaping incoerente tra contesti
   Soprattutto in CSS, caratteri come # e le virgolette possono rompere il caricamento.

4. Contenuto SVG rischioso o bloccato
   Script, gestori di eventi e riferimenti esterni possono essere rimossi o bloccati.

5. Struttura SVG rotta
   Un viewBox mancante, XML malformato o tag non validi possono impedire il rendering.

Come risolviamo il problema in SVGView

Invece di lasciare gli utenti a tentare a caso, lo affrontiamo su tre livelli ben distinti.

1) Livello di input: valida prima dell'importazione

In src/lib/svg/import-handler.ts, noi:

• imponiamo tipo e dimensione del file (fino a 10MB)
• eseguiamo parsing e validazione dell'XML con root <svg> obbligatoria
• restituiamo errori di parsing per una diagnosi più rapida

In questo modo gli input non validi vengono scartati subito.

2) Livello di sicurezza: sanitizza prima dell'anteprima

In src/lib/svg/sanitizer.ts, rimuoviamo:

• <script>
• attributi gestore di eventi on*
• <foreignObject>
• riferimenti esterni (href, xlink:href, src)

Questo migliora la sicurezza e riduce l'incoerenza di rendering.

3) Livello di output: fornisci sia Data URI Base64 sia URL-encoded

In src/lib/svg/exporter.ts:

export function exportToDataUri(svg: string): string {
  const encoded = btoa(unescape(encodeURIComponent(svg)));
  return `data:image/svg+xml;base64,${encoded}`;
}

export function exportToDataUriEncoded(svg: string): string {
  const encoded = encodeURIComponent(svg);
  return `data:image/svg+xml,${encoded}`;
}

Così puoi:

• scegliere Base64 per una compatibilità più sicura
• scegliere la codifica URL per un output più corto e leggibile
• ottenere sempre il tipo MIME corretto image/svg+xml

Quale codifica dovresti usare?

1. Ambiente di destinazione sconosciuto: scegli prima Base64
2. Hai bisogno di stringhe più corte e leggibili: scegli la codifica URL
3. Uso come sfondo CSS: preferisci la codifica URL con escaping corretto

Usa direttamente questi strumenti:

• SVG to Data URI
• SVG to CSS Background
• SVG Optimizer

Una checklist di troubleshooting ripetibile

1. Conferma il prefisso: data:image/svg+xml;base64, oppure data:image/svg+xml,
2. Conferma una root <svg> valida e un viewBox
3. Conferma un flusso di codifica sicuro per UTF-8
4. Conferma l'escaping per i contesti CSS/JSON
5. Sanitizza prima dell'export
6. Passa da Base64 a codifica URL e viceversa per un controllo rapido

FAQ

Perché funziona in <img> ma fallisce in CSS?

Perché il parsing delle stringhe CSS richiede un escaping più rigoroso. In quel contesto la codifica URL di solito è più sicura.

Basta sempre passare a image/svg+xml?

No. Il MIME è solo una parte del problema. Codifica, escaping e validità dell'SVG contano ancora.

Data URI è sempre migliore dei file SVG esterni?

No. Data URI è ottimo per piccoli asset inline. Asset grandi o riutilizzati frequentemente spesso sono migliori come file esterni.

Riepilogo

"Base64 SVG non viene visualizzato" non è un singolo bug. È un problema di pipeline.

Una volta standardizzato il flusso come validazione -> sanitizzazione -> doppia codifica -> adattamento al contesto, il problema diventa prevedibile e gestibile.