Многие из этого ответа также опубликованы в этом связанном вопросе о том, как анимировать иллюстрации для Интернета.

Избегайте анимации SMIL

Сара Суэйдан, вероятно , лучший аниматор SVG в Интернете, написала: «Я знаю, что написала руководство по анимации SMIL , но, видя их будущее, лично я их больше не использую». Вы тоже не должны.

Анимации SMIL не работают ни в IE, ни в Edge, ни в некоторых мобильных браузерах , и постепенно удаляются из Chrome/Opera (хотя совсем недавно команда Chrome заявила, что это временно приостановлено ). Вы должны избегать их использования в 99% случаев.

Используйте CSS для очень простых анимаций

SVG в значительной степени можно анимировать с помощью чистого CSS (включая использование :hoverсостояний, transforms, transitions и animations). Планируется получить полную поддержку CSS-анимации , но в настоящее время поддерживаются только некоторые из них, которые могут содержать ошибки из-за проблем с кросс-браузерностью.

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

Используйте анимацию JavaScript, если CSS не работает

В большинстве случаев SVG можно анимировать с помощью небольшого количества JavaScript без необходимости использования библиотеки анимации JavaScript. Анимация в JS имеет гораздо большую кросс-браузерную поддержку и довольно проста в использовании при наличии некоторого базового понимания.

Для сложных анимаций, требующих использования временной шкалы или чего-то подобного, использование такой библиотеки, как GSAP , может быть очень полезным. Существует бесчисленное множество других библиотек SVG-анимации, Snap.svg — еще одна крупная библиотека, но большинство из них не справляется с анимацией так же легко и производительно, как GSAP.

Для определенных типов анимации использование определенного JS-плагина, такого как MorphSVG от GSAP, может сэкономить вам немало времени, потому что он заботится о кросс-браузерных проблемах и всех вычислениях. Однако для большинства анимаций такие плагины не требуются. Дополнительную информацию см. в «Руководстве по альтернативам возможностям SMIL» .

Также допустимо использовать полифиллы для SMIL, но я устал это делать, потому что они не очень широко используются/тестируются. При этом наиболее распространенными являются Эрик Виллигерс и FakeSmile .

Инструменты

Единственное программное обеспечение, с которым я столкнулся, которое экспортирует в SVG + JS, — это плагин Adobe After Effects под названием Lottie (ранее Bodymovin), расширение Flash под названием Flash 2 SVG и небольшой онлайн-инструмент под названием SVG Circus . Помимо этого, программные аниматоры, такие как Adobe Edge Animate, Adobe Animate CC или Animatron , экспортируют в SMIL-анимации, которые не следует использовать. Таким образом, лучше всего, чтобы какой-нибудь разработчик создал анимацию SVG+CSS или SVG+JS, используя экспортированные SVG из редактора . В Inkscape есть отличный ресурс со ссылками на руководства и примеры того, как это сделать.

Я уверен, что в будущем больше программного обеспечения для анимации будет поддерживать экспорт в SVG+JS.

Некоторые другие важные примечания

• Важно помнить о производительности . Сара Драснер создала несколько тестов производительности для SVG , которые показывают, что вы должны выбирать анимацию CSS с аппаратным ускорением, когда это возможно, но прибегать к хорошему подходу JavaScript, когда это невозможно.

• Лучше всего использовать SVG в <object>теге или встроенный непосредственно в <svg>элемент XML, если он интерактивный, и в качестве фонового изображения, если он не интерактивный, но есть и другие способы сделать это .

Чтобы получить более полное представление о веб-анимации, прочитайте пост Рэйчел Набор в A List Part . Для некоторых дополнительных предложений по инструментам этот пост очень полезен, хотя я не согласен со всеми мнениями, особенно с тем, как он представляет анимацию SMIL.

Я всегда считал, что полагаться на что-либо, кроме библиотек JS, очень сложно для поддержки/обслуживания WRT.

Я всегда использовал D3.js. Первоначально он был создан для создания интерактивных элементов SVG/DOM из наборов данных. Однако вы можете изменить SVG/DOM, включенный в страницу, если JS имеет к ней доступ.

Я использую в различных проектах для создания/анимации SVG/DOM. некоторые примеры включают программные информационные панели в реальном времени, визуализацию карт, преобразования DOM и создание файлов SVG для включения в PDF-файлы. Я видел это во всем Интернете, а также. На сайте есть куча примеров и ссылок на страницы, которые его использовали.

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

Ниже приведены возможные способы анимации svg:

SVG АНИМАЦИЯ УЛЫБКИ

SVG можно анимировать с помощью мощного собственного языка разметки SMIL, который экспортируется непосредственно из инструментов анимации, таких как плагин Adobe Animate CC+flash2svg.

Чтобы анимировать SVG с помощью SMIL даже в браузерах, в которых отсутствует поддержка, вам просто нужно использовать полифилл SMIL.

Полифилл — это специальный фрагмент кода javascript, который обеспечивает поддержку функций, отсутствующих в браузере, переводя исходную кодировку в ту, которую браузер может понять.

Полифил SMIL, созданный Эриком Виллигерсом, делает именно это: он переводит SMIL в API веб-анимации, который поддерживает даже браузер Microsoft. Он настолько эффективен, что разработчики Google Chrome решили отказаться от встроенной поддержки SMIL и сосредоточиться на веб-анимации, предоставив полифиллу Эрику Виллигерсу задачу воспроизведения файлов SMIL в Chrome.

