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, cantidad de elementos) para una inspección rápida. Un interruptor agrega un fondo a cuadros para que puedas ver claramente las regiones transparentes. La herramienta también produce un data URI codificado en URL, adecuado para usar directamente en CSS background-image o en atributos src de HTML.

Casos de uso comunes para desarrolladores

Los diseñadores de íconos prueban los cálculos del viewBox y los grosores de trazo en distintos tamaños. Los desarrolladores frontend verifican que un ícono 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 el renderizado.

Formatos, tipos o variantes de datos

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 en URL (data:image/svg+xml;charset=utf-8,…). La métrica de cantidad 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 cruda.

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 deberían basarse en SMIL o keyframes de CSS. Los SVG que dependen de una fuente específica que no esté instalada en el sistema usarán una fuente predeterminada; 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 de íconos puntual, 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 íconos en tu app en lugar de incrustar data URIs en todas partes.