Como optimizar y limpiar el codigo de un SVG

Consejos practicos

Los SVG exportados por programas de diseño suelen traer codigo de mas: metadatos, comentarios, decimales larguisimos y grupos innecesarios. Limpiarlo reduce el peso, acelera la carga y facilita editarlo.

Que suele sobrar en un SVG

Metadatos y comentarios: etiquetas del editor de origen (Illustrator, Inkscape).
Decimales excesivos: coordenadas como 12.0000001 que pueden recortarse.
Atributos por defecto: valores que ya son el predeterminado.
Grupos y capas vacias: <g> sin contenido util.
IDs y clases sin usar.

Revisa el codigo a mano

En svgdesk, el panel de codigo SVG muestra el contenido real del archivo y se sincroniza en vivo. Puedes ver que etiquetas sobran, borrar metadatos o simplificar atributos y comprobar al instante que la imagen sigue igual.

Reduce decimales

Coordenadas con muchos decimales aumentan el peso sin aportar precision visible. Redondear a 1 o 2 decimales suele ser suficiente. Al editar nodos en svgdesk, las coordenadas se generan ya redondeadas.

Simplifica las formas

Menos nodos = codigo mas liviano. Si una curva tiene nodos de sobra, eliminalos (selecciona y Supr). Convierte primitivas cuando convenga y evita duplicar trazos.

Usa colores cortos

Prefiere hexadecimales de 3 o 6 digitos (#fff, #6c8cff) en lugar de rgb() largos cuando sea posible.

Buenas practicas finales

Define un viewBox claro y evita width/height fijos si quieres que escale.
Quita transformaciones innecesarias aplicandolas a las coordenadas.
Guarda una copia del original antes de optimizar.

Abrir el editor