SVG in ICO non funziona? Cause comuni (font, immagini esterne, ViewBox)

SVG è uno dei migliori formati sorgente per generare file ICO. Essendo un formato vettoriale, SVG si ridimensiona a qualsiasi dimensione senza perdita di qualità, il che lo rende ideale per produrre i livelli a diverse dimensioni (da 16 a 256 pixel) necessari per un buon file ICO. In teoria, carichi un SVG su Any2ICO e ottieni istantaneamente un file ICO nitido e multi-dimensione.

In pratica, i file SVG possono essere complicati. La specifica SVG è ampia e complessa, e diversi strumenti creano SVG con presupposti diversi su come il file verrà renderizzato. Un SVG che appare perfetto in Adobe Illustrator o Figma potrebbe renderizzarsi in modo errato, parziale o non renderizzarsi affatto quando viene aperto tramite la Canvas API del browser, il motore di rendering utilizzato dai convertitori basati su browser. Il risultato potrebbe essere un'icona vuota, un'icona con testo mancante, un'icona nella scala sbagliata o un'icona con pezzi mancanti.

La buona notizia è che i problemi sono ben noti e le soluzioni sono semplici. Questo articolo tratta le cause più comuni per cui la conversione da SVG a ICO fallisce o produce risultati inaspettati, e fornisce una soluzione chiara per ciascuna. Se vuoi il percorso più rapido verso il successo, inizia dalla checklist nella prossima sezione.

Checklist rapida: correggi il tuo SVG prima della conversione

Prima di approfondire le spiegazioni dettagliate, ecco una checklist rapida che risolve la maggior parte dei problemi nella conversione SVG in ICO. Segui questi punti per primi; se il tuo problema si risolve, non hai bisogno di leggere oltre.

1. Aggiungi o correggi l'attributo viewBox. Apri il tuo SVG in un editor di testo e controlla l'elemento radice <svg>. Dovrebbe avere un attributo viewBox come viewBox="0 0 100 100" che definisce il sistema di coordinate. Se manca, aggiungilo con valori corrispondenti alle dimensioni del tuo design.

2. Converti tutto il testo in contorni (tracciati). Seleziona tutti gli elementi di testo nel tuo editor vettoriale e convertili in contorni o tracciati. In Illustrator, usa Type > Create Outlines. In Figma, fai clic destro e seleziona Flatten. In Inkscape, usa Path > Object to Path. Questo elimina completamente le dipendenze dai font.

3. Rimuovi o incorpora i riferimenti esterni. Cerca nel tuo file SVG riferimenti href, xlink:href e url() che puntano a file esterni (immagini, font, CSS). Incorpora queste risorse direttamente nell'SVG oppure rimuovile se non sono essenziali.

4. Sostituisci il CSS esterno con stili inline. Se il tuo SVG fa riferimento a un foglio di stile esterno, copia le regole CSS pertinenti direttamente in un blocco <style> all'interno dell'SVG, oppure convertile in attributi style inline su ciascun elemento.

5. Imposta larghezza e altezza esplicite. Anche se non sempre necessario, aggiungere gli attributi width e height all'elemento radice <svg> aiuta la Canvas API a determinare la dimensione di rendering corretta. Usa valori pari o superiori a 256 pixel per i migliori risultati.

Font e rendering del testo

Il testo è la principale fonte di problemi nella conversione SVG. Quando un SVG contiene elementi <text>, il renderer necessita di accesso al font specificato per visualizzare il testo correttamente. In un'applicazione di design come Illustrator o Figma, il font è installato sul tuo computer, quindi tutto appare correttamente. Ma quando l'SVG viene renderizzato tramite la Canvas API del browser per la conversione in ICO, la situazione è molto diversa.

La Canvas API può utilizzare solo i font disponibili per il browser al momento del rendering. Se il tuo SVG specifica font-family: "Proxima Nova" e quel font non è installato sul sistema dell'utente né caricato come web font, il browser sostituisce un font predefinito (solitamente un generico sans-serif o serif). Questo cambia l'aspetto del testo: la spaziatura delle lettere si modifica, i caratteri possono essere più larghi o più stretti e il layout complessivo può rompersi. In alcuni casi, il testo potrebbe non renderizzarsi affatto se l'SVG utilizza funzionalità avanzate dei font o legature che il font sostitutivo non supporta.

