Svg size with css

width

The width attribute defines the horizontal length of an element in the user coordinate system.

You can use this attribute with the following SVG elements:

Example

html, body, svg  height: 100%; > 

svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> rect x="0" y="0" width="0" height="90" /> rect x="0" y="100" width="60" height="90" /> rect x="0" y="200" width="100%" height="90" /> svg> 

feBlend

Value	|
Default value	100%
Animatable	Yes

feColorMatrix

Value	|
Default value	100%
Animatable	Yes

feComponentTransfer

Value	|
Default value	100%
Animatable	Yes

feComposite

Value	|
Default value	100%
Animatable	Yes

feConvolveMatrix

Value	|
Default value	100%
Animatable	Yes

feDiffuseLighting

Value	|
Default value	100%
Animatable	Yes

feDisplacementMap

Value	|
Default value	100%
Animatable	Yes

feDropShadow

Value	|
Default value	100%
Animatable	Yes

feFlood

Value	|
Default value	100%
Animatable	Yes

feGaussianBlur

Value	|
Default value	100%
Animatable	Yes

feImage

Value	|
Default value	100%
Animatable	Yes

feMerge

Value	|
Default value	100%
Animatable	Yes

feMorphology

Value	|
Default value	100%
Animatable	Yes

feOffset

Value	|
Default value	100%
Animatable	Yes

feSpecularLighting

Value	|
Default value	100%
Animatable	Yes

feTile

Value	|
Default value	100%
Animatable	Yes

feTurbulence

Value	|
Default value	100%
Animatable	Yes

filter

Value	|
Default value	120%
Animatable	Yes

foreignObject

Value	auto | |
Default value	auto (treated as 0 )
Animatable	Yes

Note: Starting with SVG2, width is a Geometry Property meaning this attribute can also be used as a CSS property for .

image

Value	auto | |
Default value	auto (treated as the intrinsic width of the image)
Animatable	Yes

Note: Starting with SVG2, width is a Geometry Property meaning this attribute can also be used as a CSS property for images.

mask

Value	|
Default value	120%
Animatable	Yes

pattern

Value
Default value	0
Animatable	Yes

rect

Value	auto | |
Default value	auto (treated as 0 )
Animatable	Yes

Note: Starting with SVG2, width is a Geometry Property meaning this attribute can also be used as a CSS property for rectangles.

svg

Note: In an HTML document if both the viewBox and width attributes are omitted, the svg element will be rendered with a width of 300px

Note: Starting with SVG2, width is a Geometry Property meaning this attribute can also be used as a CSS property for .

use

Value	auto | |
Default value	auto (treated as 0 )
Animatable	Yes

Note: width has no effect on use elements, unless the element referenced has a viewBox — i.e. they only have an effect when use refers to a svg or symbol element.

Note: Starting with SVG2, width is a Geometry Property meaning this attribute can also be used as a CSS property for used elements.

Specifications

Found a content problem with this page?

This page was last modified on May 3, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Размеры в SVG

Управление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает.

Вьюпорт

Содержимое SVG-элемента отрисовывается на бесконечном холсте и может быть сколь угодно большого размера, но видимая часть холста соответствует размерам SVG-элемента. Эта область отрисовки называется viewport (вьюпорт).

SVG позволяет управлять как размерами вьюпорта, так и поведением содержимого относительно него: оно может обрезаться или показываться полностью, может растягиваться с потерей пропорций или стараться уместиться целиком, даже если при этом появляются пустые поля. Этим поведением можно управлять с помощью атрибутов.

Если просто вставить SVG на страницу и не задавать ему никакие размеры, он отобразится размером 300px на 150px, что не поместилось — обрежется:

Ширина и высота

Шириной и высотой элемента можно управлять стандартными свойствами width и height :

svg width="350" height="200"> . svg>

Их можно задавать как атрибутами, так и в CSS:

.mysvg  width: 350px; height: 200px; >

Для размеров в пикселях, задаваемых в атрибутах, единицы измерения можно не указывать.

Потаскайте ползунки, и вы увидите, что изменение ширины и высоты влияет только на вьюпорт и не влияет на содержимое, потому что оно отрисовывается на бесконечном холсте, и неизвестно область какого размера нужно ресайзить.

viewBox

Похожим образом не изменяя размеры содержимого ресайзится iframe , но в случае с SVG это поведение можно изменить, если определить размеры области с помощью свойства viewBox :

svg width="350" height="200" viewBox="0 0 180 180"> . svg>

Первые два значения — координаты X и Y верхнего левого угла отображаемой области, последние два — ширина и высота. viewBox задаётся только атрибутом.

Попробуйте теперь изменить размеры, и вы увидите, что содержимое отресайзится, чтобы поместиться целиком.

viewBox можно использовать, например, для кадрирования изображения, чтобы показывать не всю картинку, а только какую-то её часть:

Интересно, что если у SVG нет размеров, но задан viewBox , изображение займёт собой всё доступное пространство:

svg viewBox="0 0 180 180"> . svg>

Это поведение может стать проблемой: если размеры у иконок задаются в стилях, а они не загрузились — страница может превратиться в парад гигантских SVG-иконок. Чтобы этого не произошло, всегда явно задавайте в атрибутах SVG ширину и высоту, их потом легко переопределить в CSS.

preserveAspectRatio

Как мы видели в примере выше, если у SVG заданы размеры и viewBox , содержимое будет сжиматься и растягиваться с сохранением пропорций, чтобы поместиться целиком, но этим поведением тоже можно управлять — с помощью свойства preserveAspectRatio (оно задаётся только атрибутом).

Например, с помощью значения none можно указать, что сохранять пропорции не нужно:

svg width="350" height="200" viewBox="0 0 180 180" preserveAspectRatio="none" > . svg>

