Vista previa e inspector SVG

Pega o arrastra un SVG y lo verás renderizado al instante, con un panel de estadísticas que cubre dimensiones, viewBox, desglose de elementos, colores únicos y marcas de seguridad. La vista previa se ejecuta dentro de un iframe aislado (sandbox) con los scripts y el acceso same-origin deshabilitados, por lo que los SVG maliciosos no pueden ejecutar código. Exporta la imagen como SVG o PNG, alterna entre fondo blanco, negro o cuadros transparentes, o cambia a la vista de código fuente para inspeccionar el marcado.

Especificaciones

• SVG 2 Specification
• MDN: SVG

Casos de uso comunes

• Previsualiza rápidamente un icono o ilustración SVG antes de incrustarlo
• Revisa si un SVG no confiable contiene scripts o controladores de eventos
• Verifica el viewBox y las dimensiones intrínsecas de un SVG
• Cuenta colores únicos en un SVG (útil para extraer paletas u optimizar)
• Convierte un SVG a PNG sobre un fondo coloreado o transparente
• Inspecciona el desglose de elementos para detectar usos inesperados de <script> o <foreignObject>

Funcionalidades

• Vista previa aislada — el SVG se renderiza dentro de un iframe con sandbox="" para que los scripts y controladores de eventos no puedan ejecutarse
• Alternador de fondo: blanco, negro o patrón de cuadros transparentes
• Panel de estadísticas: dimensiones, viewBox, relación de aspecto, tamaño en bytes, recuento de elementos, desglose de elementos principales, colores únicos
• Las marcas de seguridad destacan SVG que contienen <script>, controladores de eventos, referencias externas o animaciones
• Exporta como SVG o PNG de alta resolución (2x) — el fondo seleccionado se incrusta en la exportación PNG
• Vista previa en pantalla completa para inspeccionar detalles
• Vista de código fuente con resaltado de sintaxis
• Copia el SVG normalizado al portapapeles

Ejemplos

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs><rect width="100" height="100" fill="url(#g)"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="20" fill="#ef4444"><animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/></circle></svg>

Consejos

• Prefiere viewBox en lugar de width/height fijos para que la imagen escale correctamente
• Si se encienden las marcas Scripts o Controladores de eventos, el SVG ejecutaría código al incrustarse — elimínalos antes de confiar en él
• El fondo de cuadros ayuda a detectar transparencia no deseada; cambia a blanco o negro para previsualizar cómo se verá en diferentes páginas
• La exportación PNG se renderiza a 2× de resolución; usa la exportación SVG para conservar la calidad vectorial
• Las referencias externas (hrefs http://) no se cargarán en la vista previa aislada — es intencional