Minificador SVG

Funciones

• Quita los comentarios y title / desc / metadata (bloques enteros, anidamiento incluido)
• Junta el espacio y los saltos entre etiquetas, sin tocar ni un carácter de `<text>` / `<tspan>` / `<style>` / `<script>`
• Decimales de 0 a 3 en los atributos numéricos como path, points o transform; 3 por defecto
• Solo borra los id sin referencias (`url(#a)`, `href="#a"` y el `begin="a.click"` de SMIL cuentan como referencias)
• Nunca toca viewBox ni preserveAspectRatio
• Los colores, los nombres de clase y los atributos style no se tocan (`#ff0000` nunca pasa a `#ff0`)
• Se puede quitar xmlns, indicado como aplicable solo al incrustarlo en HTML
• Salida con resaltado y, debajo, el número de caracteres resultante

Cómo se usa

1. Pega el código SVG
2. Activa o desactiva lo que quieras; por defecto solo hace las cuatro cosas seguras: comentarios, metadatos, espacio y 3 decimales
3. Para apretar más, baja a 1–2 decimales o activa el borrado de id sin referencias
4. Copia el resultado

Preguntas frecuentes

¿Por qué no se puede quitar el viewBox?

Porque `viewBox` define el sistema de coordenadas: qué parte del dibujo se mapea a qué área. Quítalo y `preserveAspectRatio` deja de funcionar, así que el SVG pierde su capacidad de escalarse, mientras sigue viéndose correcto al tamaño fijo que tú fijaste. El problema aparece solo cuando otro lo pone en otro sitio (un icono deformado, o que solo se ve una esquina). La docena de caracteres que ahorras no compensa ese riesgo, así que esta herramienta no lo toca en absoluto.

¿Por qué no se toca el espacio dentro de text?

Porque es contenido. Quitar el espacio de `<text>Hello World</text>` lo convierte en una sola palabra, y en pantalla eso se lee como «el texto está apretado», y se confunde fácil con un problema de fuente. Así que el plegado ocurre solo entre etiquetas; dentro de `<text>`, `<tspan>`, `<style>` y `<script>` todo se conserva tal cual. Los dos últimos ni siquiera son lenguajes de marcado y tienen sus propias reglas de espacio.

¿Bajar la precisión deforma la figura?

Con 3 decimales no se nota (en un icono de 24 px, 0,001 es como una cuadragésima parte de un píxel). Con 1 decimal (0,1) empiezan a verse facetas poligonales leves cuando el SVG se muestra grande, sobre todo en curvas y diagonales; con 0 decimales (enteros) los iconos pequeños van bien, pero ampliados el error es evidente. De ahí el valor predeterminado de 3; los ajustes agresivos se juzgan preguntando si este SVG se mostrará alguna vez a un tamaño muy grande.

¿Conviene quitar el xmlns?

Depende de cómo vayas a usar el archivo. Incrustado en HTML (el `<svg>` escrito directamente en la página) puede irse: son unos bytes y el espacio de nombres del documento padre toma el relevo. Pero como archivo `.svg` suelto, dentro de un `url()` de CSS o como destino de un `<img src>` tiene que quedarse: sin él el navegador no reconoce el archivo, y el síntoma es «no se ve nada» mientras el archivo parece perfecto. Por eso esta opción está desactivada por defecto, con la condición escrita en la etiqueta.