Az SVG minden képpontsűrűségnél éles széleket ad, és színeit a témához igazíthatja. Ennek a rugalmasságnak feltétele van: a fájl maradjon önálló, egyszerű és apró helyen is olvasható.
Készíts négyzetet viewBox használatával
Használj négyzetes viewBox értéket, például 0 0 64 64, és hagyj térközt a jelkép körül. A viewBox a koordináta-rendszert határozza meg anélkül, hogy fizikai megjelenítési méretet kényszerítene ki.
Egyszerűsítsd a grafikát a jellegzetes formákra. A finom részletek, apró betűbelsők és teljes szavak gyakran eltűnnek 16 képponton, még ha a vektorfájl technikailag éles is marad.
| Elem | Indok | Teszt |
|---|---|---|
| Négyzetes viewBox | Kiszámítható kivágás | 16×16-os előnézet |
| Egyszerű görbék | Olvashatóság | Világos és sötét fülek |
| Függőségek nélkül | Önálló betöltés | Hálózat nélkül |
| ICO-tartalék | Régebbi kliensek | Gyökérszintű URL |
Tedd önállóvá a fájlt
Ágyazd a szükséges stílusokat az SVG-be. Ha a jelkép egy betűtípusra épül, alakítsd a szöveget görbékké, mert a külső webes betűtípus ebben a környezetben nem megbízható függőség.
Távolítsd el a szkripteket, távoli hivatkozásokat és szükségtelen szerkesztői metaadatokat. Az egyszerű formák és stílusok a biztonsági ellenőrzést is könnyítik, és csökkentik a fájlméretet.
Végül nyisd meg önmagában a fájlt egy böngészőben, és teszteld internet nélkül is. Ha a grafika megváltozik vagy eltűnik, még mindig külső erőforrástól függ, amelyet be kell ágyazni vagy helyettesíteni kell.
SVG megadása tartalékkal
Adj hozzá link rel icon elemet type image/svg+xml értékkel és a gyökérhez viszonyított URL-lel. A favicon.ico is maradjon a gyökérben azoknak a klienseknek, amelyek nem választanak SVG-t vagy közvetlenül ICO-t kérnek.
Az SVG nem helyettesíti az Apple Touch ikont vagy a jegyzékikonokat. Ezekhez a felületekhez exportálj nem átlátszó vagy maszkolható PNG-fájlokat.
Igazítsd a színeket a témához
A style elemben lévő prefers-color-scheme szabály sötét módban módosíthatja a fill vagy stroke értékét. Először adj meg megbízható alapértelmezett színt, majd fokozatos kiegészítésként add hozzá a változatot.
Teszteld a fájlt valódi böngészőfüleken és több nagyítási szinten. A tartalékot is vizsgáld meg arra az esetre, ha nem az SVG kerül kiválasztásra: a sötét háttéren eltűnő ICO továbbra is problémát jelent ezeknek a klienseknek.
Elsődleges források
Gyakori kérdések
Kell width és height az SVG-hez?
A méretezés lényegi része a négyzetes viewBox. Explicit width és height is megadható, de a böngésző a környezethez igazítja az ikon méretét.
Betölthet külső betűtípust?
Ne támaszkodj erre. Alakítsd a betűket görbékké, hogy a fájl önálló és kiszámítható legyen.
Elég az SVG az iOS-hez?
Nem. A kezdőképernyőhöz külön, nem átlátszó PNG Apple Touch ikont készíts.