Компрессор SVG-анимаций

• Мгновенное сжатие SVG-анимаций в браузере: сжимайте SVG-анимации мгновенно в браузере — без загрузки на сервер, без облачной обработки и без ожидания. Компрессор SVG-анимаций удаляет метаданные редактора, убирает SMIL-анимации без эффекта и оптимизирует данные путей за миллисекунды, полностью на вашем устройстве.
• Безопасный онлайн-компрессор SVG-анимаций: ваш SVG никогда не покидает устройство. Компрессор SVG-анимаций работает целиком в браузере: без загрузки на сервер, без передачи данных и 100 % конфиденциально. Безопасно для проприетарных UI-анимаций, брендовых ресурсов и рабочих SVG-файлов.
• 9 настраиваемых опций сжатия: компрессор SVG-анимаций предлагает девять оптимизаций, включаемых по отдельности: от удаления данных редакторов Inkscape/Illustrator до удаления SMIL-анимаций без эффекта и оптимизации точности координат путей. Включайте только нужные трансформации.
• 100 % бесплатно навсегда: компрессор SVG-анимаций полностью бесплатный: без регистрации, без премиум-тарифа, без ограничений размера файлов и без рекламы. Сжимайте неограниченное количество SVG-анимаций без затрат, навсегда.

• Оптимизация производительности сайтов: сжимайте SVG-анимации, экспортированные из Inkscape, Illustrator или Figma, перед вставкой в веб-страницы: экспортированные редакторами SVG содержат килобайты метаданных, невидимых пользователям, но раздувающих размер файла. Компрессор SVG-анимаций обычно даёт уменьшение на 40–70 % для экспортированных редакторами анимированных SVG.
• Оптимизация SVG-компонентов в React и Next.js: сжимайте SVG-анимации перед преобразованием в React-компоненты с помощью SVGR: меньшие SVG дают меньшие React-компоненты и уменьшают размер JavaScript-бандла. Компрессор SVG-анимаций удаляет пространства имён редакторов, вызывающие проблемы разбора в SVGR.
• Оптимизация анимаций для мобильного веба: уменьшайте размер SVG-анимаций для доставки в мобильный веб: меньшие SVG быстрее разбираются на мобильных CPU и сокращают расход трафика в сетях 3G/4G. Компрессор SVG-анимаций удаляет SMIL-анимации без эффекта, которые нагружают CPU без видимого результата.
• Подготовка анимаций для Lottie и GSAP: сжимайте исходные SVG-файлы перед импортом в рабочие процессы анимации Lottie или GSAP: более чистые SVG с оптимизированными данными путей дают более точный импорт анимации и меньшие выходные файлы. Компрессор SVG-анимаций удаляет артефакты редакторов, которые путают инструменты анимации.
• Оптимизация SVG-ресурсов дизайн-систем: сжимайте анимированные SVG-иконки и иллюстрации перед публикацией в дизайн-системе или npm-пакете: компрессор SVG-анимаций удаляет метаданные Figma, Sketch и Illustrator, которые раздувают размер SVG-файлов, не влияя на рендеринг.
• Оптимизация Core Web Vitals и PageSpeed: уменьшайте размер SVG-анимаций, чтобы улучшить показатели Largest Contentful Paint (LCP) и Total Blocking Time (TBT): большие inline-SVG задерживают рендеринг. Компрессор SVG-анимаций помогает выполнить рекомендацию Google PageSpeed «Эффективно кодируйте изображения» для SVG-ресурсов.

SVG-файлы (Scalable Vector Graphics), экспортированные из инструментов дизайна вроде Inkscape, Adobe Illustrator и Figma, содержат большое количество метаданных редактора — объявления пространств имён, свойства документа, имена слоёв и атрибуты, специфичные для инструмента, — которые невидимы пользователям, но значительно раздувают размер файла. SVG с SMIL-анимациями (использующие <animate>, <animateTransform> и <animateMotion>) часто содержат лишние кейфреймы, где значения from и to идентичны: они не дают видимой анимации, но потребляют байты и CPU. Наш компрессор SVG-анимаций применяет девять настраиваемых оптимизаций, чтобы уменьшить размер SVG-файла, сохраняя все видимые анимации и рендеринг.

1. 1. Вставьте код SVG: введите SVG на панель ввода или нажмите «Загрузить .svg», чтобы выбрать файл. Используйте «Загрузить пример», чтобы попробовать компрессор на реалистичном анимированном SVG, экспортированном из Inkscape.
2. 2. Выберите параметры сжатия и нажмите «Сжать SVG»: все девять оптимизаций включены по умолчанию. Компрессор применяет каждую трансформацию по порядку и показывает, сколько комментариев удалено, элементов удалено и путей оптимизировано. Обработка выполняется полностью в вашем браузере: ваш SVG никогда не покидает устройство.
3. 3. Скопируйте или скачайте сжатый SVG: панель вывода показывает сжатый код SVG. Скопируйте его в буфер обмена или скачайте как файл .svg. Замените исходный SVG в проекте: сжатый результат отображается одинаково во всех браузерах.

• Метаданные редактора: удаляются атрибуты пространств имён Inkscape (inkscape:*, sodipodi:*), атрибуты Illustrator (i:*) и Sketch (sketch:*): они могут составлять 20–50 % размера экспортированного SVG.
• SMIL-анимации без эффекта: элементы <animate>, где from равен to, не дают видимой анимации: они удаляются полностью. Часто встречаются в SVG, экспортированных инструментами, которые добавляют заглушки анимации всем элементам.
• Точность координат путей: координаты данных путей с более чем 2 знаками после запятой округляются, например M 10.123456789 20.987654321 становится M 10.12 20.99. Субпиксельная точность свыше 2 знаков незаметна при любом размере экрана.
• Значения атрибутов по умолчанию: атрибуты вида opacity="1", stroke="none", fill-opacity="1" и display="inline" являются значениями SVG по умолчанию и удаляются: они добавляют байты, не меняя рендеринг.

Компрессор SVG-анимаций применяет безопасные консервативные трансформации с помощью обработки на основе регулярных выражений. Он не разбирает DOM SVG, поэтому сложные вложенные структуры могут быть оптимизированы не полностью. Для максимального сжатия используйте компрессор SVG-анимаций как первый проход, а затем пропустите результат через SVGO (оптимизатор SVG на Node.js) для дополнительной экономии. Всегда проверяйте, что сжатый SVG корректно отображается в целевых браузерах, прежде чем публиковать его в продакшене, особенно для сложных SMIL-анимаций с CSS-взаимодействиями.