Optimizar suele ser seguro, pero unos pocos ajustes cambian el comportamiento y no solo el tamaño. Conocerlos evita el problema clásico de un icono que se ve bien en el editor y mal en la página.
Conserva el viewBox
El atributo viewBox define el sistema de coordenadas interno y es lo que permite que un SVG escale a cualquier tamaño. Sin él, la imagen se dibuja con un tamaño fijo en píxeles y no escala con CSS. Algunos valores por defecto de los optimizadores eliminan viewBox cuando existen width y height. La herramienta lo conserva por defecto, y normalmente conviene dejarlo así.
Quitar width y height
Eliminar width y height hace que el SVG ocupe el tamaño que le dé el contenedor o el CSS, apoyándose en el viewBox para la proporción. Es cómodo para iconos adaptables, pero asegúrate de que tu CSS fije un tamaño, o el SVG puede expandirse al ancho completo de su contenedor.
Títulos y descripciones
Un <title> da a los lectores de pantalla un nombre para el gráfico y un texto emergente al pasar el cursor. Los optimizadores suelen eliminarlo por innecesario. Si la imagen transmite significado, conserva el título. Si es puramente decorativa, quítalo y marca el elemento con aria-hidden="true".
Limpieza de ids y colisiones
Minimizar los ids acorta gradient-header a algo como a. Eso está bien para un solo archivo, pero cuando incrustas varios SVG en la misma página HTML, dos archivos que usen el id a para degradados distintos chocarán y uno se renderizará con el relleno equivocado. Mantén los ids únicos por archivo o evita incrustar varios archivos optimizados con degradados, recortes o máscaras sin un prefijo.
Precisión
Tres decimales son suficientes para la mayoría de los iconos. Las ilustraciones grandes dibujadas en un lienzo amplio pueden usar menos, y los iconos diminutos en una cuadrícula de 24 unidades pueden necesitar dos o tres para evitar un temblor visible. Compara la vista previa cada vez que la reduzcas.
¿En línea o archivo?
El SVG en línea permite estilizarlo con CSS y evita una solicitud, pero aumenta el tamaño de la página y no se puede almacenar en caché por separado. Un archivo aparte se almacena en caché y se reutiliza entre páginas. Para unos pocos iconos pequeños, en línea. Para ilustraciones grandes o muchas repeticiones, un archivo.
Preguntas frecuentes
¿Puedo animar un SVG optimizado? Sí, pero conserva los ids y las clases a los que apunta tu CSS o script, porque la limpieza puede renombrarlos o eliminarlos.