Как самостоятельно сделать анимацию SVG иконки

Допустим требуется сделать векторную SVG иконку с анимацией на основе растрового образца.

Растровая иконка образец

Техника создания векторной иконки и её анимации

Шаг #1. Загрузка в векторный редактор растрового изображения

Загружаем в векторный редактор растровое изображение иконки и наносим узловые точки по контурам рисунка.

inkscape-face

Сохраняем файл в формате *.svg

Ниже получившийся код векторной иконки

Шаг #2. Анимация вращения глаз (зрачка)

Добавляем к path анимацию:

Анимация вращения начнется после наведения курсора на иконку

Шаг #3. Анимация вращения языка

⇚ Иконка разбитое сердце
Следующая ⇛  Позиционирование иконок SVG

Позиционирование иконок SVG

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

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

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

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

image description

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

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

combo_chartx2

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.

image description

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’

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

letter-ed

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

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

preserve-none

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

preserve-none

preserve-none

preserve-none

Центрирование по вертикали.

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

preserve-none

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

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

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

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

Решение есть – убрать ‘viewBox’ из шапки файла и тогда ‘preserveAspectRatio’ в шапке будет проигнорировано и сработают команды в ‘symbol’
preserve-none

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


preserve-none

Достоинство метода – блок иконок добавляется в 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’) позиционируем каждую иконку.

Положительное значение ‘min-x’ сдвигает иконку влево. Отрицательное значение – вправо.

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

viewBox-icons

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

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

preserve-none
preserve-none

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

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

В отличии от ‘viewBox’ сдвиг вправо начала координат ‘use’ сдвигает векторное изображенгие вправо.

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

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

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

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