Visor SVG
Editor de código SVG y vista previa en línea
¿Qué es el Visor SVG?
El Visor SVG es una herramienta en línea para editar código SVG y ver vista previa en tiempo real. Permite escribir o pegar código SVG directamente y ver el resultado renderizado al instante. SVG (Gráficos Vectoriales Escalables) es un formato de imagen vectorial basado en XML, ampliamente utilizado en diseño web, creación de iconos y visualización de datos.
Esta herramienta admite vista previa en tiempo real, visualización de código fuente, descarga de archivos SVG y más.
SVG es imagen y código a la vez: puede contener trazados, texto, filtros, animaciones, referencias externas y estilos. Un visor ayuda a revisar forma, viewBox, escalado y marcado rápidamente, pero los SVG de fuentes desconocidas deben tratarse con cuidado. Antes de insertarlos en una web conviene comprobar tamaño, accesibilidad, sanitización y si existen scripts, enlaces o recursos externos.Cómo usar
Cómo usar
- Escribe o pega código SVG en el editor izquierdo
- El panel derecho muestra la renderización del SVG en tiempo real
- Haz clic en el botón 'Source' para ver el código SVG formateado
- Haz clic en el botón 'Descargar' para guardar el SVG como archivo
- Haz clic en el botón 'Copiar SVG' para copiar el código al portapapeles
Seguridad con SVG
- Pega SVG solo de fuentes de confianza siempre que sea posible: los SVG pueden incluir scripts, referencias externas o estilos no deseados.
- Antes de descargar o incrustar, verifica el viewBox, las dimensiones, los rellenos, los trazos y la renderización del texto al tamaño objetivo.
Casos de uso
Principio técnico
El código SVG fuente se analiza con new DOMParser().parseFromString(source, 'image/svg+xml'), que devuelve un Document construido con reglas XML en lugar del analizador permisivo de HTML. El analizador comprueba la correcta formación, muestra un nodo <parsererror> en caso de marcado inválido y expone el árbol SVG a scripts y CSS exactamente igual que el resto del DOM. Elementos como <path>, <circle>, <rect>, <g>, <text>, <defs>, <linearGradient> y <filter> son nodos de primera clase con sus propios atributos y objetivos de eventos. El sistema de coordenadas se rige por el atributo viewBox. viewBox="minX minY width height" define el espacio de coordenadas interno, y preserveAspectRatio (por defecto xMidYMid meet) decide cómo se mapea ese espacio al viewport renderizado: meet preserva todo el viewBox añadiendo barras negras, slice rellena el viewport recortando y none estira de forma no uniforme. Los comandos de trayectoria dentro de d usan M (moveTo), L (lineTo), C (bézier cúbica), Q (cuadrática), A (arco elíptico) y Z (cerrar trayectoria); cada comando tiene una forma absoluta en mayúscula y una forma relativa en minúscula. La seguridad de SVG necesita un manejo explícito porque el formato es ejecutable: <script>, foreignObject que contiene HTML, xlink:href a URLs externas, onload y otros atributos de manejadores de eventos pueden ejecutar JavaScript en el contexto de la página si el SVG se inyecta en línea. DOMPurify con el perfil SVG o un saneador del lado del servidor es la mitigación estándar al aceptar SVG de terceros. La rasterización a PNG se realiza dibujando el SVG (cargado como HTMLImageElement desde una URL de Blob) en un canvas con drawImage, y luego llamando a canvas.toBlob('image/png') para la descarga.
- Analizador: new DOMParser().parseFromString(source, 'image/svg+xml') devuelve un Document XML estricto con un nodo <parsererror> en caso de error
- viewBox: "minX minY width height" establece el espacio de coordenadas interno; preserveAspectRatio xMidYMid meet/slice controla ajuste vs recorte
- Comandos de trayectoria: M moveTo, L lineTo, C bézier cúbica, Q cuadrática, A arco, Z cerrar trayectoria; mayúscula = absoluta, minúscula = relativa
- Superficie de seguridad: <script> en línea, foreignObject, xlink:href a URLs remotas y manejadores onload/onclick se ejecutan como JavaScript
- Saneamiento: DOMPurify con USE_PROFILES: { svg: true } elimina scripts y manejadores de eventos antes de insertar SVG de terceros
- Exportación a PNG: cargar el SVG en HTMLImageElement mediante URL de Blob, dibujar en canvas con drawImage, canvas.toBlob('image/png') para descarga
- Línea base del navegador: SVG 1.1 en todos los navegadores modernos desde 2011; las características de SVG 2 (mejoras en texto sobre trayectoria) son parciales
Ejemplos
Círculo
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>Rectángulo
<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="60" rx="8" fill="#10b981" />
</svg>Estrella
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#f59e0b" />
</svg>Preguntas frecuentes
¿Qué hace el visor?
Renderiza el código SVG que pegas, permite hacer zoom y desplazarte, muestra el código fuente con resaltado de sintaxis e informa de las dimensiones de la imagen y del viewBox. Útil para inspeccionar SVG de terceros, depurar datos de path y previsualizar iconos antes de añadirlos al proyecto.
¿Se sube el SVG?
No. La página analiza y renderiza el SVG localmente en tu navegador: el SVG no es más que marcado, y el navegador ya sabe cómo mostrarlo. El código pegado nunca sale a la red.
¿Por qué mi SVG se ve distinto aquí que en mi software de diseño?
El SVG se renderiza según el agente de usuario. Navegadores, Figma, Illustrator e Inkscape interpretan ciertos casos extremos (renderizado de texto, efectos de filtro, gradientes en malla, clip-paths) de forma diferente. El visor muestra lo que hace el navegador, que es lo que verán tus usuarios finales en HTML.
¿Puedo editar el SVG aquí?
Puedes editar el código fuente a la izquierda y volver a renderizarlo. Para edición visual (arrastrar puntos, modificar paths) usa un editor SVG real como Inkscape, Figma o Boxy SVG. Esta página es un visor con ediciones rápidas de texto.
¿Cómo llevo el SVG a mi proyecto?
Copia el código fuente. La mayoría de frameworks frontend aceptan SVG en línea directamente en JSX/HTML. Para usarlo como fondo, ponlo en tu carpeta de assets y referéncialo con url(...). Para usarlo como fuente de iconos, pásalo por una etapa de build como svgo más un generador de sprites.
¿Por qué mi SVG es enorme?
Muchas exportaciones de SVG incluyen metadatos del editor (XMP de Adobe Illustrator, espacios de nombres :inkscape: de Inkscape), defs sin usar, comentarios y datos de path muy verbosos. Pásalo por SVGO (en línea o por CLI) para limpiarlos: suele quedar entre un 30 y un 70 % más pequeño sin cambios visuales.
¿Se cargan recursos externos?
La mayoría de visores bloquean cargas externas (no descargan URL referenciadas en <image href> o <use href>) por seguridad. Incrusta los bitmaps referenciados como URI data: y convierte los <use> con href externo en copias en línea si tu SVG depende de ellos.