SVG zachovává ostré obrysy při každé hustotě pixelů a umí přizpůsobit barvy motivu. Tato flexibilita má jednu podmínku: soubor musí být samostatný, jednoduchý a čitelný v miniaturním prostoru.
Vytvořte čtverec pomocí viewBox
Použijte čtvercový viewBox, například 0 0 64 64, a kolem symbolu nechte okraj. viewBox určuje souřadnicový systém, aniž by vynucoval fyzické rozměry zobrazení.
Zjednodušte kresbu na charakteristické tvary. Jemné detaily, malé vnitřní mezery a celá slova při 16 pixelech často zmizí, i když vektorový soubor technicky zůstává ostrý.
| Položka | Důvod | Test |
|---|---|---|
| Čtvercový viewBox | Předvídatelný ořez | Náhled 16×16 |
| Jednoduché křivky | Čitelnost | Světlá a tmavá karta |
| Žádné závislosti | Samostatné načítání | Síť offline |
| Záložní ICO | Starší klienti | URL v kořeni |
Zajistěte samostatnost souboru
Potřebné styly vložte přímo do SVG. Pokud symbol závisí na typografii, převeďte text na křivky, protože externí webové písmo není v tomto kontextu spolehlivou závislostí.
Odstraňte skripty, vzdálené odkazy a nepotřebná metadata editoru. Jednoduché tvary a styly také usnadňují bezpečnostní kontrolu a zmenšují soubor.
Nakonec soubor otevřete samostatně v prohlížeči a vyzkoušejte ho offline. Pokud se kresba změní nebo zmizí, stále závisí na externím zdroji, který je třeba vložit nebo nahradit.
Deklarujte SVG se záložní variantou
Přidejte link rel icon s typem image/svg+xml a URL od kořene webu. V kořenovém adresáři ponechte také favicon.ico pro klienty, kteří SVG nevyberou nebo požadují ICO přímo.
SVG nenahrazuje ikonu Apple Touch ani ikony manifestu. Pro tato rozhraní exportujte vhodná neprůhledná nebo maskovatelná PNG.
Přizpůsobte barvy motivu
Pravidlo prefers-color-scheme ve značce style může v tmavém režimu změnit fill nebo stroke. Nejprve definujte spolehlivou výchozí barvu a pak přidejte variantu jako postupné vylepšení.
Testujte soubor ve skutečných kartách a při různém přiblížení. Ověřte také záložní variantu, když není vybráno SVG: ICO neviditelné na tmavém pozadí je pro tyto klienty stále problém.
Primární zdroje
Časté otázky
Potřebuje SVG šířku a výšku?
Pro změnu velikosti je zásadní čtvercový viewBox. Explicitní šířku a výšku můžete přidat, prohlížeč ale velikost ikony nastaví podle kontextu.
Lze načíst externí písmo?
Nespoléhejte na to. Převeďte písmena na křivky, aby soubor fungoval samostatně a předvídatelně.
Stačí SVG pro iOS?
Ne. Pro plochu vytvořte zvlášť neprůhlednou ikonu Apple Touch ve formátu PNG.