Un logo nítid a qualsevol pantalla sona ideal, fins que el SVG pesa més que una foto JPEG. En webs d'empresa, el vectorial destaca en logotips, icones d'interfície i il·lustracions simples, però no substitueix fotografies de producte ni heroes visuals.
Aquesta guia explica quan convé SVG davant WebP o AVIF, com optimitzar fitxers, què demana l'accessibilitat i quins errors de rendiment apareixen quan s'abusa del vectorial en plantilles genèriques.
Què és SVG i per què encaixa en una web corporativa
SVG descriu formes amb coordenades, no píxels fixos. El mateix fitxer escala en mòbil, escriptori o pantalles d'alta densitat sense múltiples mides raster com amb srcset.
- Identitat visual: logo a capçalera, peu i documents.
- Iconografia de serveis: pictogrames de processos o avantatges.
- Gràfics simples quan la interacció ho justifica.
Per fotos d'equip o catàleg, el raster optimitzat segueix sent millor; consulta optimització d'imatges.
Quan NO usar SVG
- Fotos realistes convertides a vector.
- Exports sense netejar des de Figma o Illustrator.
- Centenars d'icones inline duplicades en cada targeta.
- Animacions pesades a la home que competeixen amb el LCP.
Com optimitzar SVG abans de pujar-los
- SVGO per eliminar metadades i precisions innecessàries.
- Text com a contorns només si cal; si no, defineix tipografia segura.
- Externalitza el fitxer quan no necessitis manipular nodes des de JavaScript.
- Inline només el imprescindible per canviar color amb CSS.
Accessibilitat: més enllà de l'atribut alt
Els SVG decoratius s'han d'amagar als lectors de pantalla. Els informatius necessiten nom accessible, alineat amb la guia d'text alternatiu.
SEO i previsualitzacions socials
Google indexa SVG estàtics. Les xarxes socials segueixen demanant imatges raster per a Open Graph (1200×630 px).
Errors freqüents
- SVG de centenars de KB al header per efectes incrustats.
- Markup inline repetit centenars de vegades.
- Animacions sense respectar
prefers-reduced-motion. - Sense variant monocroma per fons foscos.
- Sense width i height, micro salts de layout.
Checklist abans de publicar
- Objectiu: icones < 5 KB, logos complexos < 30 KB.
- Prova en navegadors reals i lector de pantalla.
- Torna a mesurar Lighthouse després del canvi.
SVG sense criteri a la teva web?
A aatsoft unim identitat visual, rendiment i accessibilitat. Si les icones es veuen bé però la velocitat empitjora, podem ordenar exports i plantilles sense refer tot el lloc.
