SVG hoiab servad teravana iga pikslitiheduse juures ja saab värve kujunduse järgi kohandada. Selle paindlikkusega kaasneb üks piirang: fail peab jääma iseseisvaks, lihtsaks ja tillukeses ruumis loetavaks.
Loo ruut viewBox-atribuudiga
Kasuta ruudukujulist viewBox-väärtust, näiteks 0 0 64 64, ja jäta sümboli ümber veerised. viewBox määrab koordinaadisüsteemi, kehtestamata füüsilist kuvamissuurust.
Taanda kujutis selle iseloomulikele vormidele. Peened detailid, pisikesed täheavad ja terved sõnad kaovad 16 piksli juures sageli, kuigi vektorfail on tehniliselt endiselt terav.
| Element | Põhjus | Katse |
|---|---|---|
| Ruudukujuline viewBox | Etteaimatav kärpimine | 16×16 eelvaade |
| Lihtsad vektorrajad | Loetavus | Heledad ja tumedad vahekaardid |
| Sõltuvusteta | Iseseisev laadimine | Võrguühenduseta režiim |
| ICO-varuvariant | Vanemad kliendid | Juurkausta URL |
Muuda fail iseseisvaks
Lisa vajalikud stiilid SVG sisse. Kui sümbol sõltub kirjatüübist, teisenda tekst vektorradadeks, sest väline veebifont pole selles kontekstis usaldusväärne sõltuvus.
Eemalda skriptid, kauglingid ja liigsed redaktori metaandmed. Lihtsad kujundid ja stiilid hõlbustavad ka turvakontrolli ning vähendavad faili mahtu.
Lõpuks ava fail brauseris eraldi ja testi seda võrguühenduseta. Kui kujutis muutub või kaob, sõltub see endiselt välisest ressursist, mis tuleb faili lisada või asendada.
Deklareeri SVG koos varuvariandiga
Lisa link rel icon väärtusega type image/svg+xml ja juurkausta suhtelise URL-iga. Hoia ka favicon.ico juurkaustas klientidele, mis SVG-d ei vali või ICO-t otse küsivad.
SVG ei asenda Apple Touchi ikooni ega manifestiikoone. Nende liideste jaoks ekspordi läbipaistmatud või maskitavad PNG-failid.
Kohanda värve kujunduse järgi
style-elemendi sees olev prefers-color-scheme-reegel saab tumedas režiimis muuta fill- või stroke-väärtust. Määra esmalt töökindel vaikevärv ja lisa siis variant järkjärgulise täiustusena.
Testi faili päris vahekaartidel ja mitmel suumitasemel. Uuri ka varuvarianti olukorras, kus SVG-d ei valita: tumedal taustal kaduv ICO on nende klientide jaoks endiselt probleem.
Algallikad
Korduma kippuvad küsimused
Kas SVG vajab width- ja height-atribuuti?
Skaleerimise põhialus on ruudukujuline viewBox. Võib lisada ka selged width- ja height-väärtused, kuid brauser määrab ikooni suuruse kasutuskoha järgi.
Kas see saab laadida välist fonti?
Ära sellele looda. Iseseisva ja etteaimatava faili jaoks teisenda tekst vektorradadeks.
Kas iOS-ile piisab SVG-st?
Ei. Avakuva jaoks paku eraldi läbipaistmatut PNG-vormingus Apple Touchi ikooni.