Анімація SVG Експорт

2 min read

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

Коли використовувати SVG

SVGs ідеально підходить для:

Налаштування анімації на сайтах
Нескінченна масштабованість потрібна
Важливий розмір файлу
Вам потрібно редагувати вихід вектора

Експорт як SVG

Натисніть Експорт* в заголовку
Виберіть Анімовані SVG
Експорт
Файл завантажується відразу

Підтримка анімації

Повна підтримка ✅

Анімація	SVG вихід
Імпульс	ХККСНУМКСК
Ротор	ХККСНУМКСК
Боксер	ХККСНУМКСК
Фад	ХККСНУМКСК
Смоктати	ХККСНУМКСК
Логін	ХККСНУМКСК
Пиріг	ХККСНУМКСК

Не підтримується ❌

Головна	Про нас
Видавництво	Вимоги до JavaScript
Ефекти (Sparkle, Blast)	Рамкові анімації
Кутовий поворот	на основі Frame
Комплексні брелоки	Підтримка SMIL

ХККСНУМКСК

Browser Support: SVG використовує SMIL, який підтримується в Chrome, Firefox, Safari та Edge. Деякі старі браузери можуть показати статичні SVG.

ХККСНУМКСК

Налаштування сайтів

Прямі в’язання

<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

Навігація

ХККСНУМКСК

SVG Поради:

Використовуйте SVG для веб-зв’язку, де якісні речовини
Уникайте ефектів та анімації на машинці
Тестування в цільових браузерах
SVGs може бути стильний з CSS після покладання

ХККСНУМКСК

Падбек для непідтримуваних анімацій

Якщо ваш дизайн використовує непідтримувані функції:

Експорт як MP4 або GIF для анімаційної версії
Експорт як PNG для статичного зворотного зв’язку
Використовуйте <picture> елемент для прогресивного підвищення