SVG manté les vores nítides amb qualsevol densitat de píxels i pot adaptar els colors al tema. Aquesta flexibilitat té una condició: el fitxer ha de continuar sent autònom, senzill i llegible en un espai diminut.
Construeix un quadrat amb un viewBox
Fes servir un viewBox quadrat, com 0 0 64 64, i deixa marge al voltant del símbol. El viewBox defineix el sistema de coordenades sense imposar una mida física de visualització.
Redueix el dibuix a les seves formes distintives. Els detalls fins, els espais interiors petits i les paraules completes sovint desapareixen a 16 píxels, encara que el fitxer vectorial continuï sent tècnicament nítid.
| Element | Motiu | Prova |
|---|---|---|
| viewBox quadrat | Retall previsible | Previsualització de 16×16 |
| Traçats senzills | Llegibilitat | Pestanyes clares i fosques |
| Sense dependències | Càrrega autònoma | Xarxa sense connexió |
| Alternativa ICO | Clients antics | URL de l'arrel |
Fes que el fitxer sigui autònom
Incorpora els estils necessaris dins de l'SVG. Converteix el text en traçats quan el símbol depengui d'una tipografia, perquè una tipografia web externa no és una dependència fiable en aquest context.
Elimina els scripts, els enllaços remots i les metadades innecessàries de l'editor. Les formes i els estils senzills també faciliten la revisió de seguretat i redueixen la mida del fitxer.
Finalment, obre el fitxer tot sol al navegador i prova'l sense connexió. Si el dibuix canvia o desapareix, encara depèn d'un recurs extern que cal incorporar o substituir.
Declara l'SVG amb una alternativa
Afegeix link rel icon amb type image/svg+xml i un URL relatiu a l'arrel. Conserva també favicon.ico a l'arrel per als clients que no seleccionin SVG o demanin directament l'ICO.
SVG no substitueix la icona Apple Touch ni les icones del manifest. Exporta PNG opacs o emmascarables per a aquestes interfícies.
Adapta els colors al tema
Una regla prefers-color-scheme dins d'un element style pot canviar fill o stroke en mode fosc. Defineix primer un color predeterminat fiable i després afegeix la variant com a millora progressiva.
Prova el fitxer en pestanyes reals i amb diversos nivells de zoom. Inspecciona també l'alternativa quan no se selecciona l'SVG: un ICO que desapareix sobre fons fosc continua sent un problema per a aquests clients.
Fonts primàries
Preguntes freqüents
Un SVG necessita width i height?
Un viewBox quadrat és l'element essencial per escalar. S'hi poden incloure width i height explícits, però el navegador ajusta la mida de la icona al seu context.
Pot carregar una tipografia externa?
No hi confiïs. Converteix les lletres en traçats per obtenir un fitxer autònom i previsible.
N'hi ha prou amb SVG per a iOS?
No. Proporciona una icona Apple Touch PNG opaca independent per a la pantalla d'inici.