Красивая SVG-анимация — это отлично. Но если она грузит процессор на 30%, вызывает лаги при скролле и сажает батарею телефона, пользователь просто закроет вкладку.

Лови технический гайд по **оптимизации SVG-анимации**: от экономии байтов до стабильных 60 FPS.

⚡ **Оптимизация SVG-анимации: от байтов до 60 FPS**

🔹 Уровень 1: Оптимизация файла (Payload)
Меньше код → быстрее парсинг DOM → быстрее старт анимации.
• SVGO (v3+): прогоняй всё через него. Обязательные плагины: `removeMetadata`, `cleanupAttrs`, `convertShapeToPath` (для единообразия), `mergePaths`.
• Упрощение путей: в Figma/Illustrator используй "Simplify Path". Меньше узлов в кривых Безье = короче строка `d` и меньше работы для браузера при морфинге.
• Инстансинг: если элемент повторяется (например, частицы), используй `<defs>` и `<use>`. Браузер рендерит геометрию один раз, экономя память.

🔹 Уровень 2: Оптимизация рендера (Compositing)**
Главный враг производительности — перерисовка (Paint) и пересчет макета (Layout).
• Золотое правило: анимируй только `transform` (scale, rotate, translate) и `opacity`. Эти свойства обрабатываются на GPU (Compositor Thread) без участия главного потока.
• Табу: никогда не анимируй `width`, `height`, `top`, `left`, `x`, `y` или `stroke-width` через CSS keyframes. Это гарантированный Layout Thrashing.
• Морфинг (`d`): анимация атрибута `d` — это тяжелая операция Paint. Если она необходима, убедись, что у начального и конечного пути одинаковое количество точек. Используй GSAP MorphSVG или CSS Houdini (где поддерживается), но применяй это точечно.
• `transform-box: fill-box`**: добавляй это свойство к анимируемым элементам. Оно заставляет `transform-origin` отсчитываться от границ самого элемента, а не всего SVG-холста. Это дешевле для браузера, чем вычислять проценты от `viewBox`.

🔹 **Уровень 3: Управление ресурсами (JS & DOM)**
• **Дисциплина `will-change`**: не вешай `will-change: transform` на всё подряд в CSS. Это резервирует слой в VRAM. Добавляй его через JS за кадр до начала анимации и удаляй по событию `animationend` или `transitionend`.
• **Intersection Observer**: не крути анимацию, если её не видно. Используй IO, чтобы ставить `animation-play-state: paused`, когда SVG уходит из viewport, и `running`, когда возвращается.
• **Web Animations API (WAAPI)**: для сложных JS-анимаций выбирай WAAPI (`element.animate()`) или GSAP. Они работают эффективнее, чем самописные циклы на `requestAnimationFrame`, и лучше интегрируются с движком браузера.

🔹 **Уровень 4: Доступность и батарея (A11y & Power)**
• **`@media (prefers-reduced-motion: reduce)`**: обязательно предоставляй фоллбек. Заменяй сложные движения на мгновенное появление (`opacity: 0` → `1`) или статичный кадр. Это не только про этику, но и про WCAG.
• Отключение при низком заряде: в PWA или сложных приложениях можно проверять `navigator.getBattery()` и отключать тя

🎨 Оживляем вектор: шпаргалка по 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 или задавай вопросы по конкретным кейсам → разберём код и производительность. 👇