Анимированный экспорт SVG

2 min read

Экспортируйте анимацию в виде файлов SVG для веб-встраивания и масштабируемой графики.

Когда использовать SVG

SVG идеально подходит, когда:

  • Встраивание анимации на веб-сайты
  • Необходима бесконечная масштабируемость
  • Небольшой размер файла важен
  • Нужен редактируемый векторный выход

Экспорт как SVG

  1. Нажмите Экспорт в заголовке
  2. Выберите Animated SVG
  3. Нажмите Экспорт
  4. Файл загружается немедленно

Анимационная поддержка

Полностью поддерживается

Анимация Производитель SVG
Пульс <animateTransform type="scale">Q
Вращать <animateTransform type="rotate">Q
Отскакивать <animateTransform type="translate">Q
Фаде <animate attributeName="opacity">Q
Колебание <animateTransform type="rotate">Q
Скольжение <animateTransform type="translate">Q
Взлет <animateTransform type="translate">Q

Не поддерживается

Особенность Причина
Пишущая машинка Требуется JavaScript
Эффекты (Sparkle, Blast) Фрейм-анимация
Вращение шаблонов основанный на кадрах
Сложные Keyframes Поддержка SMIL ограничена
Q

Поддержка браузера: Анимация SVG использует SMIL, который поддерживается в Chrome, Firefox, Safari и Edge. Некоторые старые браузеры могут показывать статический SVG.

Q

Встраивание на сайты

Прямой встроенный

<img src="animation.svg" alt="Animated graphic">

Инлайн SVG

Для большего контроля вставьте код SVG напрямую:

<svg viewBox="0 0 800 600">
  <!-- SVG content -->
</svg>

CSS Справочная информация

.element {
  background-image: url('animation.svg');
}

Настройка после экспорта

Файлы SVG являются редактируемыми XML. Вы можете:

  • Открыт в текстовом редакторе
  • Изменить цвета, размеры, сроки
  • Добавить стиль CSS
  • Встроить пользовательский JavaScript

Что экспортируется

Элемент Экспортируется как
Текст Элементы <text>
Формы <path>, <circle> и т.д.
Предыстория <rect> с заполнением
Анимация Теги SMIL <animate>

Размер файла

Файлы SVG обычно очень маленькие:

  • Простая анимация: 2-10 КБ
  • Сложная сцена: 20-50 КБ
  • Меньше, чем GIF или MP4

Советы

Q

Советы SVG:

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

Обсуждение Fallback for Unsupported Animations

Если ваш дизайн использует неподдерживаемые функции:

  1. Экспорт как MP4 или GIF для анимированной версии
  2. Экспорт как PNG для статического запаса
  3. Использование элемента <picture> для прогрессивного улучшения