Оптимизатор на SVG

Поставете или пуснете SVG и го намалете с SVGO. Всичко остава в браузъра ви.

Как работи Оптимизатор на SVG

SVG оптимизаторът изпълнява SVGO (SVG Optimizer) в Web Worker в браузъра, за да минимизира и изчисти SVG файловете, без да ги качва. SVGO прилага конфигурируем набор от плъгини, премахващи коментари, свиващи бялото пространство, обединяващи идентични пътища, конвертиращи фигури в най-компактното им представяне и изтриващи атрибути без визуален ефект. Резултатът е по-малък SVG, изобразяващ се идентично с оригинала.

SVG файлове, произведени от дизайнерски инструменти като Figma, Illustrator или Inkscape, често съдържат значителни допълнителни данни: специфични за редактора метаданни, празни групи, излишни атрибути за трансформация и декларации на пространства от имена, от които нито един браузър не се нуждае. Наборът от плъгини по подразбиране на SVGO отстранява това допълнително съдържание надеждно. Оптимизираният файл се предлага за изтегляне и се показва процентното намаляване на размера, за да потвърдите, че оптимизацията е струвала усилията.

Написано от Bastien Sulyan

Как да използвате Оптимизатор на SVG, стъпка по стъпка

Пуснете SVG файла върху зоната за качване или щракнете, за да го намерите.
Web Worker с SVGO изпълнява оптимизацията незабавно с набора от плъгини по подразбиране.
Вижте процентното намаление и оригиналния и оптимизирания размер на файла.
Щракнете върху бутона за изтегляне, за да запазите оптимизирания SVG на устройството си.
Ако специфични плъгини причиняват проблеми с изобразяването, коригирайте конфигурацията на плъгините и оптимизирайте отново.

Често срещани приложения

Front-end разработчик оптимизира икони, експортирани от Figma, преди да ги включи в продукционен пайплайн за ресурси, намалявайки всяка икона от 4 KB до под 1 KB.
Уеб дизайнер изчиства SVG илюстрации, експортирани от Illustrator, съдържащи слоеве от редакторски метаданни, невидими в браузъра, но раздуващи файла.
Разработчик, изграждащ шрифт с икони от SVG глифове, гарантира, че всеки изходен SVG е чист и последователно структуриран преди стъпката за изграждане на шрифта.
Инженер по производителност проверява вградения SVG в HTML и замества всеки раздут оригинал с версия, оптимизирана от SVGO, за подобряване на теглото на страницата.

Често задавани въпроси

Ще промени ли SVGO изгледа на SVG файла?

Плъгините по подразбиране на SVGO са избрани да бъдат визуално без загуби: оптимизираният SVG се изобразява идентично с оригинала в всички стандартни браузъри. Някои агресивни плъгини (като тези, закръгляващи координатите на пътищата много сериозно) могат да въведат фини разлики в изобразяването. Ако забележите визуална промяна, сравнете оригиналния и оптимизирания файл в браузъра и деактивирайте конкретния плъгин, причиняващ проблема.

Изпраща ли се SVG файлът на сървър за оптимизиране?

Не. SVGO се изпълнява в Web Worker в раздела на браузъра. SVG текстът се чете от локалния диск, обработва се в JavaScript паметта и изходът се връща на страницата за изтегляне. Съдържанието на файла не напуска устройството.

С колко ще стане по-малък SVG файлът?

Намалението зависи от изходния файл. SVG файлове, експортирани от дизайнерски инструменти с редакторски метаданни, обикновено се свиват с 30 до 70 процента. Ръчно написани SVG файлове, които вече са компактни, може да имат само 5 до 15 процента намаление. Инструментът показва точния брой байтове и процентите, за да можете да оценявате всеки файл поотделно.

Засяга ли оптимизацията SVG анимации или JavaScript вътре в файла?

Конфигурацията запазва анимационни елементи и SMIL атрибути. Тя изтрива елементите script: инструментът добавя плъгина removeScripts върху стандартния набор от плъгини на SVGO по подразбиране, защото SVG, който предстои да вградите, не бива да носи изпълним код. Някои плъгини, изчистващи атрибути, могат да взаимодействат с анимации, ако анимацията препраща тези атрибути по ID; проверете изобразения изход след оптимизиране на файлове, използващи сложни анимации.

Мога ли да оптимизирам множество SVG файла наведнъж?

Текущата версия обработва един SVG файл наведнъж. Пуснете файл, изтеглете резултата, след което пуснете следващия файл. Пакетната обработка на множество файлове в една сесия не е налична в тази версия.

Коя версия на SVGO използва инструментът?

Инструментът е пакетиран с SVGO, работещ в Web Worker. Пакетираната версия е отбелязана в информацията за инструмента. SVGO се поддържа активно и API за плъгини се е променил значително между v1, v2 и v3; текущият инструмент използва формата на плъгини за v3.

Свързани инструменти

Пазете всичко локално, разгледайте допълнителни инструменти.

Всички инструменти за изображения