La soluzione affidabile è convertire tutto il testo in contorni (chiamata anche "conversione in tracciati" o "appiattimento del testo"). Questo sostituisce ogni carattere testuale con un tracciato vettoriale che ne descrive la forma esatta. L'SVG risultante non fa più riferimento ad alcun font perché le forme delle lettere sono disegnate come tracciati geometrici. Il file SVG sarà leggermente più grande, ma verrà renderizzato in modo identico su qualsiasi sistema, in qualsiasi browser e tramite qualsiasi Canvas API, indipendentemente dai font installati.

In Illustrator: seleziona tutto il testo, poi vai su Type > Create Outlines. In Figma: seleziona i livelli di testo, fai clic destro e scegli Flatten. In Inkscape: seleziona il testo, poi usa Path > Object to Path. Salva sempre separatamente l'SVG originale modificabile prima di convertire in contorni, poiché il testo convertito in contorni non può più essere modificato come testo.

Immagini esterne e riferimenti

I file SVG possono fare riferimento a risorse esterne: immagini caricate tramite <image href="/it/logo.png">, font caricati tramite @font-face con un URL, file CSS collegati tramite <?xml-stylesheet?>, e pattern o gradienti che fanno riferimento ad altri file SVG. Quando l'SVG viene aperto come file autonomo in un convertitore basato su browser, questi riferimenti esterni quasi sempre non riescono a caricarsi.

La Canvas API renderizza l'SVG in un contesto isolato dove le richieste cross-origin vengono bloccate per motivi di sicurezza. Un elemento <image> che punta a https://example.com/logo.png non verrà caricato perché il browser blocca il fetch cross-origin. Il risultato è uno spazio vuoto dove l'immagine dovrebbe apparire. Lo stesso vale per i font ospitati esternamente, i fogli di stile e qualsiasi risorsa referenziata tramite URL.

Anche i percorsi relativi come href="/it/logo.png" non funzioneranno perché l'SVG viene elaborato in memoria dalla Canvas API, non servito da una directory dove i percorsi relativi possano risolversi. Non esiste un contesto di file system a cui l'SVG possa fare riferimento.

La soluzione è incorporare tutte le risorse esterne direttamente nell'SVG. Per le immagini, convertile in URI dati in formato base64: <image href="data:image/png;base64,iVBOR...">. Per i font, usa una dichiarazione @font-face codificata in base64 all'interno di un blocco <style> nell'SVG (anche se convertire il testo in contorni è solitamente più semplice e affidabile). Per il CSS, copia tutte le regole in un elemento <style> inline all'interno del tag <svg>.

Problemi con viewBox, larghezza e altezza

L'attributo viewBox definisce il sistema di coordinate di un SVG. Indica al renderer quale porzione dell'infinito canvas SVG visualizzare e come ridimensionare il contenuto. Quando viewBox è assente o non corretto, i risultati vanno da un output vuoto a un'icona che mostra solo un angolo del design o che viene renderizzata con proporzioni sbagliate.

viewBox mancante: Se l'SVG ha width e height ma nessun viewBox, alcuni renderer dedurranno il viewBox dalle dimensioni, ma la Canvas API potrebbe non farlo. L'approccio più sicuro è includere sempre un viewBox esplicito. Se il tuo SVG è progettato a 100x100 unità, aggiungi viewBox="0 0 100 100" all'elemento radice.

viewBox non corrisponde al contenuto: Se le coordinate del viewBox non comprendono tutto il contenuto dell'SVG, parti del design verranno tagliate. Ad esempio, se la tua icona ha elementi che si estendono fino a x=120 ma il viewBox copre solo da 0 a 100, le 20 unità più a destra sono invisibili. Apri l'SVG in un editor di testo, esamina i valori del viewBox e regolali per contenere tutti gli elementi visibili.

Larghezza/altezza impostate a 0 o a valori molto piccoli: Alcuni strumenti di esportazione SVG impostano larghezza e altezza a valori molto piccoli come 1px o 0, affidandosi al CSS per ridimensionare l'SVG quando viene visualizzato in una pagina web. Quando la Canvas API legge queste dimensioni, potrebbe renderizzare l'SVG a 1x1 pixel e poi scalarlo, producendo un risultato completamente vuoto o molto sfocato. Imposta larghezza e altezza ad almeno 256 pixel per fornire alla Canvas API una dimensione di rendering ragionevole.

Dimensioni in percentuale: Un SVG con width="100%" height="100%" non ha una dimensione intrinseca. La Canvas API necessita di valori assoluti in pixel per creare una superficie di rendering. Sostituisci le dimensioni in percentuale con valori assoluti come width="512" height="512".