SVG zachowuje ostre krawędzie przy każdej gęstości pikseli i może dostosowywać kolory do motywu. Ta elastyczność ma jeden warunek: plik musi pozostać samodzielny, prosty i czytelny na bardzo małej powierzchni.
Utwórz kwadrat za pomocą viewBox
Użyj kwadratowego viewBox, np. 0 0 64 64, i zostaw margines wokół symbolu. viewBox określa układ współrzędnych bez narzucania fizycznego rozmiaru wyświetlania.
Ogranicz grafikę do jej charakterystycznych kształtów. Drobne szczegóły, małe światła wewnątrz liter i całe słowa często znikają przy 16 pikselach, choć plik wektorowy technicznie pozostaje ostry.
| Element | Dlaczego | Test |
|---|---|---|
| Kwadratowy viewBox | Przewidywalne kadrowanie | Podgląd 16×16 |
| Proste ścieżki | Czytelność | Jasne i ciemne karty |
| Brak zależności | Samodzielne wczytywanie | Sieć offline |
| Zapasowy ICO | Starsze programy | URL katalogu głównego |
Zadbaj o samodzielność pliku
Umieść potrzebne style wewnątrz SVG. Zamień tekst na krzywe, jeśli symbol zależy od kroju pisma, ponieważ zewnętrzna czcionka internetowa nie jest niezawodną zależnością w tym kontekście.
Usuń skrypty, zdalne odnośniki i niepotrzebne metadane edytora. Proste kształty i style ułatwiają również kontrolę bezpieczeństwa i zmniejszają plik.
Na koniec otwórz sam plik w przeglądarce i przetestuj go offline. Jeśli grafika zmienia się lub znika, nadal zależy od zewnętrznego zasobu, który trzeba osadzić lub zastąpić.
Zadeklaruj SVG z wariantem zapasowym
Dodaj link rel icon z type image/svg+xml i URL względem katalogu głównego. Zachowaj też favicon.ico w katalogu głównym dla klientów, które nie wybierają SVG lub bezpośrednio pobierają ICO.
SVG nie zastępuje ikony Apple Touch ani ikon manifestu. Dla tych interfejsów eksportuj nieprzezroczyste PNG lub pliki PNG z maskowaniem.
Dostosuj kolory do motywu
Reguła prefers-color-scheme wewnątrz elementu style może zmieniać fill lub stroke w trybie ciemnym. Najpierw zdefiniuj niezawodny kolor domyślny, a następnie dodaj wariant jako stopniowe rozszerzenie możliwości.
Przetestuj plik na prawdziwych kartach i przy różnych poziomach powiększenia. Sprawdź też wariant zapasowy, gdy SVG nie zostaje wybrany: ICO znikający na ciemnym tle nadal jest problemem dla tych klientów.
Źródła pierwotne
Najczęstsze pytania
Czy SVG potrzebuje width i height?
Kwadratowy viewBox jest najważniejszy dla skalowania. Można jawnie podać width i height, ale przeglądarka dopasowuje rozmiar ikony do miejsca wyświetlania.
Czy może wczytać zewnętrzną czcionkę?
Nie polegaj na tym. Zamień litery na krzywe, aby plik był samodzielny i przewidywalny.
Czy SVG wystarczy dla iOS?
Nie. Przygotuj osobną ikonę Apple Touch w nieprzezroczystym PNG dla ekranu głównego.