SVG holder kanterne skarpe ved enhver pixeltæthed og kan tilpasse farverne til temaet. Fleksibiliteten har ét krav: filen skal være selvstændig, enkel og læsbar på meget lidt plads.
Lav et kvadrat med viewBox
Brug en kvadratisk viewBox, eksempelvis 0 0 64 64, og lad luft stå omkring symbolet. viewBox definerer koordinatsystemet uden at fastlægge en fysisk visningsstørrelse.
Reducér grafikken til dens karakteristiske former. Fine detaljer, små indre hulrum og hele ord forsvinder ofte ved 16 pixels, selvom vektorfilen teknisk set stadig er skarp.
| Punkt | Hvorfor | Test |
|---|---|---|
| Kvadratisk viewBox | Forudsigelig beskæring | Forhåndsvisning i 16×16 |
| Enkle kurver | Læsbarhed | Lyse og mørke faner |
| Ingen afhængigheder | Selvstændig indlæsning | Netværk offline |
| ICO-reserve | Ældre klienter | URL i roden |
Gør filen selvstændig
Indlejr de nødvendige stilarter i SVG-filen. Omdan tekst til kurver, når symbolet afhænger af en skrifttype, fordi en ekstern webskrifttype ikke er en pålidelig afhængighed i denne sammenhæng.
Fjern scripts, eksterne links og unødvendige metadata fra tegneprogrammet. Enkle former og stilarter letter også sikkerhedsgennemgangen og mindsker filstørrelsen.
Åbn til sidst filen alene i en browser, og test den offline. Ændrer grafikken sig eller forsvinder, afhænger den stadig af en ekstern ressource, som skal indlejres eller erstattes.
Angiv SVG med en reserve
Tilføj link rel icon med type image/svg+xml og en URL fra domænets rod. Behold også favicon.ico i roden til klienter, der ikke vælger SVG eller henter ICO direkte.
SVG erstatter ikke Apple Touch-ikonet eller manifestikonerne. Eksportér ugennemsigtige eller maskérbare PNG-filer til disse grænseflader.
Tilpas farverne til temaet
En prefers-color-scheme-regel i et style-element kan ændre fill eller stroke i mørk tilstand. Definér først en robust standardfarve, og tilføj derefter varianten som en progressiv forbedring.
Test filen i rigtige faner og ved flere zoomniveauer. Undersøg også reservefilen, når SVG ikke vælges: en ICO, der forsvinder på mørk baggrund, er stadig et problem for disse klienter.
Primære kilder
Ofte stillede spørgsmål
Skal en SVG have width og height?
En kvadratisk viewBox er den afgørende del for skalering. Udtrykkelig width og height kan medtages, men browseren tilpasser ikonets størrelse til sammenhængen.
Kan den indlæse en ekstern skrifttype?
Regn ikke med det. Omdan bogstaver til kurver for at få en selvstændig fil med forudsigeligt resultat.
Er SVG nok til iOS?
Nej. Lever et særskilt, ugennemsigtigt Apple Touch-ikon i PNG til hjemmeskærmen.