SVG ohrani ostre robove pri vsaki gostoti slikovnih pik in zna prilagoditi barve temi. Ta prilagodljivost ima eno omejitev: datoteka mora ostati samostojna, preprosta in berljiva na zelo majhnem prostoru.
Ustvarite kvadrat z viewBox
Uporabite kvadratni viewBox, denimo 0 0 64 64, in pustite odmik okoli simbola. viewBox določa koordinatni sistem, ne da bi predpisal fizično velikost prikaza.
Grafiko poenostavite na prepoznavne oblike. Drobni detajli, majhne notranje odprtine in cele besede pri 16 slikovnih pikah pogosto izginejo, čeprav vektorska datoteka tehnično ostaja ostra.
| Element | Razlog | Preizkus |
|---|---|---|
| Kvadratni viewBox | Predvidljivo obrezovanje | Predogled 16×16 |
| Preproste poti | Berljivost | Svetli in temni zavihki |
| Brez odvisnosti | Samostojno nalaganje | Brez omrežne povezave |
| Nadomestni ICO | Starejši odjemalci | URL v korenu |
Naj bo datoteka samostojna
Potrebne sloge vdelajte v SVG. Besedilo pretvorite v poti, kadar je simbol odvisen od pisave, saj zunanja spletna pisava v tem okolju ni zanesljiva odvisnost.
Odstranite skripte, oddaljene povezave in nepotrebne metapodatke urejevalnika. Preproste oblike in slogi olajšajo tudi varnostni pregled in zmanjšajo datoteko.
Na koncu odprite samo datoteko v brskalniku in jo preizkusite brez povezave. Če se grafika spremeni ali izgine, je še vedno odvisna od zunanjega vira, ki ga morate vdelati ali zamenjati.
Navedite SVG z nadomestno datoteko
Dodajte link rel icon z vrsto type image/svg+xml in URL-jem glede na koren. V korenu ohranite tudi favicon.ico za odjemalce, ki ne izberejo SVG ali neposredno zahtevajo ICO.
SVG ne nadomesti ikone Apple Touch ali ikon manifesta. Za te vmesnike izvozite neprosojne datoteke PNG ali PNG s podporo maskable.
Prilagodite barve temi
Pravilo prefers-color-scheme znotraj elementa style lahko v temnem načinu spremeni fill ali stroke. Najprej določite zanesljivo privzeto barvo, nato dodajte različico kot postopno izboljšavo.
Datoteko preizkusite v pravih zavihkih in pri več stopnjah povečave. Preverite tudi nadomestilo, ko SVG ni izbran: ICO, ki izgine na temnem ozadju, ostaja težava za te odjemalce.
Primarni viri
Pogosta vprašanja
Ali SVG potrebuje width in height?
Kvadratni viewBox je bistven za spreminjanje velikosti. Izrecna width in height sta lahko vključena, vendar brskalnik prilagodi velikost ikone njenemu okolju.
Ali lahko naloži zunanjo pisavo?
Na to se ne zanašajte. Črke pretvorite v poti, da dobite samostojno datoteko s predvidljivim prikazom.
Ali SVG zadostuje za iOS?
Ne. Za začetni zaslon zagotovite ločeno neprosojno ikono Apple Touch v obliki PNG.