Optimizador SVG

Acerca de esta utilidad

Los archivos SVG (Scalable Vector Graphics) describen formas, trazados y texto con XML. Las herramientas de diseño, exportaciones CMS e iconos manuales suelen incluir muchos más datos de los que el navegador necesita. La optimización SVG elimina ese markup sobrante — comentarios, metadatos del editor, grupos redundantes, precisión innecesaria y atributos no usados — manteniendo el mismo aspecto visual. A diferencia del PNG o JPEG, el SVG sigue siendo editable e independiente de la resolución. Un icono bien optimizado puede pasar de 40 KB a 6 KB sin pérdida visible. La optimización es esencial para logos, iconos de interfaz, ilustraciones y favicons que se cargan en cada visita. Archivos más pequeños significan cargas más rápidas, menos ancho de banda móvil y mejores Core Web Vitals. Los motores de búsqueda premian páginas rápidas. Los SVG optimizados encajan mejor en HTML, componentes React y plantillas de email donde el markup pesado puede romper parsers o inflar el bundle. Los sitios en producción usan SVG en CSS, etiquetas <svg> inline o img. Cada kilobyte afecta la ruta de renderizado crítica. Quitar espacios, transforms y doctype reduce la transferencia sin tocar CSS o JavaScript. Para favicons SVG (link rel="icon" type="image/svg+xml"), un archivo ligero se actualiza más rápido al cambiar la marca. Los proyectos React importan SVG como componentes o URLs. Fuentes pesadas aumentan el tiempo de parseo del bundle cuando los loaders los inlinan. Optimiza antes de añadir iconos a tu biblioteca para mantener tree-shaking y code splitting. Confirma que el viewBox se conserva — React lo necesita para escalar de forma responsive. Los navegadores modernos admiten favicons SVG en el head. Se ven nítidos en pestañas Retina si el archivo es pequeño y válido. Deben ser cuadrados, paleta simple, sin referencias externas ni scripts. Tras optimizar, convierte a ICO o PNG para Windows antiguo o crawlers sociales. Un SVG optimizado es un excelente master para un paquete favicon completo. Errores comunes de exportación: imágenes raster embebidas, precisión decimal excesiva, formas duplicadas, bloques style en lugar de atributos. Illustrator añade grupos Layer; Figma incluye xmlns y coordenadas con seis decimales. width/height sin viewBox rompen el diseño responsive. Capas ocultas exportan geometría invisible que sigue contando en el tamaño. En Figma, copia como SVG o exporta con Outline stroke. Los archivos Figma incluyen fill-rule y matrices transform en cada grupo; la optimización colapsa trazados adyacentes cuando es seguro. En Illustrator, exporta SVG con Minify o Responsive, desactiva fuentes innecesarias y expande apariencias antes de exportar. Pega el markup en este optimizador del navegador. El procesamiento es local — tus activos de marca no se suben a ningún servidor. Descarga el archivo limpio o cópialo en tu repo, CMS o pipeline favicon. Combínalo con nuestro convertidor SVG a ICO, SVG a PNG o generador de favicon para producción.

Preguntas frecuentes