Anteprima / Editor SVG

Come funziona l’Anteprima / Editor SVG

Cosa fa lo strumento

L’Anteprima / Editor SVG renderizza il markup SVG in tempo reale mentre lo modifichi ed estrae metadati (width, height, viewBox, conteggio elementi) per un’ispezione rapida. Un interruttore aggiunge uno sfondo a scacchi così puoi vedere chiaramente le aree trasparenti. Lo strumento produce anche una data URI con codifica URL adatta all’uso diretto in CSS background-image o negli attributi src HTML.

Casi d’uso comuni per sviluppatori

I designer di icone testano la matematica del viewBox e gli spessori del tratto a dimensioni diverse. Gli sviluppatori frontend verificano che un’icona SVG modificata a mano continui a renderizzare correttamente dopo l’ottimizzazione (manuale o tramite SVGO). Gli sviluppatori email generano versioni compatte in data URI dei marchi di brand per l’inlining in HTML. Gli insegnanti mostrano come attributi come preserveAspectRatio e overflow influenzano il rendering.

Formati, tipi o varianti dei dati

L’input è markup XML SVG grezzo. L’output è lo stesso SVG renderizzato in un iframe sandbox più una data URI con codifica URL (data:image/svg+xml;charset=utf-8,…). La metrica del conteggio elementi conta ogni tag di apertura (inclusi defs, g, gradienti e altri elementi annidati simili), dando un’idea approssimativa della complessità. I valori degli attributi estratti vengono mostrati in forma grezza.

Errori comuni e casi limite

Le risorse esterne referenziate da elementi `use` o `image` con href non verranno caricate all’interno dell’iframe sandbox. JavaScript inline dentro elementi script è bloccato dalla sandbox: le animazioni dovrebbero basarsi su SMIL o keyframe CSS. Gli SVG che dipendono da un font specifico non installato nel sistema useranno un font di fallback; incorpora i font o usa font di sistema per le anteprime.

Quando usare questo strumento rispetto al codice

Usa lo strumento nel browser per progettazione di icone una tantum, debug o generazione di data URI. Per asset di produzione, passa gli SVG attraverso SVGO con una configurazione ottimizzata per rimuovere metadati e minimizzare il markup, e usa un sistema di sprite o una corretta integrazione con il bundler per caricare le icone nella tua app invece di incorporare data URI ovunque.