SVG одржава оштре ивице на свакој густини пиксела и може прилагодити боје теми. Та флексибилност носи једно ограничење: датотека мора остати самостална, једноставна и читљива у веома малом простору.
Направите квадрат помоћу viewBox
Користите квадратни viewBox, на пример 0 0 64 64, и оставите размак око симбола. viewBox одређује координатни систем без наметања физичке величине приказа.
Сведите графику на препознатљиве облике. Фини детаљи, ситни отвори слова и целе речи често нестају на 16 пиксела, иако векторска датотека технички остаје оштра.
| Ставка | Зашто | Тест |
|---|---|---|
| Квадратни viewBox | Предвидљиво исецање | Преглед 16×16 |
| Једноставне путање | Читљивост | Светле и тамне картице |
| Без зависности | Самостално учитавање | Мрежа без интернета |
| Резервни ICO | Старији клијенти | URL у корену |
Учините датотеку самосталном
Уградите потребне стилове у SVG. Претворите текст у путање када симбол зависи од фонта, јер спољни веб фонт није поуздана зависност у овом контексту.
Уклоните скрипте, удаљене везе и непотребне метаподатке уређивача. Једноставни облици и стилови олакшавају и безбедносни преглед и смањују величину датотеке.
На крају отворите саму датотеку у прегледачу и испробајте је без интернета. Ако се графика промени или нестане, још зависи од спољног ресурса који треба уградити или заменити.
Наведите SVG са резервним форматом
Додајте link rel icon са type image/svg+xml и адресом у односу на корен. Задржите и favicon.ico у корену за клијенте који не бирају SVG или непосредно траже ICO.
SVG не замењује икону Apple Touch ни иконе манифеста. За те интерфејсе извезите непрозирне или maskable PNG датотеке.
Прилагодите боје теми
Правило prefers-color-scheme унутар style елемента може променити fill или stroke у тамном режиму. Прво одредите поуздану подразумевану боју, па додајте варијанту као прогресивно побољшање.
Испробајте датотеку на стварним картицама и при више нивоа увећања. Проверите и резервни приказ када SVG није изабран: ICO који нестаје на тамној позадини остаје проблем за те клијенте.
Примарни извори
Честа питања
Да ли су SVG датотеци потребни width и height?
Квадратни viewBox је кључан за скалирање. Можете навести width и height, али прегледач одређује величину иконе за дати контекст.
Може ли учитати спољни фонт?
Немојте се ослањати на то. Претворите слова у путање да добијете самосталну датотеку предвидљивог изгледа.
Да ли је SVG довољан за iOS?
Не. За почетни екран припремите засебну непрозирну PNG икону Apple Touch.