Optimizador SVG (SVGO)
Optimiza y minifica código SVG con SVGO en tu navegador. Elimina metadatos del editor, comentarios y marcado redundante, y muestra el ahorro con una vista previa.
Usa el preset por defecto de SVGO, que conserva el viewBox, los títulos y las descripciones de accesibilidad.
Se ejecuta completamente en tu navegador. Tus datos nunca se suben.
¿Qué es Optimizador SVG?
El Optimizador SVG ejecuta SVGO, la librería estándar de optimización de SVG, sobre tu código SVG. Elimina metadatos del editor, comentarios y elementos ocultos y vacíos, acorta los datos de trazados, números y colores, y fusiona lo que se puede fusionar. Obtienes el código optimizado, una vista previa de antes y después y la reducción de tamaño.
Cómo usar Optimizador SVG
- Pega el código SVG en Código SVG, o suelta/elige un archivo
.svg. - Ajusta las opciones: Varias pasadas (resultado más pequeño), Precisión numérica (decimales), Conservar los ID, Sustituir width/height por viewBox (adaptable) y Formatear el resultado.
- Compara las vistas previas de antes y después y la etiqueta de tamaño.
- Copia el SVG optimizado o descárgalo como
name-min.svg.
Ejemplo
SVG de 100×100 exportado de un editor con declaración XML, un comentario, <metadata>, un grupo vacío y números largos
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M10 10h80v80H10z" style="fill:red;stroke:none"/></svg>
Cuándo usar Optimizador SVG
Úsalo con iconos, logotipos e ilustraciones exportados desde Figma, Illustrator, Inkscape o Sketch antes de publicarlos en una web o app. Activa Conservar los ID si CSS, JavaScript o referencias <use> en otros lugares dependen de los ID de los elementos. Revisa siempre la vista previa: los SVG poco habituales con scripts o referencias externas pueden necesitar ajustes manuales.
Cómo funciona Optimizador SVG
La herramienta carga bajo demanda la versión para navegador de SVGO 4 y aplica los plugins de su preset-default: elimina la declaración XML, el doctype, los comentarios, los metadatos y los espacios de nombres del editor, limpia atributos y valores numéricos, convierte formas en trazados, colapsa grupos, reescribe los datos de trazados y las transformaciones, y más. El preset predeterminado de SVGO 4 conserva el viewBox, el <title> y los <desc> que no son del editor, así que se mantienen el escalado y la accesibilidad. Con varias pasadas, los plugins se repiten hasta que la salida deja de reducirse.
Casos de Uso Comunes
- Reducir iconos exportados desde herramientas de diseño antes de añadirlos a una librería de componentes.
- Limpiar un logotipo SVG para poder incrustarlo en HTML.
- Hacer más pequeños los sprites SVG para que la página cargue más rápido.
- Eliminar metadatos del editor que filtran rutas de archivo o nombres de autor.
Nota de Seguridad
Las imágenes se decodifican, procesan y codifican en local en tu navegador con la API Canvas. No se sube nada a ningún servidor.
Preguntas Frecuentes
¿La optimización de SVGO es sin pérdida?
Con el preset predeterminado es visualmente sin pérdida en casi todos los casos. Bajar demasiado la precisión numérica (0–1 decimales) puede desplazar formas pequeñas, así que compara las vistas previas.
¿Por qué mi CSS dejó de funcionar tras optimizar?
SVGO acorta o elimina los ID no usados. Activa Conservar los ID si tus estilos o scripts los usan.
¿Elimina el viewBox?
No. El preset predeterminado de SVGO 4 conserva el viewBox. La opción Sustituir width/height por viewBox elimina en cambio el tamaño fijo, haciendo que el SVG sea adaptable.