svg анимация примеры кодов
SVG-анимация
Анимация svg-фигур
Тэг svg позволяет не только рисовать в HTML, но и создавать анимированные (движущиеся) рисунки.
Делать такое гораздо сложнее, чем прописать код для обычной, неподвижной фигуры.
Чтобы подробнее изучить анимацию, собрал много нужной информации по данной теме в интернете.
Для полноценного обучения, из собранных мною материалов сделал справочник — 75-ти страничную фотокнигу.
Справочник основ svg-анимации здесь: 
Сделал его из скриншотов, и он содержит ВСЮ необходимую информацию для изучения основ анимации svg-фигур.
Примеры svg-анимации
Сначала показываю несколько интересных примеров svg-анимации, а после них объясняю, с помощью каких тэгов и атрибутов это было сделано. смотреть сразу: 
Плавная анимация логотипа
Самый сложный svg-рисунок с анимацией, но он же и самый интересный! Сделан на HTML + CSS, причём, большая часть кода анимации прописана в CSS.
Свечение (расходящиеся волны)
Тоже довольно сложная svg-анимация. Сделана только на HTML.
Состоит из 6-ти тэгов
Планета и спутник
Это гораздо менее «могущественный», но значительно более простой для изучения тэг (это самостоятельный тэг).
Анимация по заданной траектории
Пути движения обычно задаются в тэгах
Анимация двух фигур
Для её запуска нужно сперва кликнуть по кругу, чтобы он стал анимировать, а следом за ним (с небольшой задержкой) двинется и квадрат.
Выполнив предписанную им анимацию, они дружно «уедут» из области просмотра.
Для повторного просмотра, страницу нужно перезагрузить.
Анимация Translate-трансформации
Здесь, хоть он и довольно простой, решил показать ещё один пример анимации, созданной с помощью тэга , о котором писал ранее. вспомнить: 
А на этом примере легко понять принцип создания svg-анимаций!
Используя названный тэг, прописал в коде анимации:
За 2 секунды («dur») передвинуть квадрат из его начального состояния («from») в конечное состояние («to»).
Анимацию при загрузке страницы начать сразу (begin=»0s»), и продолжать бесконечно(repeatCount=»indefinite»).
Теперь немного подробнее о том, как были созданы, показанные на этой странице примеры svg-анимаций.
Создание svg-анимации
За создание анимации отвечает внутренний тэг svg и целый ряд его собственных, специальных внутренних тэгов и атрибутов.
Внутри тэга animate комментарии не писать!
Создание анимации включает в себя указание 5-ти обязательных атрибутов и 2-ух по необходимости.
Обязательные атрибуты анимации
О значениях некоторых атрибутов анимации
Если атрибуту begin задано значение, например, «0s», то оно запускает анимацию сразу же, как только страница загрузилась.
Можно поставить этому атрибуту значение «click», что скажет фигуре начать двигаться, когда её кликнули.
Также можно задавать этому атрибуту значения времени.
Например, желая отсрочить анимацию, нужно прописать положительные значения. Скажем, begin=»5s» запустит анимацию через пять секунд после загрузки страницы.
Еще более интересная возможность begin — прописать ему значение «click + 5s», чтобы запустить анимацию через пять секунд после клика!
Более того! Можно использовать разные временные величины.
Можно прописать начало анимации одной фигуры в зависимости от другой.
Пример работы подобного кода здесь:
Пример анимации с такими значениями атрибутов в коде здесь:
Для наглядности, я снова прописал показанный пример анимации двух фигур, НО(!) уже задав их атрибутам fill значения «remove».
Всё то же самое. Для запуска анимации, нужно кликнуть по зелёному кругу.
Анимация двух фигур №2
Просмотрев оба почти одинаковых примера, разница будет видна сразу! Если в первом примере фигуры «уехали» из области просмотра, то здесь, отработав, они вернулись в исходное состояние.
По умолчанию (если не использовать этот атрибут вообще) происходит именно так.
Очень важно! Прописывая одинаковые коды, необходимо задать в них разные идентификаторы!
Противоречия в атрибутах
Иногда значения атрибутов могут конфликтовать, т.е. либо одно из них будет игнорироваться браузером (не станет выполняться), либо ( что вообще-то интересно ) они будут накладываться друг на друга.
Анимация двух фигур №3
Для её остановки, страницу нужно перезагрузить.
А вот, если в коде показанного примера анимации, атрибуту repeatCount задать значение НЕ «indefinite» (не определено, т.е. БЕСКОНЕЧНО), а поставить цифру, то он, честно отработав указанное количество раз, «уедет» из поля обзора, как это происходит в самом первом примере. вспомнить:
Подобное поведение означает, что в этом случае браузер уже НЕ игнорирует ни один из прописанных атрибутов.
Много дополнительной интересной и подробной информации о разных способах создания svg-анимации находится здесь:
🎨 Руководство для начинающих по созданию и анимации изображений SVG
Использование SVG для стилизации веб-сайтов открывает целый мир новых возможностей. Это отличный способ сделать дизайн уникальным и удобным для пользователей. Одно из самых больших преимуществ SVG – его гибкость и возможность изменять внутренние элементы изображения при помощи CSS. Вы можете создавать многоцветные значки и иллюстрации, а также анимировать их с помощью JavaScript или все того же CSS. SVG – векторный формат. Он масштабируется без потери качества, а правильно оптимизированная картинка мало весит. На примере небольшой иконки мы рассмотрим, как нужно работать с такими изображениями.
Создание SVG
Самый простой способ создать SVG – написать код:
Мы возьмем Illustrator. Как в любом приложении для работы с векторной графикой, большинство клиентских логотипов или иллюстраций представлены здесь в виде файлов AI, поэтому их можно легко открыть и экспортировать в SVG.
Для начала нужно создать новый веб-документ:
Размер холста – 400х400 пикселей. Размер на самом деле не имеет значения, потому что это вектор, но лучше оставить его в пределах, которые вы ожидаете увидеть в браузере. Будет легче поддерживать размер штриха и менять его, по сравнению с базовым. Далее создадим значок:
При построении изображения можно использовать штрихи, различные цвета и даже градиенты. Все это будет экспортировано в SVG. Если вы планируете анимировать отдельные элементы значка, необходимо назвать слои и группы:
Экспорт и оптимизация SVG-файлов
Если вы хотите, чтобы холст SVG был того же же размера, что и монтажная область, или если вы экспортируете несколько значков из одного документа, установите флажок «Использовать монтажные области». В противном случае Illustrator обрежет холст до размера содержимого. Лучше всегда использовать размер артборда. Изображение будет легче поддерживать, если оно имеет определенный размер, особенно если нужно изменить или обновить иконку. Вы можете экспортировать его снова с тем же размером монтажной области.
Затем перед вами появится окно с параметрами для кода SVG:
В первом раскрывающемся списке необходимо выбрать способ создания CSS. Если у вас всего несколько элементов, лучше поставить «Inline style». Для более сложных иллюстраций есть «Internal CSS». Если вы не хотите использовать имена слоев и групп в качестве идентификаторов, измените раскрывающееся меню «Object IDs» на «Minimal». Это нужно для минимизации кода SVG перед отправкой в production. Если вы работаете над анимацией и хотите иметь более чистый код, снимите этот флажок.
После выбора опций экспортированный код значка выглядит примерно так:
Теперь необходимо изменить идентификаторы внутренних элементов на классы и добавить некоторые атрибуты для лучшей доступности:
Вы можете загрузить в него файл SVG и получить множество дополнительных опций его тонкой настройки. Будьте осторожны: если вы зайдете слишком далеко в настройке изображения, нарушите дизайн. Если у вас уже есть стили или анимация, убедитесь, что не потеряете после оптимизации классы и элементы.
Анимация и манипуляции с CSS
После добавления кода SVG на страницу, необходимо стилизовать его как и любой другой элемент HTML. Например так:
Вы без труда найдете множество библиотек JavaScript (Svg.js, SnapSVG) для создания сложных анимаций, однако в большинстве случаев добиться интересного эффекта можно, используя только свойства opacity, scale, translate и colors.
Далее создадим простую анимацию для круга:
Это простая масштабная анимация в сочетании с непрозрачностью. Если у вас есть несколько значков с похожим кругом, вы можете повторно использовать тот же код, что сэкономит много времени и усилий. Именно поэтому использование классов для отдельных элементов предпочтительнее уникальных идентификаторов.
Теперь посмотрим на анимацию значка галочки:
Удачи вам в обучении и в создании красивых сайтов!
SVG анимация
Для примера я скачал svg картинку.
Анимация внутри SVG
Нам необходимо выполнить следующие действия.
Все манипуляции с SVG будем выполнять прямо внутри самого изображения. Таким образом нашу SVG анимацию можно будет использовать в других проектах.
1. Подключение svg с помощью тега
2. Объединение нужных слоёв в группу
Чтобы сгруппировать необходимые элементы, обернём их в тег
Для проверки, верно ли мы объединили элементы, зададим группе какой-нибудь цвет, например зелёный
3. Создание SVG-анимации
Будем писать css код прямо внутри SVG, это позволит использовать изображение независимо от данного проекта.
4. Выполнение анимации при клике на SVG картинку
Внутри тега defs под style будем писать js-код в теге script
SVG анимация в HTML
Для примера, давайте теперь реализуем анимацию SVG непосредственно в самом HTML.
Вставим svg изображение прямо в HTML код страницы.
Важный момент, все изменения с id и class действуют на всей HTML странице.
Реализуем следующую анимацию: при наведении на наш смайлик, будем выпучивать ему глаза.
1. Добавление классов
2. Создание анимации
Теперь, в отличие от предыдущего примера, мы будем писать CSS код прямо в HTML текущей страницы.
Мы рассмотрели наиболее простые варианты создания анимации, суть думаю все уловили.
Полезные ссылки
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
SVG анимация. С Vivus.js это просто! SVG анимация и примеры кода.
Vivus.js — это легкий класс JavaScript (без зависимостей), который позволяет вам создавать крутую SVG анимацию, придавая им ей, который вы рисуете. Доступно множество различных SVG анимаций, а также возможность создать собственный скрипт для рисования SVG любым удобным для вас способом. SVG анимация выглядит потрясающе с Vivus.js!
VIVUS
Попробуйте Vivus с вашим SVG на Vivus Instant. Если вы планируете использовать библиотеку для анимации одного SVG без обратного вызова или элементов управления, это позволит вам загрузить анимированный SVG на основе CSS без JavaScript.
SVG Анимация и её виды
⇒ С задержкой (Delayed)
Каждый раз, когда у вас есть небольшая задержка на старте. В настоящее время это анимация по умолчанию.
⇒ Синхронно (sync)
⇒ По одному (OneByOne)
Каждый элемент пути рисуется один за другим. Эта анимация дает лучшее впечатление от живого рисунка. Продолжительность каждой строки зависит от их длины, чтобы обеспечить постоянную скорость рисования.
SVG Анимация. Принципы работы
Анимация всегда рисует элементы в том же порядке, как они определены в теге SVG.
Есть несколько условий, которым должен соответствовать ваш SVG:
Код вдохновлен другими источниками. Пост вдохновлен прекрасными Codrops о посте SVG Drawing Animation (если вы не знаете этот веб-сайт, будьте готовы к тому, что ваш ум просто взорвется). Затем для Pathformer, есть много работы от SVGPathConverter от Waest.
Использование
Как я уже сказал, здесь нет никаких зависимостей. Все, что вам нужно сделать, это включить сценарии.
Как проектировать, создавать и анимировать SVG
Вы можете считать Масштабируемую Векторную Графику (Scalable Vector Graphics — SVG) отзывчивой графикой. SVG основан на формате XML, который позволяет создавать изображение, используя определённые теги и атрибуты. Ваш код сгенерирует изображение, которое можно изменять прямо в текстовом редакторе.
Флаг Японии сделанный с помощью SVG
Но более интересное использование заключается в том, что мы можем вставлять SVG напрямую в
SVG бесконечно масштабируем, отзывчив, имеет очень маленький размер файла, перспективен для следующего поколения экранов с неисчислимой плотностью пикселей и может быть стилизован, анимирован и оживлён при помощи известных веб-технологий — CSS и JavaScript.
Все эти вещи ранее были возможны только с использованием Flash, для которого требовался flash-плеер и много сложной работы. К тому же сейчас никто не любит использовать Flash.
Векторные картинки против растровых
Растровые картинки состоят из пикселей, создающих целостное изображение. JPEG, GIF и PNG — самые распространённые типы растровых изображений.
Растровые изображения состоят из фиксированного числа пикселей, поэтому изменение размера картинки невозможно без влияния на её качество. Вы наверняка замечали, что изменение размера таких изображений делает их зернистыми и размытыми. Всё это происходит из-за фиксированного количества пикселей.
Вот что происходит при увеличении растрового изображения:
Что происходит при увеличении растрового изображения
С другой стороны, векторное изображение является гибким и не зависит от разрешения устройства. Они построены на использовании геометрических фигур — линий, прямоугольников, кривых или последовательности команд. Вы можете изменять их атрибуты, такие как цвет, заливка и рамка.
Один из самых распространённых вариантов использования векторных изображений — это иконки и анимация маленьких иконок. Они всегда будут чёткими даже на дисплеях с самой высокой плотностью пикселей, таких как новые 4K смартфоны.
Вот что происходит при увеличении векторного изображения:
Что происходит при увеличении векторного изображения
SVG-теги
Тег внедряет SVG-документ внутрь текущего документа, например, HTML. Тег имеет свои координаты X и Y, высоту и ширину, и свой уникальный id.
Вот как он может выглядеть:
Элемент представляет собой базовую фигуру SVG — прямоугольник. Он может иметь различные атрибуты, такие как координаты, высота, ширина, цвет заливки, цвет обводки и острые или закруглённые углы.
определяет путь, состоящий из координат точек для формирования фигуры. Код с использованием
может казаться магией, но не пугайтесь! В примере ниже код можно прочесть как:
Вам, скорее всего, не потребуется учить этот код, так как он может быть сгенерирован любым SVG-редактором, но будет здорово, если вы будете его понимать.
Создаём SVG
Есть множество доступных SVG-редакторов, например, Adobe Illustrator или Inkscape. Последний бесплатен и с открытым исходным кодом. Поскольку SVG-файлы это XML-код, то в крайнем случае вы можете написать его вручную.
Для этого примера я буду использовать простой онлайн-редактор. В нём вы можете создавать SVG без необходимости устанавливать что-либо ещё.
CSS3-анимация
SVG может быть анимирован с помощью добавления атрибута id или class SVG-тегам, и последующей стилизации их в CSS. Так же, как и любой другой документ. Ниже приведён пример того, как может быть анимирован SVG.
CSS-анимация предлагает множество типов анимации, которые вы можете выбрать. Линейная анимация — это ещё один крутой атрибут SVG.
Для следующего примера я написала текст «Hi, I am Surbhi», используя инструмент «Pen» в редакторе. Затем я использовала ключевые кадры из CSS3 для создания анимации.
Обратите внимание, что каждый тег path имеет уникальный идентификатор. Это связано с тем, что нам важна задержка при создании анимации для нескольких слов.
Анимационный тег
Основные элементы, которые анимируются этим тегом: цвет, движение и трансформация.
Вот пример анимации SVG с помощью тега :
Анимация и интерактивность, основанная на JavaScript
Поскольку SVG — это просто документ с тегами, то мы можем использовать JavaScript для взаимодействия с отдельными элементами SVG, получая их при помощи селекторов ( id или class ).
Помимо стандартного JavaScript, есть множество JS-библиотек для анимации и взаимодействий с SVG: Vivus.js, Snap.svg, RaphaelJS и Velocity.js.
В следующем примере я использовала библиотеку Vivus.js вместе с jQuery, чтобы получить анимацию линий:
Почему нельзя использовать SVG для всех изображений?
SVG больше всего подходит для изображений, которые могут быть построены с помощью нескольких геометрических фигур и формул. Хотя, в принципе, вы можете конвертировать ваши фотографии в SVG, но размер изображения будет несколько мегабайт, что нарушит цель SVG — экономить место. SVG лучше использовать для иконок, логотипов и небольшой анимации.