SVG Optimizer — настоящий svgo прямо в браузере
Уменьшайте SVG-файлы всеми 45 плагинами svgo, включайте и выключайте каждый вручную и смотрите размер после gzip — тот, что реально передаётся. Работает в фоновом воркере на вашем компьютере: без загрузки на сервер, без очереди, без регистрации.
Как это работает
Три шага, и средний — за вами.
- 1
Перетащите файл
Перетащите .svg или .svgz, вставьте код или передайте файл из другого инструмента. Пока ничего не выполняется — файл просто ждёт.
- 2
Решите, что делать
Выберите профиль или откройте настройки и задайте все 45 плагинов сами. Каждый отмечен: может ли он изменить видимый результат.
- 3
Забирайте
Скачайте, скопируйте как SVG, как компонент React или как CSS data URI — либо отправьте сразу в следующий инструмент, минуя папку загрузок.
Что он умеет
Настоящий svgo, все 45 плагинов
Тот самый движок, на котором строит вся индустрия, — но в браузере, а не в терминале. Профиль «Сбалансированный» точно совпадает с `npx svgo`, поэтому здесь вы видите ровно то, что даст ваша сборка.
Открывает файлы, которые другие отвергают
Редакторы постоянно экспортируют невалидный XML: необъявленный префикс inkscape:, одиночный амперсанд, метку BOM. Строгие парсеры отвергают весь документ. Этот инструмент чинит дефект, оптимизирует файл и точно сообщает, что пришлось исправить.
Точность, которую видно
Приблизьте до 4000 %, подвигайте холст и удерживайте Alt, чтобы вернуться к оригиналу при том же увеличении. Ущерб от округления виден как дрожание задолго до того, как проявится в процентах.
Размер, который реально передаётся
Сырые байты и байты после gzip — рядом. Это разные истории: удаление пробелов выглядит впечатляюще в сыром виде и почти ничего не меняет после сжатия, потому что gzip уже справлялся с ними.
Ничего не покидает ваш компьютер
Оптимизатор работает в фоновом воркере внутри вашего браузера; ни один файл никуда не загружается. Предпросмотр идёт дальше и удаляет скрипты, обработчики событий и внешние ссылки, так что вредоносный SVG не сможет выполнить код или «позвонить домой», пока вы на него смотрите.
Сразу в следующий инструмент
Отправьте оптимизированный файл в генератор favicon, конвертер форматов, конструктор QR или упаковщик — без скачивания и повторной загрузки.
Часто задаваемые вопросы
Загружается ли мой SVG куда-нибудь?
Нет. svgo работает в потоке-воркере внутри вашего браузера, и файл никогда не покидает компьютер. Предпросмотр идёт дальше: скрипты, обработчики событий и ссылки на внешние файлы удаляются до того, как что-либо нарисуется, поэтому открыть присланный файл здесь безопасно.
Почему другие инструменты отвергают мой файл, а здесь он работает?
Потому что редакторы постоянно экспортируют невалидный XML. Обычный виновник — префикс пространства имён, который используется, но не объявлен: <g inkscape:groupmode="layer"> без соответствующего xmlns:inkscape. Строгие парсеры, включая svgo и ваш браузер, отвергают весь документ. Этот инструмент чинит такое (а также метки BOM, одиночные амперсанды и подмножества DOCTYPE) перед оптимизацией и точно сообщает, что исправил.
Насколько низко можно опустить точность?
Зависит от рисунка, и лучше посмотреть, чем гадать. Меньшая точность округляет координаты, и на крупной или мелко детализированной графике это округление становится заметно как дрожание кривых задолго до того, как файл ощутимо уменьшится. Приблизьте и удерживайте Alt, чтобы переключаться между результатом и оригиналом при том же увеличении.
Почему проценты для сырого размера и для gzip так сильно расходятся?
Потому что это разные величины. Удаление пробелов и сокращение имён атрибутов выглядит впечатляюще в сырых байтах, но gzip и так схлопывал эти повторы, поэтому сжатый размер почти не меняется. Изменения геометрии — прежде всего convertPathData — уменьшают оба. Если ваш сервер отдаёт сжатые ответы, а так делают почти все, значение имеет именно цифра gzip.
Совпадёт ли результат с svgo в моей сборке?
На профиле «Сбалансированный» — да: это собственный preset-default из svgo, с тем же порядком плагинов и теми же значениями по умолчанию. Стоит изменить любой переключатель — и вы уже отошли от него, о чём говорит пометка «Вручную».
Что значит «меняет поведение» у некоторых плагинов?
Что плагин не просто уменьшает файл, а меняет то, что файл делает. removeViewBox лишает SVG масштабируемости. removeDimensions заставляет его заполнять контейнер вместо собственного размера. removeTitle стирает доступное имя, которое озвучивают программы чтения с экрана. Все они выключены по умолчанию, и кнопка «Включить все» ни один из них не включает.