Optimiza SVG conservando aspecto y accesibilidad

Un SVG puede contener geometría vectorial compacta, un mapa de bits grande incrustado o ambas cosas. Empieza por revisar su contenido. Cambiar la extensión o envolver una imagen en SVG no convierte sus píxeles en trazados limpios.

Un recorrido de comparación

Conserva el SVG fuente, crea una copia optimizada y compara ambos al menor y mayor tamaño de uso. Revisa recortes, degradados, trazos y texto. Si lo insertas directamente en HTML, pruébalo en su página: los identificadores, selectores CSS o scripts pueden depender de nombres que cambie el optimizador.

SVGO ofrece interfaces de línea de comandos y biblioteca. Configúralo para el uso concreto; no des por inocuo cualquier plugin. Eliminar datos del editor que no se usan puede ayudar, pero redondear coordenadas o alterar trazados puede cambiar la imagen. Conserva un viewBox adecuado y cualquier nombre o descripción accesible que necesite la integración.

No prometas un porcentaje fijo de ahorro. Registra bytes de entrada y salida y, por separado, la respuesta servida si hay gzip o Brotli. El archivo en disco y la transferencia comprimida son mediciones distintas.

Un caso pequeño para inspeccionar

Este SVG es completo y no usa recursos externos:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
     role="img" aria-labelledby="mark-title">
  <title id="mark-title">Círculo azul</title>
  <circle cx="50" cy="50" r="40" fill="#176bba"/>
</svg>

Guárdalo como circle.svg, ábrelo en el navegador y cambia el tamaño de presentación. Si lo insertas con <img>, proporciona el alt adecuado en ese elemento; el contexto determina la alternativa textual. Una imagen decorativa requiere otro tratamiento que un control etiquetado.

Qué hacen las herramientas OpenImages

SVG a PNG rasteriza a un tamaño elegido. Sirve para destinos que piden PNG, pero el resultado deja de escalar como geometría vectorial. Imagen a SVG tiene sus propias opciones: examina la salida sin asumir que una foto se vuelve una ilustración editable.

Prueba destino e interactividad antes de sustituir recursos en producción. Optimizar tampoco equivale a sanear SVG no confiable: usa una separación de renderizado o saneamiento apropiada para las subidas, sin dar por seguro un archivo porque pese menos.