Как работает сжатие SVG
SVG, сохранённый из Illustrator, Inkscape, Figma или Sketch, обычно содержит много того, что браузер никогда не использует: метаданные редактора, комментарии, скрытые слои, значения по умолчанию, записанные полностью, и координаты с восемью и более знаками после запятой. Этот инструмент удаляет всё это с помощью SVGO, оптимизатора SVG с открытым исходным кодом, на который опираются большинство инструментов сборки и приложений для дизайна, поэтому рисунок выглядит так же, а файл становится меньше.
SVGO проходит по файлу в несколько проходов. Он объединяет и сокращает пути, округляет числа до выбранной точности, сворачивает ненужные группы, удаляет пустые элементы и переписывает цвета в самой короткой форме. viewBox сохраняется, поэтому SVG по-прежнему масштабируется до любого размера, а ID, на которые ссылаются другие части файла, сокращаются с обновлением ссылок, поэтому градиенты и маски продолжают работать.
Точность это единственная настройка, которая имеет значение. «Высокая» сохраняет три знака после запятой, что незаметно при любом обычном размере и является безопасным выбором для иконок и логотипов. «Баланс» сохраняет два, а «Минимальный» один, что подходит для больших иллюстраций, где десятая доля единицы намного меньше пикселя, но может исказить очень маленькие иконки. Если результат выглядит не так, сожмите оригинал снова с более высокой точностью.
Оптимизатор, около 200 KB, загружается при первом нажатии кнопки. Ваши SVG читаются и переписываются в этой вкладке и никогда не загружаются на сервер, что важно для ещё не выпущенных логотипов и работ для клиентов.
Параметры сжатия SVG
| Высокое | Три знака после запятой. Безопасно для иконок, логотипов и всего маленького. |
|---|---|
| Баланс | Два знака после запятой. Хорошо для большинства иллюстраций. |
| Минимальный файл | Один знак после запятой. Для больших работ; потом проверьте маленькие иконки. |
| Сохраняется | viewBox, ID, на которые есть ссылки, градиенты, маски и внешний вид рисунка. |
| Удаляется | Метаданные редактора, комментарии, скрытые и пустые элементы, избыточная точность. |
Когда использовать
Сжимайте SVG перед размещением иконок и логотипов на сайте, где каждый килобайт увеличивает загрузку страницы, перед встраиванием SVG в HTML или компонент React, перед добавлением ресурсов дизайна в репозиторий кода или когда форма загрузки ограничивает размер файла.
Сохраните исходный редактируемый SVG для вашего приложения для дизайна. Оптимизация удаляет данные редактора, например названия слоёв и направляющие, поэтому, когда нужно отредактировать работу, открывайте оригинал.
Об оптимизаторе SVG
SVGO, сокращение от SVG Optimizer, это инструмент с открытым исходным кодом, который стоит за оптимизацией SVG в большинстве инструментов веб-сборки и в приложениях для дизайна, предлагающих оптимизированный экспорт. Он разбирает SVG в дерево, прогоняет по нему набор хорошо проверенных шагов очистки и записывает обратно, повторяя, пока экономить больше нечего. Каждый шаг, который он делает здесь, сохраняет внешний вид рисунка, поэтому его настройкам по умолчанию доверяют в продакшене. Версия на этой странице работает полностью в браузере и загружается с CDN jsDelivr при первом использовании инструмента.
Решение проблем со сжатием SVG
«уже оптимизирован; возвращён без изменений»
SVG уже был оптимизирован, поэтому ничего нельзя удалить, не изменив его. Вам снова предлагается исходный файл.
Часть рисунка сдвинулась или изогнулась
Очень маленькие иконки могут сдвигаться при низкой точности. Сожмите оригинал снова с «Высокой» точностью.
«не является файлом SVG»
Файл не содержит рисунка SVG. Файлы, экспортированные как SVG, которые лишь оборачивают растровое изображение, тоже не получится сильно уменьшить; вместо этого сожмите изображение внутри них.
Как пользоваться сжатием SVG, пошагово
- Нажмите «Выбрать файлы SVG» или перетащите файлы в поле.
- При необходимости задайте параметры; настройки по умолчанию подходят для большинства задач.
- Нажмите «Сжать SVG». Вся работа происходит на вашем устройстве.
- Сохраните результат кнопкой скачивания.
Безопасно ли делать это онлайн?
У большинства онлайн-инструментов «онлайн» означает, что ваш файл загружается на сервер компании, обрабатывается там и хранится какое-то время, прежде чем его удалят. Здесь это не так. Страница загружает код инструмента в ваш браузер, а ваш файл читается и обрабатывается внутри вкладки на вашем собственном устройстве. Он никогда не отправляется ни TapToConvert, ни кому-либо ещё.
Вы можете проверить это сами: когда страница и её движок загрузятся, отключите Wi-Fi, и инструмент продолжит работать. Это также означает, что нет ни очереди, ни дневного лимита, ни ограничения размера файла со стороны сервера; единственное ограничение это память, которую браузер выделяет одной вкладке.
Частые вопросы о сжатии SVG
Изменит ли сжатие внешний вид моего SVG?
При «Высокой» точности видимых изменений нет. Более низкая точность сильнее округляет координаты, что может исказить очень мелкие детали.
Насколько меньше он станет?
SVG, экспортированные из приложений для дизайна, часто уменьшаются на 30-70 процентов. SVG, которые уже были оптимизированы, уменьшаются мало или совсем не уменьшаются.
Можно ли редактировать сжатый SVG?
Да, но названия слоёв, направляющие и настройки редактора пропадут. Сохраните оригинал для редактирования.
Мои файлы загружаются?
Нет. SVGO работает в вашем браузере, поэтому SVG никогда не покидает ваше устройство.
Это бесплатно?
Да. Без регистрации, без водяных знаков и без ограничений на использование. TapToConvert существует за счёт рекламы.
Мои файлы загружаются?
Нет. Всё происходит во вкладке вашего браузера, на вашем собственном устройстве.