Vista previa / Editor de SVG

Cómo funciona la vista previa / editor de SVG

Qué hace la herramienta

La vista previa / editor de SVG renderiza el marcado SVG en vivo mientras lo editas y extrae metadatos (width, height, viewBox, recuento de elementos) para una inspección rápida. Un interruptor añade un fondo ajedrezado para que puedas ver claramente las zonas transparentes. La herramienta también genera un data URI codificado para URL, adecuado para usar directamente en background-image de CSS o en atributos src de HTML.

Casos de uso comunes para desarrolladores

Los diseñadores de iconos prueban los cálculos de viewBox y los grosores de trazo a diferentes tamaños. Los desarrolladores frontend verifican que un icono SVG editado a mano siga renderizando correctamente después de la optimización (manual o mediante SVGO). Los desarrolladores de email generan versiones compactas en data URI de marcas para incrustarlas en HTML. Los educadores demuestran cómo atributos como preserveAspectRatio y overflow afectan al renderizado.

Formatos de datos, tipos o variantes

La entrada es marcado XML SVG en bruto. La salida es el mismo SVG renderizado en un iframe aislado más un data URI codificado para URL (data:image/svg+xml;charset=utf-8,…). La métrica de recuento de elementos cuenta cada etiqueta de apertura (incluyendo defs, g, degradados y elementos anidados similares), dando una idea aproximada de la complejidad. Los valores de atributos extraídos se muestran en forma bruta.

Errores comunes y casos límite

Los recursos externos referenciados por elementos `use` o `image` con href no se cargarán dentro del iframe aislado. El JavaScript inline dentro de elementos script está bloqueado por el sandbox: las animaciones deben basarse en SMIL o en keyframes de CSS. Los SVG que dependen de una fuente específica que no esté instalada en el sistema usarán una alternativa por defecto; incrusta fuentes o usa fuentes del sistema para las vistas previas.

Cuándo usar esta herramienta vs código

Usa la herramienta del navegador para diseño puntual de iconos, depuración o generación de data URIs. Para assets de producción, pasa los SVG por SVGO con una configuración ajustada para eliminar metadatos y minificar el marcado, y usa un sistema de sprites o una integración adecuada con el bundler para cargar iconos en tu app en lugar de incrustar data URIs en todas partes.