SVG heldur brúnum skörpum við hvaða pixlaþéttleika sem er og getur aðlagað liti að þemanu. Þessum sveigjanleika fylgir eitt skilyrði: skráin verður að vera sjálfstæð, einföld og læsileg í örlitlu rými.
Búðu til ferning með viewBox
Notaðu ferningslaga viewBox, svo sem 0 0 64 64, og skildu eftir svigrúm utan um táknið. viewBox skilgreinir hnitakerfið án þess að ákveða raunverulega stærð við birtingu.
Einfaldaðu myndina niður í auðþekkjanleg form. Fín smáatriði, örlítil innrými í stöfum og heil orð hverfa oft í 16 pixlum þótt vigurskráin sé tæknilega áfram skörp.
| Atriði | Ástæða | Prófun |
|---|---|---|
| Ferningslaga viewBox | Fyrirsjáanlegur skurður | 16×16-forskoðun |
| Einfaldir ferlar | Læsileiki | Ljósir og dökkir flipar |
| Engin ytri gögn | Sjálfstæð hleðsla | Án nettengingar |
| ICO til vara | Eldri forrit | Vefslóð í rót |
Gerðu skrána sjálfstæða
Felldu nauðsynlega stíla inn í SVG. Breyttu texta í ferla þegar táknið byggir á ákveðnu letri því ytra vefletur er ekki áreiðanleg forsenda við þessar aðstæður.
Fjarlægðu skriftur, fjartengla og óþörf lýsigögn úr myndvinnsluforritinu. Einföld form og stílar auðvelda einnig öryggisrýni og minnka skrána.
Opnaðu að lokum skrána eina og sér í vafra og prófaðu án nettengingar. Ef myndin breytist eða hverfur er hún enn háð ytri gögnum sem þarf að fella inn eða skipta út.
Tilgreindu SVG með varaleið
Bættu við link rel icon með type image/svg+xml og slóð frá rót. Haltu líka favicon.ico í rótinni fyrir forrit sem velja ekki SVG eða biðja beint um ICO.
SVG kemur ekki í stað Apple Touch-tákns eða tákna í birtingarskrá. Flyttu út ógegnsæjar PNG-skrár eða maskable-útgáfur fyrir það viðmót.
Aðlagaðu liti að þemanu
prefers-color-scheme-regla innan style-einingar getur breytt fill eða stroke í dökkri stillingu. Skilgreindu fyrst áreiðanlegan sjálfgefinn lit og bættu síðan dökku útgáfunni við sem stigvaxandi endurbót.
Prófaðu skrána á raunverulegum flipum og við nokkur aðdráttarstig. Skoðaðu líka varaskrána þegar SVG er ekki valið: ICO sem hverfur á dökkum bakgrunni er enn vandamál í þeim forritum.
Frumheimildir
Algengar spurningar
Þarf SVG width og height?
Ferningslaga viewBox er lykilatriðið fyrir skölun. Hægt er að hafa skýrt width og height með en vafrinn aðlagar stærð táknsins að aðstæðum.
Getur það sótt ytra letur?
Ekki treysta á það. Breyttu stöfum í ferla til að fá sjálfstæða skrá með fyrirsjáanlegri birtingu.
Dugar SVG fyrir iOS?
Nei. Gefðu upp sérstakt ógegnsætt Apple Touch-tákn á PNG-sniði fyrir heimaskjáinn.