SnipSVG

Вступление

SnipSVG – это удобная программа для создания анимации и сохранения ее в файл SVG. Триггером для запуска анимации может служить простое присутствие курсора мыши в окне браузера, наведение курсора на тот или иной элемент, клик по элементу. В редактор можно добавлять разные фигуры, текст и иконки из библиотеки программы или загружать с диска. Потом из них конструировать композицию и "оживлять" ее. Еще программа умеет делать скриншоты.

Из каких элементов делать анимацию

Во-первых, в программе есть немало заготовленных векторных фигур, линий и иконок, которые можно вытащить на холст по кнопке (Shape) и прикрутить им анимацию. Во-вторых, возможно добавить текст, задать ему стандартные параметры и даже пустить вдоль кривой. В-третьих, допускается добавить по кнопке (Image) на холст изображение с диска, растровое изображение, включая анимированный GIF, или векторный svg-файл. Однако стоит заметить, что при добавлении SVG с диска с ним возможно будет обходиться как с единым целым, разбивки на составляющие контуры не произойдет.

Для элементов есть настройка толщины линии, цвета, тени и других параметров. Линии довольно полноценные – с выбором наконечников, пунктирности, формы... Для текста можно задать направляющую линию, в том числе замкнутую фигуру, например круг или спираль, вдоль которой текст будет распределяться.
Также можно вставить видеоплеер от Youtube или Vimeo для просмотра видео с этих платформ.
И, наконец, есть вставка презентации, созданной в программе HelpXplain, обзор который выложен на нашем сайте.
Несколько элементов могут быть объеденены в группу (выделить > ПКМ > Group). Также, выделив несколько элементов, можно их по-разному позиционировать друг относительно друга по осям X и Y. А один элемент можно перемещать по оси Z, то есть перемещать назад или вперед по отношению к другим элементам. Эти манипуляции доступны через ПКМ > Arrange.

Настройки проекта (размеры выходного изображения и цвет всего фона) настраиваются на правой панели, которая открывается по кнопке (Select).

Каков процесс создания анимации

Процесс создания анимации в SnipSVG очень похож на такой же процесс в MS PowerPoint. Сначала по кнопке (Animate) открывается правая панель, предназначенная для учета анимации. Потом совершается клик на длинную кнопку [Add animation]. Окно добавления анимации состоит из трех частей:

1. Назначение события, по которому будет запускаться анимация. Это может быть наведение курсора на всю площадь svg-контейнера или на отдельный элемент внутри этой площади. Это может быть клик мышью.
2. Выбор элемента, цель анимации. Названия элементов присваиваются автоматически при появления их на холсте, однотипные элементы автоматически нумеруются. Названия типов говорящие. Пользователю в этой области окна надо выбрать нужный элемент или группу.
3. Выбор параметра, который будет анимирован, т.е. изменяться во времени. Это могут быть: позиция, угол поворота, заливка и контур, масштаб, прозрачность, цвет, скрыть/отобразить. Набор возможных параметров зависит от выбора типа элемента.

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

SVG – это контейнер в теле HTML страницы и в него может входить код не только SVG, но и CSS, и JS. Все эти три технологии имеют свои анимационные инструменты. Однако SnipSVG запал на CSS-анимацию и основной объем анимации реализует именно через CSS.

В какие форматы можно сохранять работу

Смысл существования этой программы – делать анимированный SVG. Однако, этим форматом возможности экспорта не ограничиваются. По кнопке (Share) вызывается окно экспорта и пользователь видит возможность экспорта в: PNG, JPG, BMP, SVG, RTF, HTML, Help+Manual и clipboard. То есть, можно использовать программу просто как графический редактор и сохранять в растровый формат (png, jpg, bmp). А Help+Manual – это программа для составления документации и через буфер обмена можно в ее топик вставить xml-код вашей работы.

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

Анатолий Опарин / декабрь, 2025

Скачать, почитать

📥 Скачать SnipSVG с сайта разработчика. Есть версии под Windows и macOS. Программа официально бесплатная.
📘 Руководство пользователя SnipSVG в вебе на английском.
🏻 Справа вы может видеть баннер "Детские книги СССР", сделанный мной в программе SnipSVG. Наведите курсор на один из пунктов и увидите анимацию. 📺 Видеорассказ о SnipSVG на русском на 20 минут.