1. Позиционирование иконок в одиночном файле SVG
2. Позиционирование иконок с помощью ‘viewBox’
3. Позиционирование нескольких иконок с помощью ‘preserveAspectRatio’
4. Позиционирование иконок с помощью min-x, min-y ‘viewBox’
5. Позиционирование изменением параметров команды ‘use’

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

Позиционирование иконок в одиночном файле SVG

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

Возьмем иконку с размерами 48x48px, и добавим её внутрь Html страницы, таким образом, чтобы текст обтекал её слева. Ниже код иконки.

Пример размещения иконки внутри Html.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere non enim vitae tincidunt. Quisque eleifend, lectus a rhoncus cursus, libero risus condimentum ipsum, vitae finibus dolor metus eget turpis. Mauris vitae elementum sem. Aliquam urna ligula, pretium eu lorem non, dapibus dignissim lorem. Integer tempor tempus ex, a egestas lectus condimentum sed. Suspendisse tellus sem, placerat ac malesuada sed, tincidunt.
———————————————————————————————————————-
Результат не радует – получились огромные отступы текста справа и снизу. Чтобы понять причину этого, добавим красную рамку, которая показывает истинный размер ‘viewport’ – области просмотра SVG файла.

Сразу стало видно, что ‘viewport’ занимает в два раза больше места, чем иконка, именно из-за этого образуются большие отступы текста от иконки.
Для уменьшения отступов, нужно уменьшить размеры ‘viewport’.
У нас был масштаб – viewport / viewBox = 96/96 – M1:1.
Чтобы избежать искажения графики оставляем масштаб 1:1, но при этом уменьшаем размеры ‘вьюпорта’ и ‘вьюбокса’ – viewport / viewBox = 48/48 – M1:1.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere non enim vitae tincidunt. Quisque eleifend, lectus a rhoncus cursus, libero risus condimentum ipsum, vitae finibus dolor metus eget turpis. Mauris vitae elementum sem. Aliquam urna ligula, pretium eu lorem non, dapibus dignissim lorem. Integer tempor tempus ex, a egestas lectus condimentum sed. Suspendisse tellus sem, placerat ac malesuada sed, tincidunt.
———————————————————————————————————————–
Размер иконки остался тот же, отступы текста сократились вдвое.

Позиционирование иконок с помощью ‘viewBox’

Этот способ позиционирования является наиболее простым и понятным. Он может быть использован на практике, если отступы от векторного объекта до краев области просмотра не критичны для вёрстки страницы.

Центрирование по горизонтали.
Возьмем иконку с геометрическими размерами 100×100 px и поместим её в прямоугольную область просмотра ‘viewport’ с шириной width =”200″ и высотой height=”100″ пикселей.

Здесь красная рамка показывает границы ‘viewport’ – области просмотра.
Так как ширина ‘viewport’ – больше в два раза ширины ‘viewBox’ мы ожидаем, что иконка должна растянуться по оси х-ов в два раза.

Но, на самом деле, растягивание изображения до границ ‘viewport’ не происходит, так как не указан атрибут – preserveAspectRatio отвечающий за пропорциональность трансформации. В этом случае его значение по умолчанию равно – preserveAspectRatio=”xMidYMid meet”, что соответствует центрированию изображения по осям “X” и “Y”
Чтобы получить растягивание изображения, как на картинке выше, значение этого параметра должно быть – preserveAspectRatio=”none”.
Далее примеры использования ‘preserveAspectRatio’ для различного позиционирования SVG иконки.

Для этого назначим ‘viewport’ высотой 200px и шириной 100px
и атрибут – preserveAspectRatio=”xMidYMid meet”

Позиционирование с помощью ‘preserveAspectRatio’ возможно лишь в случае присутствия ‘viewBox’. В противном случае ‘preserveAspectRatio’ – игнорируется.

Позиционирование нескольких иконок с помощью ‘preserveAspectRatio’

