pulsa ⌘K para cambiar de herramienta
IMAGE

Visor y Renderizador SVG

Pega el código SVG y previsualiza la imagen renderizada.

local
svg-viewer
§01 ACERCA DE ESTA HERRAMIENTA

Descripción general

Los archivos SVG son documentos XML, lo que los hace fáciles de editar a mano pero incómodos de inspeccionar: no puedes ver el resultado sin representarlo. Esta herramienta representa al instante el marcado SVG que pegues sobre un fondo de cuadros, para que las zonas transparentes queden visibles. Antes de representarlo, el marcado pasa por DOMPurify con los perfiles svg y svgFilters, que eliminan los elementos <script> y los atributos manejadores de eventos on*. Todo se ejecuta en tu navegador.

Cómo se usa

  1. Pega o escribe tu marcado en el campo SVG source. Por defecto se carga un círculo de ejemplo.
  2. Observa cómo el panel Preview (sanitized) se actualiza a medida que escribes: no hay ningún botón que pulsar.
  3. Modifica atributos como fill, width o viewBox y comprueba el efecto de inmediato.

Ejemplos

  • Ajustar el color de un icono: cambia fill="#0060c0" por fill="#e0403f" y confirma el resultado antes de dejarlo fijo.
  • Depurar un trazado: pega un <path d="…"> exportado de una herramienta de diseño para comprobar si la geometría es la que esperas.
  • Verificar una duda de saneamiento: pega un SVG que contenga <script> y confirma que se representa sin el script.

Notas

Como el saneamiento elimina los scripts, las animaciones basadas en SMIL o CSS pueden representarse, pero los comportamientos interactivos no. Las referencias externas (imágenes remotas, tipografías) también pueden quedar bloqueadas por el saneador o por tu navegador.

FAQ
¿Se sube mi SVG a un servidor?
No. El marcado se sanea y se representa por completo en tu navegador. Nada sale de tu equipo.
¿Por qué mi SVG se ve distinto del archivo original?
La vista previa se sanea con DOMPurify usando sus perfiles de SVG y de filtros SVG: los elementos script, los atributos manejadores de eventos y el resto de contenido que no es SVG se eliminan antes de representarlo, así que las partes interactivas o con scripts no aparecerán.
¿Es seguro previsualizar archivos SVG de origen no confiable?
Más seguro que abrirlos directamente, porque DOMPurify elimina los scripts y los manejadores de eventos antes de que el marcado llegue al DOM. Aun así, trata los archivos no confiables con cuidado en otros contextos: un SVG en bruto abierto en una pestaña del navegador puede ejecutar JavaScript.