SVG zachováva ostré obrysy pri každej hustote pixelov a môže prispôsobiť farby motívu. Táto pružnosť má podmienku: súbor musí zostať samostatný, jednoduchý a čitateľný na veľmi malej ploche.
Vytvorte štvorec pomocou viewBox
Použite štvorcový viewBox, napríklad 0 0 64 64, a okolo symbolu ponechajte okraj. viewBox definuje súradnicový systém bez vynútenia fyzického rozmeru zobrazenia.
Zjednodušte kresbu na charakteristické tvary. Jemné detaily, malé vnútorné priestory a celé slová pri 16 pixeloch často zmiznú, aj keď vektorový súbor zostáva technicky ostrý.
| Bod | Dôvod | Test |
|---|---|---|
| Štvorcový viewBox | Predvídateľné orezanie | Náhľad 16×16 |
| Jednoduché krivky | Čitateľnosť | Svetlá a tmavá karta |
| Bez závislostí | Samostatné načítanie | Sieť offline |
| Záložné ICO | Staršie klienty | URL od koreňa |
Vytvorte samostatný súbor
Potrebné štýly vložte priamo do SVG. Ak symbol závisí od typografie, preveďte text na krivky, pretože externé webové písmo nie je v tomto kontexte spoľahlivé.
Odstráňte skripty, vzdialené odkazy a nepotrebné metadáta editora. Jednoduché tvary a štýly tiež uľahčujú bezpečnostný audit a zmenšujú súbor.
Nakoniec otvorte samotný súbor v prehliadači a otestujte ho offline. Ak sa kresba zmení alebo zmizne, stále závisí od externého zdroja, ktorý treba vložiť alebo nahradiť.
Deklarujte SVG so záložným formátom
Pridajte link rel icon s type image/svg+xml a URL od koreňa. Ponechajte tiež favicon.ico v koreňovom adresári pre klienty, ktoré nevyberú SVG alebo priamo požadujú ICO.
SVG nenahrádza ikonu Apple Touch ani ikony manifestu. Pre tieto rozhrania exportujte nepriehľadné PNG alebo verzie maskable.
Prispôsobte farby motívu
Pravidlo prefers-color-scheme v značke style môže v tmavom režime zmeniť fill alebo stroke. Najprv definujte spoľahlivú predvolenú farbu a potom pridajte variant ako postupné vylepšenie.
Otestujte súbor na skutočných kartách a pri viacerých úrovniach priblíženia. Overte aj záložný formát, keď sa SVG nevyberie: ICO neviditeľné na tmavom pozadí zostáva pre tieto klienty problémom.
Primárne zdroje
Časté otázky
Potrebuje SVG šírku a výšku?
Štvorcový viewBox je zásadný pre zmenu rozmerov. Explicitnú šírku a výšku môžete pridať, no prehliadač prispôsobuje veľkosť ikony podľa kontextu.
Dá sa načítať externé písmo?
Nespoliehajte sa na to. Preveďte písmená na krivky, aby bol súbor samostatný a predvídateľný.
Stačí SVG pre iOS?
Nie. Pre domovskú obrazovku poskytnite samostatnú nepriehľadnú ikonu Apple Touch vo formáte PNG.