SVG išlaiko ryškius kraštus esant bet kokiam pikselių tankiui ir gali pritaikyti spalvas prie temos. Tačiau ši lankstumo galimybė turi sąlygą: failas turi likti savarankiškas, paprastas ir įskaitomas mažytėje erdvėje.
Sukurkite kvadratą su viewBox
Naudokite kvadratinį viewBox, pavyzdžiui, 0 0 64 64, ir palikite paraštes aplink simbolį. viewBox apibrėžia koordinačių sistemą nenustatydamas fizinio rodomo dydžio.
Piešinį supaprastinkite iki išskirtinių formų. Smulkios detalės, mažos vidinės ertmės ir ištisi žodžiai 16 pikselių dydžiu dažnai dingsta, net jei vektorinis failas techniškai išlieka ryškus.
| Elementas | Kodėl | Patikra |
|---|---|---|
| Kvadratinis viewBox | Nuspėjamas apkirpimas | 16×16 peržiūra |
| Paprasti kontūrai | Įskaitomumas | Šviesios ir tamsios kortelės |
| Be priklausomybių | Savarankiškas įkėlimas | Atjungtas tinklas |
| Atsarginis ICO | Senesnės programos | Šakninio katalogo URL |
Padarykite failą savarankišką
Reikalingus stilius įterpkite SVG viduje. Jei simbolis priklauso nuo šrifto, tekstą paverskite kontūrais, nes išorinis žiniatinklio šriftas šiame kontekste nėra patikima priklausomybė.
Pašalinkite scenarijus, nuotolines nuorodas ir nereikalingus redaktoriaus metaduomenis. Paprastos formos bei stiliai taip pat palengvina saugumo peržiūrą ir sumažina failą.
Galiausiai atverkite patį failą naršyklėje ir išbandykite be interneto. Jei piešinys pasikeičia ar dingsta, jis vis dar priklauso nuo išorinio ištekliaus, kurį reikia įterpti arba pakeisti.
Nurodykite SVG ir atsarginį failą
Pridėkite link rel icon su type image/svg+xml ir nuo šakninio katalogo nurodytu URL. Šakniniame kataloge taip pat palikite favicon.ico programoms, kurios nesirenka SVG arba tiesiogiai užklausia ICO.
SVG nepakeičia Apple Touch ar manifesto piktogramų. Šioms sąsajoms eksportuokite neskaidrius arba apkarpymui pritaikytus PNG failus.
Pritaikykite spalvas prie temos
prefers-color-scheme taisyklė style elemente gali pakeisti fill arba stroke tamsiajame režime. Pirmiausia apibrėžkite patikimą numatytąją spalvą, tada pridėkite versiją kaip laipsnišką patobulinimą.
Išbandykite failą tikrose kortelėse ir keliais mastelio lygiais. Taip pat patikrinkite atsarginį failą, kai SVG nepasirenkamas: tamsiame fone pradingstantis ICO toms programoms vis tiek lieka problema.
Pirminiai šaltiniai
Dažniausi klausimai
Ar SVG reikia width ir height?
Mastelio keitimui svarbiausias kvadratinis viewBox. Galima pridėti aiškius width ir height, tačiau naršyklė piktogramos dydį nustato pagal rodymo aplinką.
Ar galima įkelti išorinį šriftą?
Tuo nepasikliaukite. Raides paverskite kontūrais, kad failas būtų savarankiškas ir rodomas nuspėjamai.
Ar iOS pakanka SVG?
Ne. Pradžios ekranui pateikite atskirą neskaidrią PNG Apple Touch piktogramą.