Кто-то ошибочно истолковал это как отказ от поддержки SMIL в Chrome и раскритиковал разработчиков за этот выбор. Но это не было настоящим устареванием, а просто перемещением работы по интерпретации SMIL на уровне полифилла.

На самом деле сами разработчики Chrome процитировали полифилл Willigers в самом официальном объявлении о своем намерении отказаться от SMIL.

Так что, если вы прочитали в Интернете о кончине SMIL, не волнуйтесь. «Смерть» СМИЛ была сильно преувеличена. Это больше похоже на перерождение.

Чтобы использовать SMIL во всех браузерах, включая IE и EDGE, вам просто нужно добавить этот полифилл javascript на свою веб-страницу:

https://github.com/ericwilligers/svg-анимация

Вот демонстрационная страница с использованием полифилла, созданного Томом Бирном, автором популярного экспортера flash2svg:

страница без полифилла:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

и та же страница с полифиллом:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

Если вы посмотрите на источник, это в значительной степени самоочевидно.

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

ЭКСПОРТ АНИМАЦИИ В SVG SMIL

Более простой способ создания SVG-анимаций — использовать такие инструменты, как Adobe Animate CC, для их рисования и плагины, такие как Flash2svg ( https://github.com/TomByrne/Flash2Svg ), для их экспорта в SVG. С его помощью вы можете экспортировать почти все анимации + звук в виде одного файла SVG, например, этот эпизод мультфильма:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

SVG АНИМАЦИЯ JS БИБЛИОТЕКИ

Способ javascript более сложен. Прежде всего, вам нужно быть javascript-программистом. Тогда вам придется выбирать между множеством библиотек. Более популярны:

• SnapSVG http://snapsvg.io
  Эта библиотека является преемником старой и популярной библиотеки анимации Raphael, созданной тем же автором. Очень стабильный, но он конвертирует SVG во внутренний формат во время выполнения, чтобы анимировать его. Варианты морфинга также очень просты, просто линейная интерполяция. (ПРИМЕЧАНИЕ. Существует также плагин snap.svg для Adobe Animate CC, но экспортируемые файлы раздуты. Экспортер создает одну команду snap svg для каждого кадра анимации, а не для каждого ключевого кадра, создавая файл svg размером 18 КБ с более чем 1000 строк. кода, просто чтобы повернуть простой прямоугольник на 360 градусов. Плагин Flash2svg намного эффективнее, всего одна команда и несколько байтов для выполнения той же работы).

• Greensock MorphSVG
  http://greensock.com/morphSVG
  Полнофункциональная библиотека морфинга, позволяющая легко анимировать SVG без необходимости конвертировать их во внутренний формат. Просто создайте 3-4 ключевых кадра svg в Inkscape, и библиотека Greenock SVGMorphing автоматически выполнит интерполяцию между кадрами и создаст все промежуточные кадры для плавного воспроизведения. Вот пример:
  http://codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html
  Если вы хотите анимировать в 3D, эта библиотека очень мощная.
  Seen.js визуализирует сетки файлов 3D .obj в формате SVG и очень легко анимирует их.

РЕДАКТОРЫ SVG-ИЗОБРАЖЕНИЙ

Что касается инструментов, вы можете создавать ключевые кадры анимации в основном с помощью трех программ:

• Inkscape : с открытым исходным кодом, имеет множество функций, это расширенный пакет для редактирования векторов, созданный людьми, участвующими в рабочей группе SVG. Ссылка на формат SVG. Нелегко учиться.

• Adobe Illustrator: коммерческое, очень мощное программное обеспечение для векторного рисования, оно предлагает множество функций, которые до сих пор не поддерживаются SVG, но также имеет наихудшую совместимость с форматом. Вам часто придется вручную редактировать экспортированный файл SVG, чтобы исправить беспорядок в иллюстраторе. Но он очень популярен в художественной школе, и все художники умеют им пользоваться.

• Affinity Designer: это коммерческое программное обеспечение, такое как Illustrator, но с отличной совместимостью с SVG, почти на уровне Inkscape. Пользовательский интерфейс гораздо более дружественный, и теперь он становится очень популярным среди художников SVG.

РЕДАКТОРЫ SVG-АНИМАЦИИ

В настоящее время единственным редактором анимации SVG является:

• Adobe Animate CC: прежний Adobe Flash Pro был полностью переписан Adobe для перехода от устаревшей флэш-анимации к современной SVG-анимации. Вы можете экспортировать полученные SVG-анимации вместе с пользовательской библиотекой javascript или выбрать сохранение в SVG+SMIL с помощью таких плагинов, как «flash2svg». Этот последний вариант очень эффективен, я всегда использую его вместо раздутого родного экспортера.

Вы можете скачать бесплатный плагин отсюда: https://github.com/TomByrne/Flash2Svg

Или установите его из панели Adobe Plugins: https://creative.adobe.com/addons/products/7232 .

К сожалению, Adobe Animate CC является коммерческой. Существуют бесплатные альтернативные анимационные приложения с открытым исходным кодом, но я пробовал их все, и они все еще отстой ИМХО. Будем надеяться на будущее.

Ссылки:
мой более исчерпывающий пост в блоге на эту тему: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec

Случай, упомянутый в snap.svg: https://stackoverflow.com/questions/35727635/adobe-animate-snap-svg-plugin-huge-files