На ум сразу приходит решение этой задачи – использовать ‘preserveAspectRatio’. Одну иконку направить влево – ‘xMinYMin’, вторую разместить по центру – ‘xMidYMid’, третью вправо – ‘xMaxYMax’. Каждую иконку обернуть в свой ‘symbol’, так как у него есть свой ‘viewBox’ и ‘preserveAspectRatio’. Структура в примере ниже:

Не сработало.
Все три иконки собираются одна под другой в центре ‘viewport’. Это результат доминирующего действия ‘preserveAspectRatio’ в шапке файла SVG. И всё, что указано ниже в ‘symbol’ – игнорируется.
Как нейтрализовать действие ‘preserveAspectRatio’ в шапке файла и дать возможность этой же команде внутри ‘symbol’ позиционировать самостоятельно?
Попробовать убрать его в шапке файла, но по умолчанию будет всё равно центрирование – preserveAspectRatio=”xMidYmid meet”.
Присвоить ему значение – preserveAspectRatio=”none”? – Тогда верхняя иконка растянется на всю ширину ‘viewport’a.

Недостаток этого метода в малом количестве иконок, которые можно позиционировать – от одной до трёх.

Достоинство метода – блок иконок добавляется в Html, как один объект и то, что находится внутри его не влияет на разметку страницы.
Блок иконок легко может быть преобразован из горизонтального в вертикальный путем изменения ширины и высоты ‘viewport’ в шапке файла – width=”100″ height=”310″

Позиционирование иконок с помощью min-x, min-y ‘viewBox’

У ‘viewBox’ всё наоборот – уменьшение сторон ведет к увеличению масштаба изображения. Перемещение центра координат вправо, смещает изображение влево. Подробнее здесь.
Давайте используем это свойство смещения векторных изображений, путём изменения начала координат ‘viewBox’а, для еще одного способа позиционирования иконок.
Допустим нам надо в одном файле svg разместить по горизонтали 5 иконок. Размер каждой иконки – 126х126 px.
Расширяем ‘viewport’ по горизонтали до width=”630″, высоту оставляем прежней – height=”126″. Собираем в одном файле все иконки и оборачиваем код каждой в свой ‘symbol’ с уникальным ‘id’ . Изменением параметра ‘min-x’ (первая цифра ‘viewBox’) позиционируем каждую иконку.

Ниже структура файла SVG с пятью иконками. Обратите внимание, что у ‘viewBox’ов внутри ‘symbol’ изменяется только первая цифра, отвечающая за положение начала координат по оси абцисс.

Данный метод позволяет поместить в один файл сколько угодно векторных изображений, но более удобно позиционировать нечётное количество векторных объектов, так как средняя иконка позиционируется автоматически. Файл SVG можно встроить в Html несколькими способами. В данной статье svg добавляется, как изображение <img> с фолбэк’ом от David Bushell для браузеров не поддерживающих SVG

Обратите внимание, что при выводе изображения SVG заданы его размеры. Очень удобно, можно одновременно изменять масштаб всех иконок в блоке.
Необходимо только следить за пропорциями: было – width=”600″ height=”126″
стало – width=”300″ height=”63″ и третий вариант width=”150″ height=”31″

Позиционирование изменением параметров команды ‘use’

Команда ‘use’ создает прямоугольную область с началом координат – x=”0″ y=”0″ и служит для вывода изображений. Ширина и высота этой области, если не указаны другие значения, равны ширине и высоте ‘viewport’.

Последовательность позиционирования иконок по горизонтали следующая:
Расширяем ‘viewport’ в шапке файла, чтобы хватило места для всех иконок. Высоту ‘viewport’ – назначаем равной высоте иконок.
‘viewBox’, если он есть в шапке файла удаляем. Это для того, чтобы исключить воздействие – ‘preserveAspectRatio’
Код каждой иконки оборачиваем в’symbol’, присваиваем ему ‘id’

Далее позиционируем иконки по горизонтали, изменяя значения – x=”…”. Обратите внимание, что можно менять иконки местами внутри блока SVG.

Можно менять и сами иконки и их стилевое оформление, но это тема отдельной статьи.

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