SVG holder kantene skarpe ved alle pikseltettheter og kan tilpasse fargene til temaet. Denne fleksibiliteten har ett krav: filen må være selvstendig, enkel og lesbar på svært liten plass.
Lag et kvadrat med viewBox
Bruk en kvadratisk viewBox, for eksempel 0 0 64 64, og la det være luft rundt symbolet. viewBox angir koordinatsystemet uten å fastsette den fysiske visningsstørrelsen.
Forenkle grafikken til de mest gjenkjennelige formene. Fine detaljer, små åpninger i bokstaver og hele ord forsvinner ofte ved 16 piksler, selv om vektorfilen teknisk sett fortsatt er skarp.
| Punkt | Hvorfor | Test |
|---|---|---|
| Kvadratisk viewBox | Forutsigbar beskjæring | Forhåndsvisning i 16×16 |
| Enkle vektorbaner | Lesbarhet | Lyse og mørke faner |
| Ingen avhengigheter | Selvstendig innlasting | Uten nettforbindelse |
| ICO som reserve | Eldre klienter | Nettadresse i rotmappen |
Gjør filen selvstendig
Bygg inn nødvendige stiler i SVG-filen. Konverter tekst til vektorbaner når symbolet er avhengig av en skrifttype, fordi en ekstern nettskrift ikke er en pålitelig avhengighet i denne sammenhengen.
Fjern skript, eksterne lenker og unødvendige metadata fra tegneprogrammet. Enkle former og stiler gjør også sikkerhetskontrollen enklere og reduserer filstørrelsen.
Åpne til slutt filen alene i en nettleser og test den uten nett. Hvis grafikken endres eller forsvinner, er den fortsatt avhengig av en ekstern ressurs som må bygges inn eller erstattes.
Angi SVG med et reserveformat
Legg til link rel icon med type image/svg+xml og en nettadresse relativ til rotmappen. Behold også favicon.ico i rotmappen for klienter som ikke velger SVG eller ber om ICO direkte.
SVG erstatter ikke Apple Touch-ikonet eller manifestikonene. Eksporter PNG-filer uten gjennomsiktighet eller med støtte for maskering til disse grensesnittene.
Tilpass fargene til temaet
En prefers-color-scheme-regel i et style-element kan endre fill eller stroke i mørk modus. Angi først en solid standardfarge, og legg deretter til varianten som en progressiv forbedring.
Test filen i faktiske faner og ved flere zoomnivåer. Undersøk også reserveformatet når SVG ikke velges. En ICO som forsvinner på mørk bakgrunn, er fortsatt et problem for disse klientene.
Primærkilder
Vanlige spørsmål
Trenger en SVG width og height?
En kvadratisk viewBox er det viktigste for skalering. Du kan inkludere eksplisitt width og height, men nettleseren tilpasser ikonets størrelse til bruksområdet.
Kan filen laste inn en ekstern skrifttype?
Ikke baser deg på det. Konverter bokstavene til vektorbaner for å få en selvstendig og forutsigbar fil.
Er SVG nok for iOS?
Nei. Legg ved et eget Apple Touch-ikon i PNG-format uten gjennomsiktighet til startskjermen.