Как оптимизировать SVG онлайн
Оптимизация SVG
Редакторы вроде Inkscape и Illustrator оставляют в SVG служебные данные: комментарии, блок metadata, свои атрибуты и лишние пробелы. На вид они не влияют, но раздувают файл. Оптимизатор вырезает этот балласт по вашим галочкам.
После чистки файл становится меньше и быстрее загружается, а рядом видно, сколько именно байт удалось срезать.
Что удаляется
В зависимости от настроек могут быть удалены:
- комментарии
- лишние пробелы между тегами
- блок metadata
- пустые группы
- XML-декларацию
- атрибуты редакторов (Inkscape, Illustrator)
Когда это полезно
Оптимизация рекомендуется:
- перед публикацией сайта
- для ускорения загрузки страниц
- перед добавлением SVG в приложение
- при работе с библиотеками иконок
Как оптимизировать SVG
-
Вставьте или загрузите SVG
Впишите код в поле или перетащите .svg-файл в зону "Вставьте или загрузите SVG".
-
Отметьте, что вырезать
Галочками включите удаление комментариев, metadata, атрибутов редактора, XML-декларации, пустых групп и сжатие пробелов.
-
Смотрите экономию
Оптимизированный код появляется в нижнем поле сразу, а строка статистики показывает, сколько байт удалось срезать.
Вопросы и ответы
Комментарии, блок metadata, атрибуты редакторов (Inkscape, Illustrator), по желанию XML-декларация, пустые группы и лишние пробелы между тегами.
Зависит от исходника: экспорт из редакторов часто худеет на 20-60% за счет служебных данных. Точную экономию видно в строке "Было - стало".
Базовые галочки безопасны. Если внутри хитрые фильтры, маски или градиенты, откройте результат в просмотре SVG и сверьте вид перед использованием.
Легкий файл быстрее грузится и удобнее для inline-вставки в верстку и наборы иконок, где вес каждого элемента на счету.