Optimizar no equivale a validar ni a sanear
Un SVG es XML que el navegador interpreta como gráfico, pero también puede contener referencias, estilos y comportamiento. Reducir espacios, metadatos o grupos redundantes puede disminuir bytes sin decidir si el archivo es apropiado para una página. Por eso separa tres preguntas: si el documento es XML válido, si conserva el dibujo esperado y si resulta aceptable para el destino. Un optimizador puede simplificar una ruta o eliminar comentarios; un sanitizador debe decidir qué hacer con script, controladores de eventos, enlaces externos, foreignObject o URL peligrosas. No trates una salida más pequeña como prueba de seguridad. Si el SVG procede de un tercero, revísalo con una política de contenido y vuelve a abrir el resultado antes de publicarlo.
Ejemplo controlado: mide nodos y bytes
Trabaja siempre con una copia. Parte de un icono sencillo que tenga dos grupos anidados, un título útil, una descripción, metadatos de un editor y cuatro formas. Antes de optimizar, cuenta elementos del DOM con el inspector o busca las etiquetas svg, g, path, title y desc; anota además el tamaño del archivo en bytes. Ejecuta la optimización y compara ambas cifras. Es razonable que desaparezcan grupos vacíos o metadatos del editor, pero no que desaparezca el title accesible sin una sustitución prevista. Guarda original y salida con nombres distintos. La reducción importa solo si la representación, el propósito y las referencias necesarias sobreviven al cambio.
Confirma el renderizado, no solo el código
Abre original y resultado en la misma versión del navegador y, si el icono se usa dentro de una interfaz, pruébalo también allí. Comprueba contorno, relleno, trazo, opacidad, viewBox, proporción y recortes en tamaños pequeños y grandes. Haz zoom para detectar cambios de precisión en curvas o líneas finas. Si el SVG usa un ID para un degradado, clipPath, máscara o marcador, inspecciona que cada url(#id) siga apuntando a un ID existente. Una comparación visual rápida puede ocultar un fallo que solo aparece con fondo oscuro, zoom alto o una hoja CSS concreta. Para gráficos de producción, incorpora una captura de referencia o una prueba visual repetible.
Conserva el significado accesible
Un icono decorativo puede marcarse como oculto para tecnologías de asistencia en el contexto que lo use; un gráfico que comunica información necesita un nombre o una alternativa equivalente. No elimines title, desc, aria-label, aria-labelledby o el texto visible sin saber cómo se expondrá el significado después. Comprueba que aria-labelledby no mencione IDs borrados o renombrados. El texto alternativo debe describir la función, no la estructura interna: por ejemplo, “Descargar informe” es más útil que “flecha hacia abajo azul”. La optimización puede reducir atributos repetidos, pero no debe convertir una imagen comprensible en una imagen silenciosa. Consulta la guía de QR accesibles si el SVG forma parte de un código que también necesita instrucciones fuera de la imagen.
Busca contenido activo o externo antes de confiar
Inspecciona el XML antes de incrustarlo. Señales que requieren revisión son script, atributos onload u otros on*, enlaces xlink:href o href hacia otra URL, imágenes externas, foreignObject, objetos incrustados y referencias data: inesperadas. Un enlace a otra red puede afectar privacidad, disponibilidad o la política de contenido; JavaScript o eventos activos no pertenecen a un icono estático no confiable. Bloquear una etiqueta concreta no sustituye una política de saneamiento mantenida y pruebas en el contexto real. No pegues SVG desconocido directamente en JSX o HTML con permisos amplios. Si solo necesitas mostrar un archivo no confiable, considera servirlo como descarga o mediante un aislamiento apropiado.
Límites que conviene probar antes de publicar
No apliques ajustes agresivos sin una copia cuando el archivo contiene animaciones SMIL o CSS, filtros, máscaras complejas, fuentes incrustadas, imágenes embebidas o IDs consumidos por CSS o JavaScript. Renombrar IDs puede romper selectores, referencias de script o varios iconos insertados en la misma página; eliminar una fuente puede cambiar medidas y saltos. Los filtros pueden verse distinto entre navegadores y una imagen data: puede explicar gran parte del peso aunque el XML sea pequeño. Comprueba la salida en los navegadores que soportas y mide la carga completa. Para reducir peso de una ilustración grande, quizás convenga rediseñar o usar otro formato; para seguridad, utiliza saneamiento y revisión separados. La guía de optimización SVG desarrolla estas decisiones y la de privacidad ayuda a evaluar archivos recibidos.