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

Часто задают вопросы:

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

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

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

Начнем с простого.

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

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

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

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

Известно, что масштаб векторной картинки зависит от соотношения величин viewport / viewBox. Подробнее здесь.
1. Если соотношение сторон viewport / viewBox 1:1 – масштаб векторной картинки будет – М1:1, размеры в нашем случае 48х48 px, см. код ниже.
2. Если пропорция viewport / viewBox – 2:1 – масштаб М2:1, то есть происходит увеличение изображения в 2 раза – 96х96 px.
3. Если пропорция viewport / viewBox – 1:2 – масштаб М1:2, то есть происходит уменьшение изображения в 2 раза – 24х24 px.
Чтобы получить эти варианты масштабирования, корректируем каждый раз строку, добавляя, изменяя значения: width=”48″ height=”48″(viewport)

smartphones-1-1 png

smartphones-1-1 png

smartphones-1-1 png

Верхняя картинка – масштаб 1:1, средняя М2:1, нижняя М1:2;

Масштабирование изображения при наличии ‘symbol’

В этом случае векторная картинка проходит масштабирование несколько раз, так как ‘symbol’ имеет собственный ‘viewBox’.
Возьмем теперь иконку, которая имеет размеры 100х100px и ‘symbol’ с viewBox=”0 0 100 100″

icon tweeter png

Для того, чтобы увидеть, как влияет ‘symbol’ на масштаб картинки я убрал все другие факторы масштабирования:
задал в шапке файла соотношение viewport/viewBox – 1:1.
В команде вывода картинки на экран <use xlink:href=”#…..”/> не указал параметры width и height , которые тоже могли бы влиять на масштаб картинки. Итак, при этих заданных условиях, на масштаб теперь могут влиять только изменения параметров ‘viewBox’ – ‘символа’.
Иконка выше отрисовалась без изменений, в масштабе 1:1 к оригинальному размеру. Так как ‘viewBox’ – ‘символа’ тот же, что и в шапке файла.

Можно ‘viewBox’ – ‘символа’ в этом случае не прописывать, результат будет – 1:1

Далее, допустим, у нас появилась необходимость уменьшить иконку в два раза. Все условия прежние, меняем только параметры – ‘viewBox’ – ‘символа’, увеличивая их в 2 раза.

icon tweeter png

С чем тут сравнивается ‘viewBox’ – ‘символа’ для вычисления масштаба? Ответ – с ‘viewport’, который задан в шапке SVG файла – viewport(SVG) / viewBox(symbol’s) – 100/200 = M1:2. Размер иконки стал – 50х50 px.
Обратите внимание на красную рамку вокруг иконки – это ‘viewport’, который задан в начале SVG файла – width=”100″ height=”100″. Это очень удобно – видеть границы ‘viewport’ во время настройки масштаба.

Важно помнить, что единожды заданные размеры ‘viewport’ в шапке svg файла остаются неизменными в пределах одного файла, как бы мы не изменяли масштаб векторных изображений с помощью повторяющихся ниже в коде файла ‘viewBox’, ‘use’, и т.д.

Размеры изображения после масштабирования могут стать больше, чем размеры ‘viewport’ поэтому они будут обрезаны по ширине и/или высоте ‘viewport’а. Смотри пример ниже.

icon tweeter png

‘viewport'(SVG) / ‘viewBox'(symbol’s) – 100/50 = M2:1.
Размер иконки стал – 200х200 px и поэтому в область просмотра ‘viewport’ – 100х100 px поместилась только верхняя четверть иконки.

Масштабирование изображения при использовании ‘use’

Для чистоты эксперимента отключаем все возможности масштабирования иконки, которые рассмотрели выше.
Оставляем масштабирование в команде ‘use’ с помощью параметров width и height. В отличии от ‘viewBox’, где уменьшение сторон влекло за собой увеличение масштаба, у команды ‘use’ прямо пропорциональная зависимость – увеличение width и height вызывает увеличение размеров вектоной картинки.

Если ширина и высота ‘use’ не указаны или они равны ширине и высоте ‘viewport’ SVG файла, то масштаб картинки не будет изменяться.

icon beacon png
icon beacon png
icon beacon png
icon beacon png
icon beacon png

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

Горизонтальный параллакс с помощью viewBox

Горизонтальный параллакс
Эта статья поможет вам разобраться, как создать для своего сайта интересные, визуальные эффекты, используя уникальное свойство SVG – наличие перемещаемого viewBox на бесконечном полотне SVG.
Немного теории. Пользователь видит на своем мониторе только один фрагмент полотна SVG – viewport, остальные фрагменты изображения скрыты от него левее или правее, выше или ниже viewport.
Перемещая viewBox вдоль оси х-ов полотна SVG мы реализуем тем самым – горизонтальный параллакс – смещение фонового изображения влево или вправо относительно viewport. Осуществляется это с помощью изменения первого атрибута viewBox“min-x”. см. подробнее о viewBox
Для большей наглядности процесса – взаимодействия “viewport” и “viewBox” смотри картинку ниже.

Продолжить чтение

Трансформация изображений SVG при изменении параметров Viewbox

  1. Введение
  2. SVG viewport
  3. SVG viewBox
  4. Процесс взаимодействия viewport и viewBox
    1. Смещение начала координат viewBox по одной оси
    2. Смещение начала координат viewBox по двум осям
  5. Изменение масштаба с помощью viewBox
    1. Увеличение масштаба М2:1
    2. Уменьшение масштаба М1:2

Введение

Изменение параметров viewBox – атрибута элемента SVG позволяет масштабировать, фрагментировать, перемещать исходное изображение вдоль осей координат. Но довольно часто возникают вопросы: “Почему, изменив параметры viewBox, я получаю совсем не то, что ожидал увидеть?”. Вместо увеличения картинки в 2 раза, она совсем пропадает с дисплея или сдвигается не в ту сторону и т.д. Чтобы разобраться в причинах этих “аномалий” рассмотрим подробно процессы взаимодействия областей просмотра элемента SVG и его параметра viewBox.

Продолжить чтение