SVG
Элемент SVG

Viewbox

Атрибут viewBox определяет систему координат для элемента <svg> . Это позволяет легко изменять размер и относительную пропорцию изображения SVG без необходимости корректировать положение и размеры каждого отдельного рисованного элемента.

<!-- stretches a small icon to 60px square -->
<svg viewBox="0 0 16 16" height="60px" width="60px">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

Этот код выглядит следующим образом:

Без viewBox это выглядит так:

preserveAspectRatio

preserveAspectRatio - это атрибут, который указывает, следует ли масштабировать изображение равномерно. Этот атрибут работает только в том случае, если элемент <svg> также имеет viewBox .

Значение по умолчанию - xMidYMid , которое поддерживает соотношение сторон и центрирует путь внутри контейнера SVG:

<!-- when not included `preserveAspectRatio` defaults to `xMidYMid` -->
<svg viewBox="0 0 16 16" height="60" width="120">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

Если для параметра preserveAspectRatio установлено значение none , значок растягивается в соответствии с полем:

<svg viewBox="0 0 16 16" height="60" width="120" preserveAspectRatio="none">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

Есть много других значений для preserveAspectRatio , но эти два являются, безусловно, наиболее распространенными.

preserveAspectRatio - атрибуты соответствия и среза

Атрибут preserveAspectRatio имеет необязательный параметр: meet | slice . Поведение по умолчанию meet тянущийся содержание как в х и у измерения , пока он не заполнит ширину или высоту Viewbox. Альтернатива - slice сохраняет соотношение сторон содержания , но масштабируется графику , пока она не заполнит и ширину и высоту окна видимости (обрезкой содержимое , которое перетекает в Viewbox).

Это пример использования slice

<svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin slice">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />

который отображается как:

и тот же пример , использующий meet

    <svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin meet">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

который отображается как: