SVG håller kanterna skarpa vid alla pixeltätheter och kan anpassa färgerna efter temat. Flexibiliteten har ett krav: filen måste vara fristående, enkel och läsbar på en mycket liten yta.
Skapa en kvadrat med viewBox
Använd en kvadratisk viewBox, till exempel 0 0 64 64, och lämna marginal runt symbolen. viewBox anger koordinatsystemet utan att bestämma en fysisk visningsstorlek.
Förenkla motivet till dess särskiljande former. Fina detaljer, små hålrum i bokstäver och hela ord försvinner ofta vid 16 pixlar även om vektorfilen tekniskt sett är skarp.
| Del | Varför | Test |
|---|---|---|
| Kvadratisk viewBox | Förutsägbar beskärning | Förhandsvisning i 16×16 |
| Enkla banor | Läsbarhet | Ljusa och mörka flikar |
| Inga beroenden | Fristående laddning | Utan nätverksanslutning |
| ICO som reserv | Äldre klienter | Adress i roten |
Gör filen fristående
Bädda in nödvändiga stilar i SVG-filen. Om symbolen bygger på ett typsnitt bör texten omvandlas till banor, eftersom ett externt webbtypsnitt inte är ett tillförlitligt beroende i detta sammanhang.
Ta bort skript, externa länkar och onödig metadata från ritprogrammet. Enkla former och stilar gör också säkerhetsgranskningen lättare och minskar filstorleken.
Öppna slutligen filen direkt i en webbläsare och testa den offline. Om motivet ändras eller försvinner är det fortfarande beroende av en extern resurs som måste bäddas in eller ersättas.
Deklarera SVG med ett reservformat
Lägg till link rel icon med type image/svg+xml och en rotrelativ adress. Behåll även favicon.ico i roten för klienter som inte väljer SVG eller begär ICO direkt.
SVG ersätter inte Apple Touch-ikonen eller manifestikonerna. Exportera ogenomskinliga eller maskbara PNG-filer för dessa gränssnitt.
Anpassa färgerna efter temat
En prefers-color-scheme-regel i ett style-element kan ändra fill eller stroke i mörkt läge. Börja med en fungerande standardfärg och lägg sedan till varianten som en progressiv förbättring.
Testa filen i riktiga flikar och vid flera zoomnivåer. Granska även reservformatet när SVG inte väljs: en ICO som försvinner mot mörk bakgrund är fortfarande ett problem för dessa klienter.
Primärkällor
Vanliga frågor
Behöver en SVG width och height?
En kvadratisk viewBox är det viktigaste för skalningen. Uttryckliga width och height kan anges, men webbläsaren anpassar ikonens storlek efter sammanhanget.
Kan den ladda ett externt typsnitt?
Räkna inte med det. Omvandla bokstäverna till banor för att få en fristående fil med förutsägbart resultat.
Räcker SVG för iOS?
Nej. Tillhandahåll en separat, ogenomskinlig Apple Touch-ikon i PNG-format för hemskärmen.