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

Вставте чи перетягніть SVG і зменшіть його за допомогою SVGO. Усе залишається у вашому браузері.

Як працює Оптимізатор SVG

SVG Optimizer запускає SVGO (SVG Optimizer) у Web Worker у браузері для мінімізації та очищення SVG-файлів без їхнього завантаження. SVGO застосовує конфігурований набір плагінів, що видаляють коментарі, згортають пробіли, об'єднують ідентичні шляхи, конвертують фігури до найкомпактнішого представлення та видаляють атрибути без візуального ефекту. Результатом є менший SVG, який відтворюється ідентично оригіналу.

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

Автор: Bastien Sulyan

Оптимізатор SVG: покрокова інструкція

Перетягніть SVG-файл на область завантаження або натисніть, щоб вибрати.
Web Worker SVGO одразу запускає оптимізацію із набором плагінів за замовчуванням.
Перегляньте відсоткове зменшення та оригінальний і оптимізований розміри файлів.
Натисніть «Завантажити», щоб зберегти оптимізований SVG на пристрій.
Якщо певні плагіни спричиняють проблеми з відтворенням, скоригуйте конфігурацію плагінів і повторіть оптимізацію.

Поширені сценарії використання

Front-end розробник оптимізує іконки, експортовані з Figma, перед їхньою фіксацією у виробничий конвеєр ресурсів, зменшуючи кожну іконку з 4 КБ до менш ніж 1 КБ.
Веб-дизайнер очищає 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, який ви збираєтеся вставити, не повинен містити виконуваний код. Деякі плагіни, що очищують атрибути, можуть взаємодіяти з анімаціями, якщо анімація посилається на ці атрибути за ідентифікатором; перевірте відтворений результат після оптимізації файлів зі складними анімаціями.

Чи можна оптимізувати кілька SVG-файлів одночасно?

Поточна версія обробляє один SVG-файл за раз. Скиньте файл, завантажте результат, потім скиньте наступний файл. Пакетна обробка для кількох файлів в одному сеансі в цьому випуску недоступна.

Яку версію SVGO використовує інструмент?

Інструмент поставляється у комплекті зі SVGO у Web Worker. Версія, що постачається, зазначена в інформації про інструмент. SVGO активно підтримується, і API плагінів суттєво змінився між v1, v2 та v3; поточний інструмент використовує формат плагінів v3.

Схожі інструменти

Тримайте все локально, досліджуйте додаткові інструменти.

Усі інструменти для зображень