Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
SVG viewBox – как масштабировать, обрезать и вписать графику
Contents
[
Hide
Show
]SVG viewBox
Атрибут viewBox сообщает SVG, какой координатный прямоугольник нужно вписать в видимый viewport. Изменяя его четыре значения, можно масштабировать графику, обрезать ее, смещать видимую область или сделать так, чтобы один и тот же SVG корректно адаптировался к разным размерам отображения.
Эта статья – практическое руководство по viewBox. Она предполагает, что вы уже знаете, что такое SVG canvas, viewport и система координат. Если эти термины пока неясны, начните со статьи
Системы координат и единицы измерения SVG.
В этой статье вы узнаете, как:
- читать синтаксис
viewBox="min-x min-y width height"; - масштабировать SVG-графику, изменяя
widthиheightвviewBox; - обрезать или смещать SVG-графику, изменяя
min-xиmin-y; - сочетать
viewBoxсpreserveAspectRatioдля responsive SVG.
Как работает viewBox
Спецификация SVG определяет
viewBox как атрибут, который задает пользовательскую систему координат для SVG viewport. Он состоит из четырех значений, разделенных пробелами:
1viewBox="min-x min-y width height"| Значение | Значение в viewBox |
|---|---|
min-x | X-координата начала видимого прямоугольника |
min-y | Y-координата начала видимого прямоугольника |
width | Ширина видимого координатного прямоугольника |
height | Высота видимого координатного прямоугольника |
Viewport – это область вывода, заданная width, height, CSS или окружающим layout. viewBox – это координатный прямоугольник, который SVG отображает в эту область вывода. Если viewBox меньше viewport, выбранная координатная область увеличивается. Если viewBox больше viewport, графика выглядит меньше, потому что в ту же видимую область вписывается больше координатного пространства.
1<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
2 ...
3</svg>- Изменение
min-xилиmin-yперемещает видимый координатный прямоугольник. - Изменение
widthилиheightменяет масштаб. - Изменение всех четырех значений объединяет смещение и масштабирование.
Примечание: На иллюстрациях ниже viewport показан зеленым, а область viewBox – синим.
Пример SVG, используемый в статье
В примерах ниже используется один и тот же простой SVG-рисунок, похожий на цветок. Меняется только значение viewBox, поэтому видно, как координатный прямоугольник влияет на отрисованный результат.
1<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
2 <g fill="RoyalBlue">
3 <rect x="25" y="100" rx="25" ry="25" width="200" height="56" />
4 <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(90 125 128)" />
5 <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(-45 125 128)" />
6 <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(45 125 128)" />
7 </g>
8 <circle cx="125" cy="128" r="28" stroke="pink" stroke-width="50" stroke-dasharray="3 13" fill="Orange" />
9 <circle cx="125" cy="128" r="5" />
10</svg>Масштабирование SVG с viewBox
Масштабирование через viewBox управляется двумя последними значениями: width и height. Они задают, сколько координатного пространства нужно вписать в viewport.
Как больший viewBox уменьшает SVG
Когда width и height в viewBox больше размеров viewport, SVG вписывает большую координатную область в тот же размер вывода. Результат выглядит меньше, потому что одновременно видно больше пространства canvas.
1<svg width="250" height="250" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
Как меньший viewBox увеличивает SVG
Когда width и height в viewBox меньше размеров viewport, SVG увеличивает эту меньшую координатную область так, чтобы она заполнила viewport. Результат выглядит приближенным, а содержимое за пределами выбранного прямоугольника может быть обрезано.
1<svg width="250" height="250" viewBox="0 0 125 125" xmlns="http://www.w3.org/2000/svg">
Обрезка и смещение SVG с viewBox
Обрезка и смещение управляются двумя первыми значениями viewBox: min-x и min-y. Эти значения перемещают начало видимого координатного прямоугольника.
Обрезка правой части
Отрицательное значение min-x сдвигает выбранный координатный прямоугольник влево. В этом примере видимый прямоугольник охватывает x-координаты от -100 до 150, поэтому содержимое справа обрезается.
1<svg width="250" height="250" viewBox="-100 0 250 250" xmlns="http://www.w3.org/2000/svg">
Обрезка левой части
Положительное значение min-x сдвигает выбранный координатный прямоугольник вправо. В этом примере видимый прямоугольник начинается с x-координаты 100, поэтому левая часть графики больше не видна.
1<svg width="250" height="250" viewBox="100 0 250 250" xmlns="http://www.w3.org/2000/svg">
Адаптивный SVG и preserveAspectRatio
Для адаптивного SVG сохраните viewBox, а размер отображения отдайте CSS или контейнеру:
1<svg viewBox="0 0 250 250" width="100%" height="auto" xmlns="http://www.w3.org/2000/svg">По умолчанию SVG сохраняет соотношение сторон из viewBox. Если viewport и viewBox имеют разные пропорции, атрибут
preserveAspectRatio управляет выравниванием и способом вписывания.
1<svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet">Используйте meet, когда все изображение должно оставаться видимым. Используйте slice, когда viewport должен быть заполнен полностью и обрезка допустима.
Как использовать SVG viewBox
- Задайте видимый viewport через
width,height, CSS или layout. - Выберите координатный прямоугольник через
viewBox="min-x min-y width height". - Изменяйте
widthиheightвviewBox, чтобы приблизить или отдалить графику. - Изменяйте
min-xиmin-y, чтобы обрезать или сместить видимую область. - Добавьте
preserveAspectRatio, когда пропорции viewport и viewBox отличаются.
Типичные ошибки и исправления
| Проблема | Причина | Решение |
|---|---|---|
| SVG выглядит растянутым или сжатым | Viewport и viewBox имеют разные соотношения сторон, а поведение вписывания не задано | Добавьте preserveAspectRatio="xMidYMid meet" или выберите другое подходящее значение |
| Графика неожиданно обрезается | Прямоугольник viewBox не покрывает нужную координатную область | Проверьте min-x, min-y, width и height относительно координат графики |
| SVG не масштабируется responsive | У SVG есть фиксированные размеры отображения, но нет viewBox | Сохраните viewBox и управляйте размером через CSS или layout контейнера |
| Изменение CSS-размера не меняет обрезку | CSS меняет размер viewport, а не выбранный координатный прямоугольник | Изменяйте значения viewBox, когда нужна другая область обрезки или приближения |
viewBox игнорируется | Нет кавычек, неправильно использованы запятые или задано неверное число значений | Используйте ровно четыре значения, разделенные пробелами: viewBox="min-x min-y width height" |
Быстрые рецепты
| Задача | SVG-пример |
|---|---|
| Оставить весь SVG масштабируемым | <svg viewBox="0 0 250 250" width="100%" height="auto"> |
| Увеличить в 2 раза | <svg width="250" height="250" viewBox="0 0 125 125"> |
| Уменьшить в 2 раза | <svg width="250" height="250" viewBox="0 0 500 500"> |
| Сместить видимую область вправо | <svg width="250" height="250" viewBox="100 0 250 250"> |
| Сохранить видимость всего изображения | <svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet"> |
| Заполнить viewport даже с обрезкой | <svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid slice"> |
FAQ – SVG viewBox
Что делает атрибут viewBox?
Атрибут viewBox определяет, какой координатный прямоугольник SVG canvas отображается во viewport. Он управляет масштабированием, обрезкой и видимым положением без изменения самих фигур.
Чем viewBox отличается от width и height?
width и height задают размер viewport на выходе. viewBox задает координатную область, которая вписывается в этот viewport. Изменение width и height меняет размер отображения; изменение viewBox меняет, какое координатное пространство показано и как оно масштабируется.
Нужен ли viewBox для адаптивного SVG?
Обычно да. viewBox задает SVG стабильную внутреннюю систему координат, а CSS или размер контейнера могут менять отображаемый размер. Это самый надежный шаблон для адаптивной SVG-графики.
Можно ли обрезать SVG через viewBox?
Да. Измените min-x, min-y, width и height, чтобы viewBox охватывал только ту часть canvas, которую нужно показать. Все, что находится за пределами выбранного координатного прямоугольника, обрезается viewport.
Меняет ли viewBox path data или координаты фигур?
Нет. viewBox меняет то, как существующие координаты отображаются во viewport. Он не переписывает d, x, y, cx, cy или другие атрибуты геометрии.
Спецификация и связанные ресурсы
- Раздел спецификации SVG об атрибуте
viewBoxопределяет, как пользовательский координатный прямоугольник отображается во viewport. - Раздел об атрибуте
preserveAspectRatioобъясняет, как SVG выравнивает и масштабирует содержимоеviewBox, когда соотношения сторон отличаются. - Начните со статьи
Системы координат и единицы измерения SVG, если нужна координатная модель, лежащая в основе
viewBox. - Используйте
SVG-трансформации, когда нужно перемещать, поворачивать, масштабировать, наклонять или отражать существующие SVG-элементы через атрибут
transform. - Откройте
SVG-фигуры, чтобы увидеть, как координаты задают прямоугольники, круги, эллипсы, линии, polyline и polygon до того, как
viewBoxизменит масштаб их отображения. - Перейдите к статье Что такое SVG-файл? для более широкого обзора структуры SVG, преимуществ и основ файлового формата.