viewBox SVG и адаптивное масштабирование

Значения width и height SVG задают размер отображения в DOM. Атрибут viewBox определяет внутреннее пространство координат. Эти параметры независимы: viewBox="0 0 100 100" при width="200" и height="200" увеличивает пространство координат в 2 раза.

viewBox="min-x min-y width height". Наиболее распространённый вариант: viewBox="0 0 100 100" задаёт пространство координат размером 100×100, начинающееся в начале координат. Значения координат в SVG относятся к этому пространству, а не к пикселям.

Чтобы сделать SVG адаптивным, не указывайте атрибуты width и height или задайте им значение 100% и позвольте viewBox определять пропорции. Добавьте CSS: svg { width: 100%; height: auto; }. SVG масштабируется под размер контейнера, сохраняя соотношение сторон.

preserveAspectRatio управляет тем, как viewBox вписывается в область просмотра SVG при различии соотношений сторон. Возможные значения: "xMidYMid meet" (по умолчанию — с пустыми полями), "xMidYMid slice" (обрезка для заполнения), "none" (растягивание без сохранения соотношения сторон).

Изменение min-x и min-y позволяет панорамировать видимую часть пространства координат SVG. viewBox="50 50 100 100" показывает область от (50,50) до (150,150). Это позволяет реализовать интерактивное панорамирование, обновляя значения viewBox с помощью JavaScript.

Уменьшите размеры viewBox, чтобы приблизить изображение: viewBox="25 25 50 50" показывает меньшую область, увеличенную до размера элемента SVG. Увеличьте размеры, чтобы отдалить изображение. Обновляйте viewBox при событиях колеса мыши, чтобы реализовать интерактивное масштабирование без изменения размера элемента SVG.

SVG в теге img: адаптивно масштабируется с помощью object-fit, но не поддерживает стилизацию через CSS и управление с помощью скриптов. Встроенный SVG: полностью доступен для CSS и JavaScript, но увеличивает размер HTML. Выбирайте вариант с учётом требований к интерактивности.

SVG-значки используют фиксированный viewBox, например "0 0 24 24", и не задают width и height, позволяя CSS управлять их размером: .icon { width: 1.5rem; height: 1.5rem; }. viewBox обеспечивает правильное масштабирование значков при любом размере и сохраняет чёткость векторного изображения.

Определяйте значки внутри скрытого SVG с помощью элементов <symbol viewBox="0 0 24 24">. Ссылайтесь на них так: <use href="#icon-name">. Каждый элемент use может иметь собственные width, height, fill и color — один файл спрайта для всех значков.

Значение SVG fill="currentColor" наследует свойство CSS color от самого элемента или его родителя. Задайте color: red для SVG или родительского элемента, и значок автоматически заполнится красным цветом. Это позволяет одноцветным значкам следовать цвету текста без специальных стилей SVG.

Если содержимое SVG обрезается или неожиданно располагается, выведите значение viewBox в журнал или проверьте его. Распространённая ошибка — задать viewBox равным размерам исходного изображения в пикселях, не скорректировав отображаемый размер, из-за чего возникают проблемы с масштабированием. Убедитесь, что viewBox соответствует фактическим границам содержимого изображения SVG.

viewBox SVG определяет внутреннее пространство координат, независимое от отображаемого размера в пикселях, и тем самым обеспечивает адаптивное масштабирование. Значения width:100% и height:auto вместе с viewBox позволяют SVG подстраиваться под любой контейнер. Шаблон спрайта symbol+use, темизация с помощью currentColor и preserveAspectRatio образуют полный набор средств для гибкого использования SVG с поддержкой тем.