Previsualització / Editor SVG

Com funciona la previsualització / editor d'SVG

Què fa l’eina

La previsualització / editor d'SVG renderitza el marcatge SVG en directe mentre l'edites i extreu metadades (amplada, alçada, viewBox, recompte d'elements) per a una inspecció ràpida. Un commutador afegeix un fons de quadres perquè puguis veure clarament les zones transparents. L'eina també genera un data URI codificat per a URL, adequat per usar directament a background-image de CSS o en atributs src d'HTML.

Casos d’ús habituals per a desenvolupadors

Els dissenyadors d'icones proven els càlculs del viewBox i els gruixos de traç a diferents mides. Els desenvolupadors frontend verifiquen que una icona SVG editada a mà encara es renderitza correctament després de l'optimització (manual o via SVGO). Els desenvolupadors d'email generen versions compactes en data URI de marques de la marca per incrustar-les en HTML. Els educadors demostren com atributs com preserveAspectRatio i overflow afecten el renderitzat.

Formats, tipus o variants de dades

L'entrada és marcatge XML SVG en brut. La sortida és el mateix SVG renderitzat en un iframe aïllat més un data URI codificat per a URL (data:image/svg+xml;charset=utf-8,…). La mètrica de recompte d'elements compta cada etiqueta d'obertura (incloent defs, g, degradats i elements imbricats similars), donant una idea aproximada de la complexitat. Els valors d'atribut extrets es mostren en forma bruta.

Errors habituals i casos límit

Els recursos externs referenciats per elements `use` o `image` amb href no es carregaran dins l'iframe aïllat. El JavaScript en línia dins d'elements script queda bloquejat pel sandbox — les animacions haurien de basar-se en SMIL o keyframes de CSS. Els SVG que depenen d'una font específica que no estigui instal·lada al sistema faran fallback a una per defecte; incrusta fonts o utilitza fonts del sistema per a les previsualitzacions.

Quan utilitzar aquesta eina vs codi

Utilitza l'eina del navegador per a disseny d'icones puntual, depuració o generació de data URI. Per a actius de producció, passa els SVG per SVGO amb una configuració ajustada per eliminar metadades i minificar el marcatge, i utilitza un sistema d'sprites o una integració adequada amb el bundler per carregar icones a la teva app en lloc d'incrustar data URI a tot arreu.