✂️ Optimizador SVG
Elimina metadatos, comentarios, espacios, etiquetas de editor de SVG y redondea decimales para reducir el tamaño.
Vista previa
🔗 Herramientas relacionadas
📖 Dónde se suele tropezar
Elimina comentarios, metadatos y atributos propios del editor de un SVG, colapsa el espacio en blanco y redondea decimales para reducir el tamaño, con salida como data URI de CSS, etiqueta img de HTML, JSX o Vue. Todo se ejecuta en el navegador. Hay cosas que se pueden quitar sin riesgo y cosas que rompen el dibujo: el id, en particular, puede estar referenciado por un <use>, un clipPath o un degradado, y por eso no se puede eliminar mecánicamente.
| Caso | Qué ocurre | Qué hacer |
|---|---|---|
| El dibujo se rompió tras optimizar | Hay básicamente dos causas. Una es eliminar un id: <use xlink:href="#icon">, clip-path="url(#mask1)" y fill="url(#grad1)" referencian identificadores, y perder uno hace que la forma desaparezca o se vuelva negra. La otra es redondear demasiado los decimales: en un icono pequeño o un trazo fino, redondear a un decimal basta para colapsar coordenadas y deformar la figura. Ambas producen un archivo más pequeño que dibuja algo distinto y, mirando sólo las cifras, parece que ha funcionado. |
Deja los decimales en dos o tres posiciones: bajar a uno cambia demasiado riesgo de rotura por los bytes que ahorra. Y compara siempre el antes y el después uno junto a otro, con tus ojos (la vista previa de esta página): juzgar sólo por la cifra del tamaño es el fallo más frecuente en esta tarea. En cuanto al id, un SVG en línea referenciado desde CSS o JavaScript externos necesita conservarlos; SVGO también activa cleanupIds por defecto, así que allí surge el mismo problema. Poner varios SVG en una misma página exige el cuidado contrario: un id debe ser único en la página, de modo que dos SVG con el mismo id dejan al segundo referenciando la definición del primero. |
| Quitar title y desc te cuesta accesibilidad | En un SVG, <title> cumple el papel del texto alternativo: un lector de pantalla lo anuncia. Quitarlo de un SVG decorativo no pasa nada, pero quitarlo de un icono con significado —el contenido de un botón, un indicador de estado, un gráfico— deja sin nada que anuncie qué hace ese botón. Los botones que sólo llevan icono son el caso peligroso: sin etiqueta de texto, si <title> era la única pista, borrarlo reduce el anuncio a la palabra botón. Visualmente no cambia nada, así que no hay ocasión de darse cuenta. |
Decide según el papel del SVG. Cargado con <img>, el atributo alt es el texto alternativo, así que el <title> de dentro del SVG sobra y puede irse. Cuando va en línea y tiene significado, conserva el <title> y añade role="img" con aria-labelledby: <svg role="img" aria-labelledby="t1"><title id="t1">Guardar</title>. Cuando es puramente decorativo, quita el <title> y añade aria-hidden="true": equivale a un alt vacío, y decir explícitamente que no hay nada que anunciar es mejor que limitarse a borrarlo. La prueba es si el significado cambia cuando el gráfico no está. |
| Convertirlo en data URI lo hizo más grande | Base64 añade siempre alrededor de un 33 por ciento, así que optimizar un SVG un 30 por ciento y luego codificarlo en Base64 te devuelve más o menos al tamaño original. Peor: una cadena Base64 apenas se comprime con gzip: el SVG es texto y normalmente comprimiría cerca de un 70 por ciento, y codificarlo en Base64 tira eso por la borda. Creer que un data URI ahorra una petición y por tanto acelera, mientras casi se duplican los bytes transferidos, es una inversión frecuente en este flujo. | Si vas a hacer un data URI de un SVG, codifícalo en porcentajes y no en Base64: data:image/svg+xml,%3Csvg.... El SVG es texto, así que la codificación en porcentajes es más pequeña que Base64 y sigue comprimiendo con gzip. Sólo hay que escapar #, % y "; el resto puede quedarse tal cual, aunque escapar también < y > es más seguro. Un data URI sólo compensa con iconos de unos pocos kilobytes; por encima de eso, un <img> normal o un SVG en línea es más rápido porque se puede cachear. El data URI es una técnica para no salir de la hoja de estilos, no una optimización de velocidad. |
El mayor ahorro está en los ajustes de exportación, no en una herramienta. Illustrator y Figma exportan SVG con montones de metadatos del editor, nombres de capa y grupos redundantes por defecto, pero elegir una opción como mínimo o el perfil SVG 1.1 hace que nada de eso llegue a escribirse: no producirlo es más fiable y más rápido que quitarlo después. Si usas muchos iconos, combínalos en un sprite SVG en lugar de optimizar uno a uno: ganas en número de peticiones y en bytes totales. Por último, seguridad: nunca incrustes en línea un SVG recibido de fuera. El SVG es XML y puede contener <script> y un atributo onload, así que ponerlo en línea es un XSS. Para mostrar un SVG subido por un usuario, cárgalo con <img src="...">, donde los scripts no se ejecutan. Si has de manejarlo en línea, sanéalo sin excepción con el perfil SVG de DOMPurify.
📖 Cómo usar
-
1
Pega el SVG o abre un archivoPega el SVG o usa el botón Abrir.
-
2
Selecciona opcionesMarca las opciones de optimización necesarias.
-
3
Copia o elige el formatoLa salida aparece a la derecha. Elige el formato.
❓ Preguntas frecuentes
¿Cuánto se reduce el tamaño?
¿Quitar title/desc afecta la accesibilidad?
¿Puedo usar la salida JSX en React?
🐛 ¿Encontró un problema con esta herramienta?
Gratis, sin registro. Incluso solo los pasos para reproducir ayudan. Los informes van directamente al operador y se usan para corregir.
¡Gracias por tu reporte!
Tu reporte llegó al operador y se usará para mejorar.