Online Tool Store
SVG Animator
Анимируйте элементы SVG с ключевыми кадрами CSS и переходами, установите время, ослабление и циклы, затем экспортируйте анимированные файлы SVG.
🔒 Этот инструмент работает полностью в вашем браузере. Ваши файлы никогда не загружаются на сервер.
Дизайн и цвет
SVG Animator
Preview
Draw works best on stroked <path> shapes. This SVG looks fill-only, so the outline may not appear to draw — the original artwork is left intact.
Generated CSS
Everything runs in your browser. Your SVG is never uploaded to a server.
Как работает Аниматор SVG
- Добавьте SVG и выберите тип анимации.
- Задайте длительность и плавность — эффекты рисования лучше всего смотрятся от одной до двух секунд.
- Сохраните защиту reduced-motion, затем вставьте SVG и его CSS на свою страницу.
Метод
Эффект рисования работает так: узор штриха устанавливается на полную длину пути, а смещение анимируется от этой длины до нуля.
stroke-dasharray: L; stroke-dashoffset: L → 0, где L — длина пути
Неверное значение L — причина, по которой анимации рисования иногда начинаются частично нарисованными или заканчиваются раньше времени — узор штриха должен соответствовать реальной длине пути.
FAQ
Почему моя анимация рисования начинается наполовину?
Потому что значение dasharray не соответствует реальной длине пути. Измерьте путь с помощью getTotalLength и используйте это число, а не оценивайте его.
Стоит ли анимировать SVG с помощью CSS или SMIL?
CSS — для всего нового. Анимация SMIL устарела в некоторых движках, и поддержка непоследовательна; ключевые кадры и трансформации CSS хорошо поддерживаются и легче контролируются.
Зачем учитывать prefers-reduced-motion?
Потому что движение вызывает тошноту и вестибулярные симптомы у некоторых людей, и настройка операционной системы — это способ попросить меньше движения. Учитывать её — это медиа-запрос из двух строк.
Как мы сравниваем
| Характеристика | Online Tool Store | Дизайн-приложение | PDF-руководство по стилю |
|---|---|---|---|
| Защита reduced-motion включена | ✓ | ✗ | Редко |
| CSS вместо SMIL | ✓ | По-разному | ✓ |
| Не требуется ПО для анимации | ✓ | ✗ | ✗ |
| Файл остаётся на вашем устройстве | ✓ | ✓ | ✗ |
Аниматор SVG по умолчанию оборачивает каждую анимацию в запрос reduced-motion — шаг доступности, который вручную написанная SVG-анимация почти всегда пропускает.