Scale svg image in html

Описание и примеры стандартных функций SVG

Маски, градиенты, фильтры, анимация, вертикальный и горизонтальный parallax

Масштабирование векторных изображений

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

Рецепты лечения не сложные, но в каждом конкретном случае по одному и тому же вопросу действия будут разные. Всё зависит от многих факторов, например для изменения масштабирования нужно ответить себе на вопросы:
Размеры ‘viewport’ и ‘viewBox’ в шапке файла заданы, они равны или отличаются друг от друга?
Картинка вызывается из внешнего файла или размещена inline в Html?
Есть ли у ‘Symbol’ свой ‘viewBox’ ?
Есть ли дополнительный ‘SVG’ опять же со своим ‘viewBox’?
В итоге получается, что векторное изображение может масштабироваться от одного до нескольких раз, до того момента, как мы увидим его на дисплее.

Если изменять параметры методом “научного тыка”, то скорее всего можно потерять много времени и получить непредсказуемый результат.

Масштабирование изображения в одиночном файле SVG

Берем файл иконки 48х48 px, всё как есть, без изменений кода.

Итак, ожидали увидеть небольшую иконку, так как значение – viewBox=”0 0 48 48″ , а тут на весь экран смартфонище.

Произошло это из-за отсутствия в шапке SVG файла указания размеров viewPort . Если размеры width, height viewport’а не указаны, то они по умолчанию равны – 100%, поэтому изображение автоматически растянулось на весь экран.

Источник

Базовые трансформации

Все последующие преобразования суммируются в атрибуте преобразования элемента transform . Преобразования могут быть последовательно суммированы, разделителем выступает пробел.

Перемещения

Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определённым атрибутам. Для этого используется translate() .

svg width="40" height="50" style="background-color:#bff;"> rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> svg> 

Пример генерирует прямоугольник, перемещённый в точку (30,40) вместо точки (0,0).

если второе значение не задано, то оно приравнивается 0.

Вращение

Вращение элементов — это достаточно типичная задача. Используйте rotate() для этого:

svg width="31" height="31"> rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> svg> 

Данный пример показывает квадрат который повернули на 45 градусов. Значение для rotate() задаётся в градусах.

Смещение углов

Чтобы сделать ромб из нашего прямоугольника, доступны преобразования skewX () и skewY (). Каждый из них принимает угол, определяющий, насколько элемент будет искажён.

Масштабирование

scale() изменяем размер элемента. Он использует 2 параметра. Первый — это коэффициент масштабирования по оси Х, а второй — по оси Y. Коэффициенты выражают сжатие по отношению к оригинальному изображению. Например, 0.5 уменьшает на 50%. Если второй параметр отсутствует, то тогда он принимается равным первому.

Комплексные перемещения с matrix()

Все приведённые выше преобразования могут быть описаны с помощью матрицы перемещений 2×3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью matrix(a, b, c, d, e, f) , которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:

< x new C o o r d S y s = a x prev C o o r d S y s + c y prev C o o r d S y s + e y new C o o r d S y s = b x prev C o o r d S y s + d y prev C o o r d S y s + f \left< \beginx*<\mathrm > = a x*<\mathrm> + c y*<\mathrm> + e \ y*<\mathrm> = b x*<\mathrm> + d y*<\mathrm> + f \end \right.

См. конкретный пример документации SVG. Подробную информацию об этом свойстве можно найти в SVG Рекомендациях.

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

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

svg width="100" height="100"> g transform="scale(2)"> rect width="50" height="50" /> g> svg> 

В результата прямоугольник в примере выше будет 100x100px. Более интригующие эффекты возникают, когда вы используете такие атрибуты, как userSpaceOnUse .

Встраивание SVG в SVG

В отличие от HTML, SVG позволяет встраивать другие svg элементы без разрыва. Таким образом вы можете запросто создать новую координатную систему используя viewBox , width и height внутреннего svg элемента.

svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> svg width="100" height="100" viewBox="0 0 50 50"> rect width="50" height="50" /> svg> svg> 

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

Found a content problem with this page?

This page was last modified on 14 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

How to make an svg scale with its parent container ?

SVG is the abbreviation for Scalable Vector Graphics. It is an Extensible Markup Language (XML) based vector image format for two-dimensional graphics. It supports interactivity and animation. This means that every attribute and every element present in the SVG file can be animated. SVG image behaviors are defined in XML text files. They can be searched, indexed, scripted, compressed, and can be created or edited using any text editor, as well as using drawing software such as Inkscape. Almost every modern web browser support SVG.

The reason why it is tricky to scale SVG is that it does not scale like the other image formats. SVG images have a clearly defined aspect ratio: the ratio of width to the height which makes it difficult to scale with the changing parent container. Other images scale easily because the browser determines the height, width, and aspect ratio of the image, and it adjusts everything accordingly. So giving these properties to SVG should be the first step to our requirement. Although setting height and width barely sets an aspect ratio but what we aim for is scaling which is beyond the aspect ratio. A viewbox can serve our purpose rightly. The viewBox is an attribute of the element which takes four parameters x, y, width, and height. x and y signify the origin of the SVG coordinate system and width and height signify the number of pixels or coordinates that should be scaled to fill the width and height respectively. Let us take a look at the following example:

First approach:

• At first, we create a container that occupies 30% of the total width of the screen and 20% of the total height of the screen.
• Next, we create an SVG image(rectangle) using the tag and specifying the height, width, and fill attributes.
• The element wraps the rectangle image. The SVG element occupies 100% width of the parent container and its height is auto-adjusted depending on screen size. We use viewBox to make the SVG image scalable.
• viewBox = “0 0 100 100”: defines a coordinate system having x=0, y=0, width=100 units and height=100 units.
• Thus, the SVG containing a rectangle having width=50px and height=50px will fill up the height and width of the SVG image, and all the dimensions get scaled equally. Changing the x and y coordinates can yield different results, but we will keep ourselves restricted to the stated values.

Источник