Google LLM научились генерировать SVG-анимацию. И это меняет всё

До 2025 года создание SVG-анимации было задачей для узкого круга специалистов. Дизайнер рисовал вектор в Figma или Illustrator, затем экспортировал в After Effects, анимировал покадрово, пропускал через Lottie-конвертер и получал JSON-файл на 200 КБ, который требовал отдельной JavaScript-библиотеки для воспроизведения. Процесс занимал часы, а результат — тяжёлый bundle и зависимость от сторонних рантаймов.

Нейросети обещали всё упростить. Но на практике модели генерировали SVG-код, который невозможно было использовать. Координаты не совпадали с viewBox, кривые Безье пересекались сами с собой, а анимация — если она вообще появлялась — выглядела как случайный набор подёргиваний.

Проблема: Модели не видели координат

Языковые модели до недавнего времени воспринимали SVG как обычный текст. Для них d="M 10 20 C 30 40, 50 60, 70 80" — это набор токенов, а не математическое описание кривой в двумерном пространстве. Модель не понимала, что viewBox="0 0 100 100" задаёт систему координат, и что точка (50, 50) — это центр.

Результат — «сломанная геометрия»: фигуры вылезали за границы, пропорции нарушались, а animate-директивы ссылались на несуществующие атрибуты.

👉 Мини-анимация 1: «Сломанная геометрия»

Вот как «думала» типичная модель 2023 года. Точки хаотично разлетаются, не попадая в траекторию. Спиннер, который никогда не загрузится:

Обратите внимание: точки не следуют по кольцу — они хаотично прыгают в случайных направлениях. Красный крестик мерцает. Это не баг визуализации — это точное отражение того, как нейросеть «видела» координатное пространство SVG.

Прорыв Google: Пространственное мышление

В начале 2025 года команда Google DeepMind опубликовала исследование, которое изменило подход к генерации векторной графики. Ключевая идея: модель должна мыслить пространственно, а не токенами.

Новые версии Gemini обучались на специализированном датасете, где SVG-код был связан с визуальным представлением. Модель училась не просто предсказывать следующий токен — она училась понимать, как изменение числа d="M 50 50 L 100 50" на d="M 50 50 L 100 100" влияет на видимый результат.

Три ключевых прорыва:

• Понимание viewBox — модель корректно рассчитывает координаты относительно системы координат SVG
• Математика Безье — кубические и квадратичные кривые генерируются с правильными контрольными точками
• Нативная анимация — модель использует , и CSS @keyframes без JavaScript

Результат — модель может взять одну фигуру и математически точно трансформировать её в другую, сохраняя плавность и корректность геометрии.

👉 Мини-анимация 2: «Идеальный морфинг»

Круг плавно перетекает в звезду и обратно. Каждая промежуточная точка кривой рассчитана так, чтобы переход был бесшовным. Никаких артефактов, никаких пересечений:

Контур не разрывается, не мерцает и не прыгает. Это возможно только если модель понимает, что 10 точек круга должны плавно переместиться в 10 вершин звезды, сохраняя непрерывность кривой. Именно это и есть пространственное мышление — не текстовое предсказание, а геометрическое понимание.

Мультимодальность и контекст

Следующий уровень — способность модели работать с уже существующим SVG-кодом. Раньше генеративные модели либо писали SVG с нуля, либо ломали существующую структуру, пытаясь добавить в неё анимацию.

Современные модели умеют читать контекст: они анализируют существующий SVG, определяют его структуру (группы, слои, идентификаторы), и вносят точечные изменения, не затрагивая остальные элементы.

Это критично для реальных проектов. Дизайнер передаёт иконку из Design System, и модель добавляет тонкую анимацию к одному элементу — например, мерцающий блик внутри шестерёнки — без изменения основной геометрии.

👉 Мини-анимация 3: «Локальная трансформация»

Статичная иконка шестерёнки. Внутри неё — маленькая вращающаяся шестерёнка и мерцающий блик. Основная фигура не тронута:

Обратите внимание на разделение ответственности: внешняя шестерёнка полностью статична — её координаты не изменяются ни одним тегом animate. Внутренняя шестерёнка вращается независимо. Блик движется внутри clip-path, не выходя за границы. Это то, что делает технологию production-ready: модель не ломает существующий код, а расширяет его.

Почему это важно для production

Нативные SVG-анимации — это не просто «красиво». У них есть ряд объективных преимуществ перед JavaScript-решениями:

• Нулевой рантайм — не нужны библиотеки вроде Lottie, GSAP или Framer Motion для простых анимаций
• GPU-ускорение — браузеры оптимизируют трансформации opacity и transform через GPU compositor
• Размер — анимированный SVG-файл обычно занимает 1–5 КБ против 50–200 КБ JSON-файла Lottie
• Accessibility — SVG поддерживает role, aria-label,