🎨 Оживляем вектор: шпаргалка по SVG-анимации
SVG — идеальный холст для анимации: масштабируется без артефактов, весит килобайты и управляется кодом. Делюсь технической выжимкой, от основ до продакшн-трюков.
🔹 3 способа анимации
CSS (@keyframes, transition) → золотой стандарт для UI. Анимируй только transform и opacity → композитинг на GPU, 0 reflow/relayout.
SMIL (<animate>, <animateTransform>, <animateMotion>) → встроен в SVG, удобен для path morph, петель и простых таймлайнов. Поддержка в Chrome/Edge стабильна, в Safari/Firefox частичная. W3C помечает как legacy, но для автономных иконок всё ещё работает.
JavaScript (GSAP, anime.js, Web Animations API) → для сложных сценариев: синхронизация с состоянием приложения, scroll-trigger, физика, обратная связь от пользователя.
💡 Минимальный рабочий пример (CSS)
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.08); opacity: 1; }
}
.icon {
animation: pulse 1.8s ease-in-out infinite;
transform-origin: center; /* обязательно для SVG! */
}
⚙️ Продакшн-чеклист
• viewBox обязателен, width/height в атрибутах лучше убрать → отзывчивость без искажений.
• transform-origin в SVG по умолчанию 0 0. Используй %, px или transform-box: fill-box для предсказуемого поведения.
• will-change: transform ставь динамически (JS/CSS-классы) и снимай после анимации → экономия VRAM.
• @media (prefers-reduced-motion: reduce) → отключай/заменяй на opacity или статичный fallback. Это требование WCAG.
• Оптимизация: SVGO/SVGOMG → удаляй <metadata>, <desc>, группируй пути в <g>, конвертируй stroke в fill где возможно, минимизируй d-строки.
🛠 Инструменты отладки
• DevTools → вкладка Animations (таймлайн, кривые, transform-оси)
• outline: 1px solid red на <svg> → быстрая проверка viewBox и overflow
• Lighthouse → аудит CLS и performance при анимациях в viewport
📌 Когда что выбирать?
UI-иконки/лоадеры → CSS.
Морфинг путей/логотипы → CSS + path animation или JS (GSAP MorphPlugin).
Интерактив/сложные сцены → Web Animations API или GSAP.
Сохраняй, если планируешь работать с вектором. В комментариях кидай свои *.svg или задавай вопросы по конкретным кейсам → разберём код и производительность. 👇
SVG — идеальный холст для анимации: масштабируется без артефактов, весит килобайты и управляется кодом. Делюсь технической выжимкой, от основ до продакшн-трюков.
🔹 3 способа анимации
CSS (@keyframes, transition) → золотой стандарт для UI. Анимируй только transform и opacity → композитинг на GPU, 0 reflow/relayout.
SMIL (<animate>, <animateTransform>, <animateMotion>) → встроен в SVG, удобен для path morph, петель и простых таймлайнов. Поддержка в Chrome/Edge стабильна, в Safari/Firefox частичная. W3C помечает как legacy, но для автономных иконок всё ещё работает.
JavaScript (GSAP, anime.js, Web Animations API) → для сложных сценариев: синхронизация с состоянием приложения, scroll-trigger, физика, обратная связь от пользователя.
💡 Минимальный рабочий пример (CSS)
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.08); opacity: 1; }
}
.icon {
animation: pulse 1.8s ease-in-out infinite;
transform-origin: center; /* обязательно для SVG! */
}
⚙️ Продакшн-чеклист
• viewBox обязателен, width/height в атрибутах лучше убрать → отзывчивость без искажений.
• transform-origin в SVG по умолчанию 0 0. Используй %, px или transform-box: fill-box для предсказуемого поведения.
• will-change: transform ставь динамически (JS/CSS-классы) и снимай после анимации → экономия VRAM.
• @media (prefers-reduced-motion: reduce) → отключай/заменяй на opacity или статичный fallback. Это требование WCAG.
• Оптимизация: SVGO/SVGOMG → удаляй <metadata>, <desc>, группируй пути в <g>, конвертируй stroke в fill где возможно, минимизируй d-строки.
🛠 Инструменты отладки
• DevTools → вкладка Animations (таймлайн, кривые, transform-оси)
• outline: 1px solid red на <svg> → быстрая проверка viewBox и overflow
• Lighthouse → аудит CLS и performance при анимациях в viewport
📌 Когда что выбирать?
UI-иконки/лоадеры → CSS.
Морфинг путей/логотипы → CSS + path animation или JS (GSAP MorphPlugin).
Интерактив/сложные сцены → Web Animations API или GSAP.
Сохраняй, если планируешь работать с вектором. В комментариях кидай свои *.svg или задавай вопросы по конкретным кейсам → разберём код и производительность. 👇