Конвертировать SVG в GIF
Превратите SVG в GIF, который проигрывается где угодно. Анимированный SVG сохраняет движение — CSS или SMIL, статичный становится чёткой картинкой GIF. Выберите размер, длительность и частоту кадров и скачайте. Бесплатно, в браузере.
Ваш файл
Почему этот инструмент
- Без ограничения размера
- Ничего не загружается
- Без регистрации
SVG — лучший формат для иконок, логотипов и линейной анимации в вебе, но многие места его не показывают. Почтовые клиенты, мессенджеры, презентации, форумы и соцсети хотят GIF или видео.
Этот конвертер проигрывает SVG ровно так, как браузер, и записывает его кадр за кадром. Анимированные индикаторы загрузки, появления логотипов, иконки и иллюстрации сохраняют движение, а GIF повторяется без скачка, если длительность совпадает с одним циклом анимации. SVG открывается в безопасном режиме изображения браузера и никуда не загружается.
Как конвертировать SVG в GIF
Добавьте SVG
Перетащите файл .svg в окно выше или выберите его. Он начнёт проигрываться в предпросмотре, а инструмент сообщит, анимирован ли он и сколько длится один цикл.
Выберите размер и длительность
Задайте ширину; высота следует пропорциям SVG. Длительность выставляется на один цикл анимации, чтобы GIF повторялся без скачка.
Задайте частоту кадров и фон
Двадцати кадров в секунду достаточно для плавной анимации в большинстве случаев. Оставьте фон прозрачным или выберите белый или чёрный для приложений, которые плохо показывают прозрачность.
Конвертируйте и скачайте
Нажмите «Конвертировать в GIF». Анимация записывается в реальном времени — SVG на три секунды записывается три секунды, — затем кодируется. Держите вкладку открытой до конца.
Анимированный SVG в GIF
SVG двигаются двумя способами: элементами SMIL вроде <animate> и <animateTransform> внутри файла или CSS-анимациями @keyframes в его <style>. Оба способа проигрываются здесь точно как в браузере, потому что их проигрывает сам браузер, и GIF записывает то, что вы видите в предпросмотре.
Чтобы GIF повторялся чисто, запись должна длиться один полный цикл. Инструмент читает длительности, записанные в SVG, и выставляет её сам; если анимация состоит из нескольких циклов разной длины, используйте их общее кратное — до 10 секунд.
Движение, которое зависит от скриптов, наведения или клика, внутри изображения не проигрывается, поэтому записать его нельзя. Анимации, которые идут сами по себе, — а это почти все анимированные иконки, индикаторы загрузки и логотипы, — работают.
Размер, частота кадров и вес файла
У SVG нет фиксированного разрешения, поэтому он рисуется чётко в любой выбранной ширине: размытия от увеличения нет. Вес растёт с шириной и числом кадров, поэтому выбирайте наименьший размер, в котором GIF действительно покажут.
Десяти кадров в секунду хватает для медленного простого движения; 20 — плавно для большинства иконок и индикаторов; 25 — для быстрого. Векторная графика с плоскими цветами очень хорошо сжимается в GIF, а неподвижные области хранятся один раз. Если результат всё же тяжёлый, сжатие GIF уложит его в точный вес. Для своих эмодзи GIF в эмодзи подгонит результат под лимиты Discord, Slack или Twitch.
Прозрачный фон
У SVG обычно прозрачный фон, и у GIF он тоже может быть таким. Прозрачность в GIF — всё или ничего для каждого пикселя, поэтому гладкие сглаженные края векторных фигур становятся чёткими и слегка ступенчатыми, особенно на тёмном фоне.
Если вы знаете, где появится GIF, выберите фон в цвет этого места: белый для большинства писем и документов, чёрный для чатов в тёмной теме. Тогда края останутся идеально гладкими.
Безопасность по умолчанию
SVG — документ, который может содержать скрипты и ссылки на другие файлы. Здесь он открывается как изображение, в том же строгом режиме, в котором браузеры показывают SVG в теге <img>: скрипты не запускаются, и ничего за пределами файла не загружается. Поэтому шрифты и картинки, на которые SVG ссылается на других сайтах, не подгружаются, а встроенные — да.
Ничего не загружается на сервер. И запись, и кодирование идут в браузере.
Настройки для типичных SVG-анимаций
Отправные точки. Предпросмотр проигрывает SVG ровно так, как он будет записан.
| SVG | Ширина | Кадров в секунду | Фон |
|---|---|---|---|
| Индикатор загрузки | 240–320 пикс. | 20–25 | В цвет страницы |
| Анимированная иконка | 240 пикс. | 20 | Прозрачный или белый |
| Появление логотипа для письма | 480–640 пикс. | 20 | Белый |
| Иллюстрация или баннер | 640–800 пикс. | 10–20 | Собственный фон |
| Анимированный график | 640 пикс. | 10 | Белый |
Зачем переводить SVG-анимацию в GIF
Email-рассылки
Большинство почтовых клиентов вообще не поддерживают SVG, тем более его анимацию. GIF проигрывается почти во всех.
Слайды и документы
PowerPoint, Keynote, Google Презентации и многие редакторы документов проигрывают GIF там, где SVG-анимация не работает.
Чаты и соцсети
Поделитесь анимированным логотипом или иконкой в Telegram, Slack, Discord, WhatsApp или соцсетях.
Передача дизайна и превью
Покажите движение клиентам и коллегам в сервисах, которые показывают только картинки.
README и документация
Анимированные схемы и демо на сайтах документации и в репозиториях, которые вырезают SVG-анимацию.
Стикеры и эмодзи
Превратите векторные эмодзи и стикеры в GIF, затем подгоните под лимиты мессенджеров.
