SVG pitää reunat tarkkoina kaikilla pikselitiheyksillä ja voi mukauttaa värit teemaan. Joustavuus tuo yhden vaatimuksen: tiedoston on pysyttävä itsenäisenä, yksinkertaisena ja luettavana hyvin pienessä tilassa.
Luo neliö viewBox-määrityksellä
Käytä neliömäistä viewBox-arvoa, esimerkiksi 0 0 64 64, ja jätä marginaali symbolin ympärille. viewBox määrittää koordinaatiston asettamatta kuvalle fyysistä esityskokoa.
Pelkistä piirros sen tunnistettaviin muotoihin. Ohuet yksityiskohdat, pienet sisäaukot ja kokonaiset sanat katoavat usein 16 pikselin koossa, vaikka vektoritiedosto pysyy teknisesti tarkkana.
| Kohde | Perustelu | Testi |
|---|---|---|
| Neliömäinen viewBox | Ennustettava rajaus | 16×16-esikatselu |
| Yksinkertaiset polut | Luettavuus | Vaalea ja tumma välilehti |
| Ei riippuvuuksia | Itsenäinen lataus | Ilman verkkoyhteyttä |
| ICO-varakuvake | Vanhemmat ohjelmat | Juuren URL |
Tee tiedostosta itsenäinen
Sisällytä tarvittavat tyylit SVG:hen. Muunna teksti poluiksi, jos symboli riippuu tietystä kirjasimesta, sillä ulkoinen verkkofontti ei ole tässä yhteydessä luotettava riippuvuus.
Poista komentosarjat, etälinkit ja turhat muokkausohjelman metatiedot. Yksinkertaiset muodot ja tyylit helpottavat myös turvallisuustarkastusta ja pienentävät tiedostoa.
Avaa lopuksi tiedosto yksin selaimessa ja testaa sitä ilman verkkoyhteyttä. Jos piirros muuttuu tai katoaa, se riippuu yhä ulkoisesta resurssista, joka on sisällytettävä tiedostoon tai korvattava.
Määritä SVG ja varavaihtoehto
Lisää link rel icon, tyypiksi image/svg+xml ja osoitteeksi juureen suhteutettu URL. Säilytä myös favicon.ico juuressa ohjelmille, jotka eivät valitse SVG:tä tai pyytävät ICO:ta suoraan.
SVG ei korvaa Apple Touch -kuvaketta tai manifestikuvakkeita. Vie näitä käyttöliittymiä varten peittävät tai maskable-tyyppiset PNG-kuvat.
Mukauta värit teemaan
style-elementin prefers-color-scheme-sääntö voi muuttaa fill- tai stroke-arvoa tummassa tilassa. Määritä ensin luotettava oletusväri ja lisää versio sitten asteittaisena parannuksena.
Testaa tiedostoa oikeilla välilehdillä ja useilla zoomaustasoilla. Tarkista myös varavaihtoehto silloin, kun SVG:tä ei valita: tummalle taustalle katoava ICO on edelleen ongelma sitä käyttäville ohjelmille.
Alkuperäislähteet
Usein kysytyt kysymykset
Tarvitseeko SVG leveyden ja korkeuden?
Neliömäinen viewBox on koon muuttamisen olennainen osa. Tarkka leveys ja korkeus voidaan lisätä, mutta selain mitoittaa kuvakkeen käyttötilanteen mukaan.
Voiko kuvake ladata ulkoisen fontin?
Älä luota siihen. Muunna kirjaimet poluiksi, jotta tiedosto on itsenäinen ja toimii ennustettavasti.
Riittääkö SVG iOS:lle?
Ei. Tarjoa aloitusnäyttöä varten erillinen peittävä PNG-muotoinen Apple Touch -kuvake.