# Saneador de SVG: Limpia el Código de Figma e Illustrator al Instante
Pega cualquier SVG exportado desde Figma, Adobe Illustrator o el inspector del navegador y obtén un archivo vectorial limpio, optimizado y listo para producción.
# ¿Por qué los SVG exportados son tan sucios?
Cuando exportas un SVG desde Figma, recibes un archivo cargado de atributos
que solo tienen sentido dentro de la aplicación: data-name, xml:space, referencias a capas internas y metadatos de diseño que no son necesarios en la web. El
resultado es un SVG que puede pesar un 40-70% más de lo necesario.
La situación es aún peor con Inkscape, que añade sus propios espacios de
nombres (inkscape:, sodipodi:). Un SVG de Illustrator puede
incluir etiquetas <metadata>, declaraciones XML y atributos de versión
completamente irrelevantes para el renderizado en el navegador.
# Qué elimina el Saneador de SVG
Metadatos de editor
Elimina las etiquetas <metadata>, <title> y
<desc> que Figma e Illustrator añaden automáticamente y que no aportan
nada al renderizado web.
Namespaces de Inkscape
Borra todos los elementos con prefijo inkscape: y sodipodi:, que solo sirven para que Inkscape recuerde el estado del editor y no tienen
efecto visual en ningún navegador.
Atributos innecesarios
Suprime xml:space, version, xmlns:*
superfluos y los atributos data-* de Figma que inflan el tamaño sin añadir
funcionalidad.
Grupos vacíos
Detecta y elimina todos los elementos <g> vacíos que los editores
dejan como artefactos de capas eliminadas o agrupaciones de diseño sin contenido.
Declaraciones XML
Retira la declaración <?xml version="1.0"?> y el DOCTYPE, que son
restos de XML standalone innecesarios cuando el SVG se embebe directamente en HTML.
Opciones de minificación
Además de limpiar, puedes minificar el resultado para obtener el SVG en una sola línea, reduciendo aún más el peso para producción, o formatearlo con indentación para poder editarlo después.
# Cuándo usar un Saneador de SVG
- Al exportar iconos desde Figma: antes de integrarlos en tu sprite SVG o en un componente de React/Vue.
- Al preparar ilustraciones para la web: un SVG de 200 KB puede quedar en 60 KB solo eliminando metadatos.
- Al añadir iconos a un proyecto open source: los revisores agradecen SVGs limpios sin artefactos de editor.
- Al copiar SVGs del inspector de Chrome: el inspector añade atributos de estilo calculado que no deberían estar en el archivo fuente.
# Seguridad y privacidad
Todo el proceso ocurre en tu navegador usando el DOMParser nativo y
XMLSerializer. El código SVG que pegas nunca abandona tu dispositivo: no se
envía a ningún servidor ni se almacena en ninguna base de datos.