Адаптивные SVG-иконки: viewBox, размеры и область нажатия
Обновлено .
Масштабирование иконки и удобство нажатия — разные задачи. SVG можно вывести в 16, 24 или 32 CSS-пикселя, сохранив геометрию. Но маленький рисунок внутри ссылки не обязан означать такую же маленькую область взаимодействия.
Координаты рисунка и размер на странице
В viewBox="0 0 24 24" первые два числа задают начало координат, следующие — ширину и высоту внутренней области. Атрибуты width и height задают размер вывода. Изменение width с 24 на 48 увеличивает рисунок в два раза; переписывать координаты пути не требуется.
<a class="icon-link" href="/icons.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="10" cy="10" r="6"/><path d="m15 15 6 6"/></svg><span>Иконки</span></a>
<style>
.icon-link { display:inline-flex; align-items:center; gap:.5rem;
min-height:44px; padding:0 .75rem; }
.icon-link svg { width:1.5rem; height:1.5rem; flex:none; }
.icon-link:focus-visible { outline:3px solid #2457a7; outline-offset:3px; }
</style>44 px здесь — выбранный размер учебного компонента, а не заявление о соответствии всего сайта стандарту. Ссылка ведёт в существующий раздел, поэтому пример не требует имитации кнопки или обработчика.
Как проверить рисунок
| Проверка | Признак проблемы | Решение |
|---|---|---|
| 16 px | Пропали просветы | Упростить детали, подготовить компактную версию |
| 24–32 px | Символ смещён | Проверить viewBox и свободные поля |
| Узкий экран | Подпись выталкивает соседей | Разрешить перенос или изменить компоновку |
| Увеличение страницы | Обрезается текст | Убрать жёсткую высоту контейнера |
Почему вектор тоже бывает нечётким
Вектор не превращает сложный рисунок в читаемую пиктограмму автоматически. При сильном уменьшении тонкие штрихи и зазоры занимают доли пикселя. Начинайте с сетки и проверяйте реальные размеры. Иногда нужна упрощённая геометрия, а не очередное CSS-масштабирование.
Не подменяйте размер экрана плотностью пикселей: 24 CSS-пикселя и 24 физических пикселя не всегда совпадают. Проверьте хотя бы обычный и плотный экран. Это план проверки для вашего проекта; результатов измерения конверсии данный пример не обещает.
Источники и проверка
По теме: Иконочный шрифт или SVG: выбор и пример внедрения · Доступные иконки: имя действия, декоративный SVG и проверка.