SVG saglabā asas malas jebkurā pikseļu blīvumā un var pielāgot krāsas motīvam. Šai elastībai ir viens nosacījums: failam jāpaliek patstāvīgam, vienkāršam un salasāmam ļoti mazā laukumā.
Veidojiet kvadrātu ar viewBox
Izmantojiet kvadrātveida viewBox, piemēram, 0 0 64 64, un atstājiet brīvu vietu ap simbolu. viewBox nosaka koordinātu sistēmu, neuzspiežot fizisku attēlošanas izmēru.
Samaziniet zīmējumu līdz raksturīgajām formām. Smalkas detaļas, mazi tukšumi burtos un pilni vārdi bieži pazūd pie 16 pikseļiem, lai gan vektoru fails tehniski paliek ass.
| Elements | Iemesls | Pārbaude |
|---|---|---|
| Kvadrātveida viewBox | Paredzama apgriešana | 16×16 priekšskatījums |
| Vienkārši ceļi | Salasāmība | Gaišas un tumšas cilnes |
| Bez atkarībām | Patstāvīga ielāde | Bezsaistes tīkls |
| ICO rezerves variants | Vecāki klienti | Saknes URL |
Padariet failu patstāvīgu
Ievietojiet nepieciešamos stilus pašā SVG. Pārvērtiet tekstu ceļos, ja simbols ir atkarīgs no burtveidola, jo ārējs tīmekļa fonts šajā vidē nav uzticama atkarība.
Noņemiet skriptus, attālas saites un nevajadzīgus redaktora metadatus. Vienkāršas formas un stili arī atvieglo drošības pārbaudi un samazina faila izmēru.
Visbeidzot atveriet failu vienu pašu pārlūkā un pārbaudiet bezsaistē. Ja zīmējums mainās vai pazūd, tas joprojām ir atkarīgs no ārēja resursa, kas jāiegulda failā vai jāaizstāj.
Norādiet SVG ar rezerves variantu
Pievienojiet link rel icon ar type image/svg+xml un URL, kas sākas domēna saknē. Saglabājiet arī favicon.ico saknē klientiem, kas neizvēlas SVG vai pieprasa ICO tieši.
SVG neaizstāj Apple Touch ikonu vai manifesta ikonas. Šīm saskarnēm eksportējiet necaurspīdīgus vai maskējamus PNG failus.
Pielāgojiet krāsas motīvam
prefers-color-scheme noteikums style elementā var mainīt fill vai stroke tumšajā režīmā. Vispirms iestatiet uzticamu noklusējuma krāsu un pēc tam pievienojiet variantu kā pakāpenisku uzlabojumu.
Pārbaudiet failu īstās cilnēs un vairākos tālummaiņas līmeņos. Apskatiet arī rezerves variantu, kad SVG netiek izvēlēts: ICO, kas pazūd uz tumša fona, šiem klientiem joprojām rada problēmu.
Pirmavoti
Bieži uzdotie jautājumi
Vai SVG nepieciešami width un height?
Kvadrātveida viewBox ir galvenais mērogošanai. Var norādīt arī width un height, taču pārlūks pielāgo ikonas izmēru tās attēlošanas vietai.
Vai tas var ielādēt ārēju fontu?
Nepaļaujieties uz to. Pārvērtiet burtus ceļos, lai fails būtu patstāvīgs un paredzams.
Vai iOS pietiek ar SVG?
Nē. Sākuma ekrānam nodrošiniet atsevišķu necaurspīdīgu PNG Apple Touch ikonu.