Памятка по атрибуту PreserveAspectRatio для SVG
Семь элементов используют атрибут: <svg>, <symbol>, <image>, <feImage>, <marker>, <pattern> и <view>. Однако, в рамках этой заметки я сфокусируюсь на <svg>. Нюансы использования с остальными будут опущены.
Теория
Сперва самое важное: если у <svg> отсутствует атрибут viewBox, то preserveAspectRatio будет проигнорирован.
Значение атрибута состоит из двух ключевых слов:
- значение выравнивания;
- необязательный атрибут
meetOrSlice, с двумя возможными значениями:meetилиslice.
viewBox и viewport
Эти два термина далее будут встречаться постоянно, поэтому сперва в двух словах попытаюсь их пояснить (вдруг кто не знал).
viewport и viewBox — две прямоугольные области просмотра, ограниченные конечными значениями высоты и ширины.
<svg width="100" height="36" viewBox="0 0 36 36"> ... </svg> имеет вьюпорт размером 100 × 36 и вьюбокс размером 36 × 36.
Подробно почитать о вьюбоксе и вьюпорте можно в замечательной статье Трансформация изображений SVG при изменении параметров Viewbox.
Значение выравнивания
Указывает, позволено ли искажать пропорции изображения и если нет, то какой метод выравнивания стоит применять в случае когда пропорции вьюпорта и вьюбокса не совпадают.
Состоит из двух частей: выравнивание по оси X, выравнивание по оси Y. Каждое принимает одно из трёх возможных значений: min, mid , max.
Варианты:
xMinYMin — выравнивание по минимальным координатам обеих осей вьюбокса и вьюпорта.
xMidYMin — по оси X выравниваются центральные координаты, по оси Y минимальные.
xMaxYMin — по оси X точка с координатой minX + width вьюбокса выравнивается с максимальной координатой вьюпорта, по оси Y выравниваются минимальные координаты.
xMinYMid — по оси X выравниваются минимальные координаты, по оси Y центральные.
xMidYMid — используется по умолчанию, по обеим осям выравниваются центральные координаты.
xMaxYMid — по оси X точка с координатой minX + width вьюбокса выравнивается с максимальной координатой вьюпорта, по оси Y выравниваются центральные координаты.
xMinYMax — по оси X выравниваются минимальные координаты, по оси Y точка с координатой minY + height вьюбокса выравнивается с максимальной координатой вьюпорта.
xMidYMax — по оси X выравниваются центральные координаты, по оси Y точка с координатой minY + height вьюбокса выравнивается с максимальной координатой вьюпорта.
xMaxYMax — по оси X точка с координатой minX + width вьюбокса выравнивается с максимальной координатой вьюпорта, по оси Y точка с координатой minY + height вьюбокса выравнивается с максимальной координатой вьюпорта.
none — разрешает искажать пропорции вьюбокса, позволяя последнему полностью заполнить вьюпорт (при прочих значениях пропорции сохраняются). При этом meetOrSlice игнорируется.
meetOrSlice
meet — указывает на то что вьюбоксу следует полностью поместиться во вьюпорт, при несовпадении пропорций часть вьюбокса окажется пустой. Используется по умолчанию.
slice — говорит что вьюбоксу следует заполнить весь вьюпорт. При несовпадении пропорций часть вьюбокса останется за границами вьюпорта и будет невидимой.