Un logo nítido en cualquier pantalla suena ideal, hasta que el SVG pesa más que una foto JPEG. En webs de empresa, el formato vectorial brilla en logotipos, iconos de interfaz e ilustraciones simples, pero no sustituye a las fotografías de producto ni a los heroes visuales.
En esta guía repasamos cuándo conviene SVG frente a WebP o AVIF, cómo optimizar archivos sin perder calidad, qué exige la accesibilidad y qué errores de rendimiento aparecen cuando se abusa del vectorial en plantillas genéricas.
Qué es SVG y por qué encaja en una web corporativa
SVG (Scalable Vector Graphics) describe formas con coordenadas y rutas, no con píxeles fijos. Eso permite escalar el mismo archivo en móvil, escritorio o pantallas de alta densidad sin generar cinco tamaños distintos como con srcset.
Casos típicos en empresas:
- Identidad visual: logo en cabecera, pie y documentos descargables.
- Iconografía de servicios: pictogramas de procesos, sectores o ventajas.
- Gráficos simples: diagramas de flujo ligeros (no sustituyen infografías complejas en raster).
- Mapas o planos vectoriales cuando la interactividad lo justifica.
Para fotografías de equipo, obras o catálogo, sigue siendo mejor raster optimizado; mezclar ambos enfoques es lo habitual en proyectos serios de optimización de imágenes.
Cuándo NO usar SVG
- Fotos o texturas realistas. Convertirlas a vector suele multiplicar el peso y el coste de renderizado.
- SVG exportados desde diseño sin limpiar. Illustrator o Figma pueden dejar metadatos, fuentes embebidas y miles de nodos innecesarios.
- Iconos repetidos cientos de veces inline. Duplicar el mismo markup en cada tarjeta infla el HTML; mejor sprite externo o componente reutilizable.
- Animaciones pesadas en la home. Pueden competir con el LCP si bloquean el hilo principal.
Cómo optimizar SVG antes de subirlos
Trata cada SVG como código fuente: revisa diff, comprueba peso y prueba en móvil real.
- SVGO o herramientas equivalentes para eliminar comentarios, metadatos y precisiones absurdas.
- Convierte texto a trazos solo si la tipografía no debe ser editable; si mantienes texto, define
<text>con fuentes web seguras o outline con cuidado. - Evita filtros y máscaras complejas si no aportan valor; suelen costar más GPU.
- Externaliza el archivo (
<img src="logo.svg">o CSSbackground-image) cuando no necesitas manipular nodos desde JavaScript. - Inline solo lo imprescindible (por ejemplo, cambiar color con CSS en un icono del menú).
Accesibilidad: más que un atributo alt
Los SVG decorativos deben ocultarse a lectores de pantalla (aria-hidden="true" y role="presentation" cuando proceda). Si transmiten información —icono de «presupuesto sin compromiso», estado de un proceso— necesitan nombre accesible coherente con lo que harías en un PNG.
- Usa
<title>dentro del SVG inline oaltdescriptivo en<img>, alineado con la guía de texto alternativo. - Comprueba contraste si el SVG incluye texto vectorial visible.
- No dependas solo del color para diferenciar estados; añade forma o patrón.
SEO y previews sociales
Google indexa SVG servidos como imagen estática. Para compartir en redes, las miniaturas siguen dependiendo de Open Graph en formato raster (1200×630 px). Mantén el logo SVG en la web, pero genera JPG o PNG para og:image.
En el sitemap, las URLs de SVG cuentan si son recursos públicos relevantes; no sustituyen una estrategia de contenido en el blog ni un favicon bien configurado.
Errores frecuentes en proyectos reales
- SVG de 400 KB en el header porque el diseñador exportó efectos y fuentes incrustadas.
- Miles de líneas inline en cada icono de listado, duplicando markup y dificultando caché.
- Animaciones SMIL obsoletas sin fallback, rotas en Safari o sin respeto a
prefers-reduced-motion. - Logos sin versión monocroma para fondos oscuros, forzando filtros CSS costosos.
- Omitir dimensiones y provocar micro saltos de layout; reserva espacio como con cualquier imagen (width y height).
Checklist rápido antes de publicar
- Peso objetivo: iconos < 5 KB, logos complejos < 30 KB tras optimizar.
- Prueba en Chrome, Safari y Firefox móvil.
- Valida con lector de pantalla en al menos un icono informativo.
- Mide impacto en Lighthouse tras sustituir PNG por SVG en cabecera.
- Documenta en el manual de marca qué archivo es la fuente oficial.
¿Tu web mezcla SVG sin criterio?
En aatsoft auditamos identidad visual, rendimiento y accesibilidad como un solo sistema. Si tus iconos se ven bien pero el informe de velocidad empeora, podemos ordenar exportaciones, plantillas y caché sin rehacer toda la web.