SVG с viewBox и preserveAspectRatio=’none’ ведёт себя очень похоже на img : при изменении размеров содержимое масштабируется под размеры вьюпорта не сохраняя пропорции.

none будет полезно для резиновых фонов:

Остальные значения preserveAspectRatio состоят из двух частей: первая задаёт выравнивание, вторая — поведение элемента относительно вьюпорта.

Выравнивание задаётся одним значением, определяющим положение по вертикали и по горизонтали, например: xMaxYMin . Для обеих осей можно задать положение в начале, в середине и в конце:

xMin , YMin — в начале оси xMid , YMid — в середине xMax , YMax — в конце

Эти значения можно комбинировать в любых сочетаниях, но порядок должен сохраняться: первым всегда идет значение для X, вторым для Y. Значение для Y всегда пишется с большой буквы.

Поведение элемента определяется второй частью preserveAspectRatio . Возможные значения:

meet — содержимое стремится уместиться целиком (как фон с background-size: contain ) slice — содержимое заполняет собой всю область видимости (как background-size: cover : что не поместилось, обрежется)

Важно помнить, что preserveAspectRatio не работает без viewBox . viewBox задает область, которая должна масштабироваться, preserveAspectRatio определяет как именно она должна это делать.

Также нужно понимать, что preserveAspectRatio срабатывает, если вьюпорт и вьюбокс имеют разные соотношения сторон. Если соотношения сторон совпадают, и содержимое умещается без полей, preserveAspectRatio работать не будет (в этом случае в нём просто нет необходимости).

Для использования SVG в качестве иконок достаточно viewBox и размеров, но если предполагается делать что-то более сложное, имеет смысл разобраться с единицами измерения и системой координат.

Единицы измерения

Внутри SVG можно использовать em , ex , px , pt , pc , cm , mm , in , проценты, а также единицы системы координат (user space units). Единицы системы координат соответствуют пикселям, поэтому для значений в пикселях единицы измерения указывать не нужно.

Системы координат

В SVG-документе есть две системы координат:

1. Система координат области отрисовки — viewport space.
2. Система координат содержимого — user space.

Отсчет системы координат вьюпорта начинается от левого верхнего угла вьюпорта, системы координат содержимого — от левого верхнего края вьюбокса.

По умолчанию система координат содержимого соответствует системе координат вьюпорта, а единицы измерения содержимого — единицам измерения вьюпорта, но при использовании трансформаций или viewBox масштабируется вся система координат с единицами измерения, то есть пиксели из user space больше не равны пикселям из viewport space.

Поизменяйте размеры элемента и посмотрите что происходит с системой координат содержимого (она показана бирюзовым):

Система координат содержимого начинается из точки 0,0, и если вьюпорт и вьюбокс не совпадают, точка отсчета, как и вся система координат содержимого, будет ездить и масштабироватся вместе с вьюбоксом.

Масштабирование единиц измерения хорошо видно на примере обводки: изначально её толщина равна единице, но при изменении размеров видимая толщина обводки будет изменяться вместе с фигурой:

Если такое поведение нежелательно, это можно исправить с помощью свойства vector-effect со значением non-scaling-stroke , оно добавляется к содержимому SVG:

circle r="60" cx="75" cy="75" stroke="black" stroke-width="1" vector-effect="non-scaling-stroke"/>

vector-effect можно задавать как атрибутом, так и в CSS.

Также новая система координат создается при добавлении трансформаций:

Внутри трансформируемого элемента будет своя своя система координат, отличная от систем координат вьюпорта и вьюбокса.

Тема может выглядеть сложной, но на самом деле, достаточно немного поиграться с кодом, и всё станет понятно. Для лучшего понимания систем координат, размеров и трансформаций в SVG рекомендую демо Сары Суайдан, а также её статьи:

Сайдбар

Статьи

• Математические функции в CSS
• Адаптивное видео с помощью встроенных математических функций CSS
• Недоступность в картинках
• Единицы размеров в CSS
• Генератор цветовых тем
• Jekyll → Gatsby
• Вариативные шрифты
• Размеры в SVG
• Адаптивный Pixel Perfect
• Логотип не отвечает или временно недоступен
• SVG-паттерны
• Мыльные пузыри на SVG
• SVG-градиенты
• Весёлая консолька
• SVG-маски
• Умная прокрутка со Scroll Snap Points
• CSS-анимации для ротации изображений
• Анимированные SVG-маски
• Странности обводки в SVG
• SVG-прелоадеры
• Анимируем градиенты ещё раз
• Background-blend-mode
• Возможности оформления SVG
• CSS и SVG маски
• Nth-child и nth-of-type
• SVG-иконки
• SVG: заливка и обводка
• SVG-path
• SVG: группировка и переиспользование элементов
• SVG-фигуры и трансформации
• SVG
• СSS-градиенты и 3D
• Рисовалка анимированных теней
• Свежие CSS-паттерны
• CSS-паттерны
• Радиальные градиенты
• Линейные градиенты
• Крестики-нолики на CSS
• Border-image
• Электронные часы на CSS и JS.
• Сколько весят селекторы?
• Символы юникода
• Свойство content
• Анимируем CSS-градиенты
• Текстовые эффекты
• Древовидный список на CSS
• Css-селекторы, часть 2
• Css-селекторы
• Контекст наложения
• Два способа «прошить» элемент по краю
• Box-sizing
• Цвета в CSS
• Фон под строчками: добавляем поля
• Box-shadow
• Css-фигуры: лепесток
• Transform
• Css Animation
• 3D-куб
• Border-radius
• First letter
• Эти глаза напротив
• CSS-фигуры
• Стрелки с помощью свойства border
• Flexbox

Страницы

Проекты

Источник