SVG zadržava oštre rubove pri svakoj gustoći piksela i može prilagoditi boje temi. Ta fleksibilnost donosi jedno ograničenje: datoteka mora ostati samostalna, jednostavna i čitljiva u vrlo malom prostoru.
Oblikujte kvadrat pomoću viewBox
Upotrijebite kvadratni viewBox, primjerice 0 0 64 64, i ostavite razmak oko simbola. viewBox definira koordinatni sustav bez nametanja fizičke veličine prikaza.
Svedite grafiku na prepoznatljive oblike. Sitni detalji, male unutarnje praznine slova i cijele riječi često nestaju na 16 piksela iako vektorska datoteka tehnički ostaje oštra.
| Stavka | Razlog | Provjera |
|---|---|---|
| Kvadratni viewBox | Predvidljivo obrezivanje | Pregled 16×16 |
| Jednostavne putanje | Čitljivost | Svijetle i tamne kartice |
| Bez ovisnosti | Samostalno učitavanje | Bez mrežne veze |
| Zamjenski ICO | Stariji klijenti | URL u korijenu |
Učinite datoteku samostalnom
Ugradite potrebne stilove unutar SVG-a. Pretvorite tekst u putanje ako simbol ovisi o fontu jer vanjski web font u ovom kontekstu nije pouzdana ovisnost.
Uklonite skripte, udaljene poveznice i nepotrebne metapodatke uređivača. Jednostavni oblici i stilovi olakšavaju sigurnosni pregled i smanjuju veličinu datoteke.
Na kraju otvorite samu datoteku u pregledniku i testirajte je bez interneta. Ako se grafika promijeni ili nestane, još ovisi o vanjskom resursu koji treba ugraditi ili zamijeniti.
Deklarirajte SVG sa zamjenskim formatom
Dodajte link rel icon s type image/svg+xml i URL-om relativnim prema korijenu. Zadržite i favicon.ico u korijenu za klijente koji ne odabiru SVG ili izravno traže ICO.
SVG ne zamjenjuje ikonu Apple Touch ni ikone manifesta. Za ta sučelja izvezite neprozirne PNG datoteke ili PNG datoteke prilagodljive maski.
Prilagodite boje temi
Pravilo prefers-color-scheme unutar elementa style može promijeniti fill ili stroke u tamnom načinu. Prvo definirajte pouzdanu zadanu boju, a zatim dodajte inačicu kao postupno poboljšanje.
Testirajte datoteku u stvarnim karticama i na više razina zumiranja. Provjerite i zamjenski format kada SVG nije odabran: ICO koji nestaje na tamnoj pozadini ostaje problem za te klijente.
Primarni izvori
Česta pitanja
Treba li SVG imati width i height?
Kvadratni viewBox ključan je za skaliranje. Možete navesti width i height, ali preglednik određuje veličinu ikone prema kontekstu.
Može li učitati vanjski font?
Nemojte se oslanjati na to. Pretvorite slova u putanje kako bi datoteka bila samostalna i predvidljiva.
Je li SVG dovoljan za iOS?
Ne. Za početni zaslon pripremite zasebnu neprozirnu PNG ikonu Apple Touch.