Описание
Как пользоваться инструментом
- Вставьте SVG-код в поле ввода или нажмите «Пример».
- Выберите опции — что удалять: title/desc, data-атрибуты, XML-декларацию, сокращать ли числа.
- Нажмите «Оптимизировать».
- Посмотрите экономию — сколько весил файл до и после.
- Скопируйте или скачайте очищенный SVG.
Почему SVG нужно оптимизировать
Когда вы экспортируете SVG из графического редактора — Inkscape, Illustrator, Figma или CorelDRAW, — в файл попадает много служебной информации: комментарии, метаданные, идентификаторы редактора, лишние пробелы и переносы строк, избыточно точные числа. Всё это не влияет на то, как выглядит картинка, но увеличивает размер файла. Иконка, которая могла бы весить пару сотен байт, раздувается в несколько раз. Оптимизатор убирает этот балласт, и файл становится меньше на 30–60% без какого-либо изменения изображения.
Оптимизация удаляет только невидимые служебные данные. Как выглядела картинка, так и останется — меняется лишь размер файла.
Что удаляется при оптимизации
- Комментарии и метаданные — служебные пометки редактора, не нужные для отображения.
- Атрибуты редакторов — специальные данные Inkscape и Sodipodi, которые нужны только их программе.
- Лишние пробелы и переносы — форматирование, увеличивающее размер.
- Избыточная точность чисел — координаты вроде 10.000000 сокращаются до 10.
- Опционально — теги title и desc, data-атрибуты и XML-декларация.
Зачем уменьшать размер SVG
SVG активно используют для иконок, логотипов и иллюстраций на сайтах, потому что они масштабируются без потери чёткости. Но на странице таких элементов бывают десятки, а иногда SVG встраивают прямо в HTML-код. Каждый лишний байт умножается на количество иконок и на число посетителей, замедляя загрузку. Чистые, компактные SVG ускоряют сайт, экономят трафик и улучшают показатели скорости, которые важны и для пользователей, и для поисковых систем.
Осторожно с тегами title и desc
Опция удаления тегов title и desc уменьшает файл, но эти теги отвечают за доступность: программы для незрячих пользователей зачитывают их содержимое. Для декоративных иконок интерфейса, у которых уже есть текстовая подпись рядом, их удаление безопасно. А вот для самостоятельных изображений, несущих смысл, эти теги лучше оставить. Инструмент даёт выбор, чтобы вы могли решить сами в зависимости от того, где используется картинка.
Как получить ещё меньший размер
Оптимизация кода — первый шаг. Дополнительно размер SVG на сервере можно уменьшить сжатием gzip или brotli, которое настраивается на хостинге и работает для всех текстовых файлов. Для сложных иллюстраций иногда выгоднее упростить сам рисунок в редакторе: уменьшить число узлов кривых, объединить одинаковые фигуры, убрать невидимые элементы. А совсем простые иконки можно встроить в CSS или HTML напрямую, избавившись от отдельного запроса к серверу.
Чем этот инструмент отличается от других
Здесь вы оптимизируете векторный SVG-код. Для растровых изображений используйте конвертер изображений или изменение размера и обрезку. Встроить картинку в код поможет конвертер изображений в Base64.
Частые вопросы
- Данные уходят на сервер? Нет, весь код обрабатывается в браузере — SVG никуда не отправляется.
- Изменится ли внешний вид картинки? Нет. Удаляются только служебные данные, не влияющие на отображение.
- Насколько уменьшится файл? Обычно на 30–60%, в зависимости от того, сколько лишнего добавил редактор. Чем «грязнее» исходник, тем больше экономия.
- Можно ли оптимизировать SVG из Figma или Illustrator? Да, инструмент работает с кодом из любого редактора — просто вставьте его.
- Безопасно ли удалять title и desc? Для декоративных иконок — да. Для смысловых изображений эти теги лучше оставить ради доступности.