Pega SVG o elige un archivo y selecciona el componente de destino. Revisa el resultado: eliminar metadatos, elementos activos o atributos puede cambiar el SVG.
Se ejecuta localmente en tu navegadorEsta página limpia código SVG en el navegador y entrega el mismo dibujo como componente de React, Vue o Svelte. Pega el código o elige un archivo .svg local: la vista previa, los contadores de bytes y el código generado salen del elemento ya limpiado. No se sube nada y la página sigue funcionando con la red desconectada.
La limpieza es conservadora con el dibujo y estricta con todo lo que puede ejecutarse o descargar algo: las coordenadas, los id, las clases y el CSS local se mantienen tal cual, mientras que los scripts, los elementos de animación, los atributos de evento y las referencias remotas se eliminan. Revisa la vista previa antes de usar el resultado, porque quitar una animación o una regla de estilo remota cambia lo que hace el archivo.
Se eliminan: <script>, <foreignObject>, <iframe>, <object>, <embed>, <audio>, <video> y los elementos de animación <animate>, <animateMotion>, <animateTransform> y <set>; todos los atributos de evento on*; los valores de href y xlink:href que no sean referencias internas #id; cualquier atributo cuyo valor llame a una url() remota; los bloques <style> con @import o con url() remota; los comentarios, <metadata> y <desc>. Se conservan: los datos de trazado, los id, las clases, los atributos de presentación como rx, opacity o transform, y el CSS que solo apunta dentro del archivo. En las pruebas url(#g1) sobrevivió y style="fill:url(https://…)" no.
Se reescribe la raíz: si no tiene viewBox se calcula a partir de width y height, o se usa 0 0 24 24 cuando no hay ninguno; después se quitan width y height, se añade xmlns y se compactan los espacios entre etiquetas. No es un minificador: los números no se tocan, así que un trazado «M 4.000 4.0» conserva sus ceros, y un icono pequeño puede crecer al sumar viewBox y xmlns. El icono de ejemplo pasó de 310 a 248 bytes, y los contadores usan bytes UTF-8, por lo que un texto CJK cuenta lo que realmente ocupa.
En React se genera un componente de función que reparte {...props} en la raíz, y los nombres de atributo se convierten donde el framework lo exige: class pasa a className y stroke-linecap, fill-opacity, font-size, text-anchor, stop-color o clip-path pasan a camelCase, de modo que el componente no avisa de propiedades DOM no válidas. Los valores entre comillas y el CSS dentro de <style> no se tocan, y un icono sin hijos queda como <svg … {...props} /> autocerrado.
En Vue se genera un componente de archivo único con <script setup>, defineProps({ size }) y :width/:height enlazados a size; en Svelte se usa export let size con width={size} height={size}. Ambos añaden aria-hidden, y React no fija tamaño: su raíz solo lleva el viewBox, así que pasa width y height como props o ajusta el tamaño con CSS. El campo de nombre se convierte en un identificador PascalCase: si está vacío es KivIcon, y si no puede empezar un identificador se le añade un prefijo, así que 3d-icon exporta Svg3dIcon.
No hay optimización de trazados ni reescritura de id: dos iconos que definan id="g1" seguirán chocando en una misma página, igual que con SVG escrito a mano. La animación se borra en lugar de conservarse, y un bloque <style> que mezcle una regla local con una url() remota se descarta entero, así que revisa la vista previa si el original dependía de una hoja de estilos enlazada.
La vista previa es un <img> alimentado por una URL blob, de modo que los scripts del código no pueden ejecutarse; eso la convierte en una imagen fiel del archivo limpiado, no en una auditoría de seguridad. Si la entrada no es válida se avisa y se borra el resultado anterior en lugar de dejarlo en pantalla: hace falta una única raíz <svg>, y una entidad XML no definida como se rechaza porque el SVG se analiza como XML; é y las cinco entidades predefinidas sí se aceptan.