Минутку...(/)
В данный момент мы оптимизируем ваши изображения. Пожалуйста, подождите немного, пока мы обеспечим высокое качество результатов.
Отлично, мы успешно сжали ваши изображения.
Изображения оптимизированы.
Сжать SVG изображения онлайн
Удалите метаданные, сохраните вектор: ваш SVG выглядит так же
Оптимизация...
Сжимайте SVG-файлы, удаляя всё лишнее, что оставил редактор
Откройте SVG в Блокноте, и вы увидите всё содержимое: теги, числа, текст. В этом и состоит суть формата. Нет пикселей, нет фотографии — только инструкции для рисования фигур. Это важно, потому что определяет, что здесь значит «сжатие». Ничего не сжимается и не искажается — просто удаляется избыточный текст, а само изображение остаётся нетронутым.
Откуда на самом деле берётся размер файла
Почти ничего из этого — не само изображение. Экспортируйте логотип из Illustrator, Figma или Inkscape, и файл придёт с «бумагами» редактора: комментарий генератора, DOCTYPE, который никому не нужен с 2008 года, объявление XML, блок метаданных с описанием документа в RDF, имена слоёв и блок стилей, полный неиспользуемых классов. В протестированном нами реальном логотипе всё это составляло примерно две трети файла. Сами фигуры были лишь малой частью.
Далее идут числа. Редакторы записывают координаты с полной плавающей точкой, поэтому прямоугольник, стоящий на 10 и шириной 180, сохраняется как 10.000000 и 180.00000000. Умножьте это на каждую точку в каждом пути — и только одни десятичные знаки могут превысить размер самого рисунка.
Это остаётся вектором, поэтому качество не теряется
Это тот момент, о котором многие зря беспокоятся. У SVG нет разрешения. Он отрисовывается заново в любом размере, в котором отображается — будь то фавиконка 16 пикселей или билборд. Удаление блока метаданных никак не влияет на это. Полученный файл масштабируется точно так же, как и загруженный, выглядит идентично на любом размере и по-прежнему полностью редактируется в вашей программе.
Что удаляется
Очистка проводится максимально осторожно. Удаляется только то, что не влияет на отображение.
| Удаляется | Остаётся |
|---|---|
| Комментарии редактора и строки генератора | Все фигуры, пути и кривые |
| Блок метаданных и его пространства имён RDF | Цвета, градиенты и прозрачность |
| DOCTYPE и объявление XML | Текстовые элементы и шрифты |
| Определения, на которые никто не ссылается | Используемые фильтры, маски и обтравочные пути |
| Пустые группы и слои | Трансформации и viewBox |
| Лишние знаки после запятой в координатах | Всё, что влияет на внешний вид |
Почему уменьшение SVG важнее, чем уменьшение фотографий
SVG обычно — это логотип или иконка, то есть элемент, который находится в шапке каждой страницы сайта и загружается раньше всего остального. Фотографии грузятся поздно и лениво, а иконки — нет. Сэкономить несколько килобайт на логотипе в шапке важнее для скорости страницы, чем столько же на изображении в середине статьи, потому что браузер ждёт именно шапку, прежде чем начать отрисовку.
О чём стоит подумать перед публикацией
Очистка укорачивает внутренние id-атрибуты в файле. Все внутренние ссылки в SVG обновляются, так что градиенты, маски и обтравочные пути продолжают работать, и изображение отображается как прежде. Но про внешний код сервис не знает. Если ваш SVG используется в спрайте и на него ссылаются другие страницы, или если к элементу обращается CSS или скрипт по id, эти моменты стоит проверить после замены файла. Для обычного логотипа или экспортированной иконки, а это большинство SVG, ничего проверять не нужно.
Если внутри SVG есть фотография
Иногда SVG — это не совсем вектор. Если поместить фотографию на холст в Illustrator и экспортировать как SVG, изображение встраивается как длинная строка base64 внутри XML. Файл может весить два мегабайта и содержать всего одну фигуру. Очистка разметки не затрагивает этот блок, потому что это не разметка. Если ваш файл почти не уменьшился и изначально содержал фото — вот причина. Решение: выньте изображение и сожмите его отдельно как JPEG или PNG.
Никаких настроек
Нет опций, уровней сжатия и вкладок с настройками. Загружаете файл — получаете очищенный. Несколько файлов работают так же: можно скачивать по одному по мере готовности или весь набор архивом ZIP.
Что происходит с вашими файлами
Файлы передаются по зашифрованному соединению, очищаются и удаляются с сервера через час. Ничего не сохраняется и не используется для других целей.
Что вы получаете
- Удалены метаданные редактора, комментарии генератора, DOCTYPE и неиспользуемые определения
- Координаты округлены до разумной точности вместо девяти знаков после запятой
- Файл по-прежнему бесконечно масштабируется и открывается в вашем редакторе
- Идентичное отображение на любом размере, проверено с оригиналом
- Пакетная загрузка, скачивание по одному или всех файлов архивом ZIP
- Без регистрации, без установки, файлы удаляются с сервера через час
Что дальше?
Работаете с логотипом, который есть и в растровом виде? Сжать PNG — для прозрачной версии, а Сжать WebP — для современной. Если в SVG оказался встроенный снимок, Сжать JPG — это то, куда его стоит отправить.
Часто задаваемые вопросы
Нет, и не может стать. У SVG нет пикселей и разрешения. Это набор инструкций для рисования, которые браузер выполняет заново при любом размере изображения, поэтому оно будет таким же чётким на телефоне, как и на билборде. Очистка файла удаляет только текст, который ничего не рисует — например, комментарии и метаданные. Фигуры, кривые и цвета не трогаются, так что результат отображается идентично на любом размере.
Вся «бумажная работа», добавленная вашим редактором. Illustrator, Figma и Inkscape записывают комментарий генератора, объявление XML, DOCTYPE, блок метаданных в RDF, имена слоёв и часто блок стилей с неиспользуемыми классами. Кроме того, координаты сохраняются с полной точностью, так что значение 180 записывается как 180.00000000. В типичном экспортированном логотипе всё это составляет примерно две трети файла. То, что действительно рисует картинку, — это лишь малая часть.
Да. На выходе получается обычный SVG, который открывается в Illustrator, Figma, Inkscape или любом текстовом редакторе точно так же, как исходный. Единственное отличие — часть служебной информации редактора исчезнет, поэтому имена слоёв могут не сохраниться. Само изображение не меняется и полностью редактируемо.
Есть две распространённые причины. Либо файл уже был оптимизирован — такое бывает с SVG, экспортированными из инструментов, которые сами очищают код, или с файлами, уже прошедшими оптимизацию, либо внутри файла встроена фотография. Второе часто удивляет: если поместить фото на холст в Illustrator и экспортировать как SVG, изображение встраивается как base64-блок внутри XML. Этот блок — это данные изображения, а не разметка, поэтому очистка разметки его не трогает. Если двухмегабайтный SVG почти не уменьшился, откройте его в текстовом редакторе и найдите длинную строку, начинающуюся с data:image.
Может, и это важно знать перед публикацией. Очистка укорачивает id-атрибуты внутри файла. Все внутренние ссылки в SVG переписываются, так что градиенты, маски и обтравочные пути продолжают работать, а изображение отображается как раньше. Внешний код — другое дело: если CSS обращается к элементу по id, JavaScript анимирует конкретный узел или файл входит в спрайт, на который ссылаются другие страницы, проверьте эти моменты после замены файла. Для отдельного логотипа или экспортированной иконки, а это большинство SVG, беспокоиться не о чем.
Да, и оба метода отлично дополняют друг друга. Эта очистка удаляет текст, который вообще не должен быть в файле. Gzip, который применяет ваш веб-сервер при отправке файла, сжимает оставшийся текст. Оба способа вместе дают меньший размер, чем каждый по отдельности. Также стоит проверить, что на сервере включено сжатие для типа image/svg+xml, так как в некоторых настройках по умолчанию оно применяется только к HTML, CSS и JavaScript.