SVG Optimizer — Оптимізатор SVG
Оптимізуйте SVG-файли за допомогою SVGO прямо в браузері. Порівнюйте прев’ю до і після, перевіряйте заощаджені байти та завантажуйте результат.
🔒 Працює повністю у вашому браузері — нічого не завантажуєтьсяDrop an .svg file here or click to browse — or paste SVG markup below
Навіщо оптимізувати SVG-файли
SVG-файли, експортовані з дизайнерських програм на кшталт Illustrator, Figma, Sketch чи Inkscape, містять набагато більше, ніж видимі фігури. Метадані редактора, XML-коментарі, приховані шари, типові значення атрибутів, невикористані визначення, зайві знаки після коми та надлишкові групи легко можуть займати половину файлу. Цей інструмент запускає SVGO — той самий оптимізатор, який використовують більшість конвеєрів збирання та бібліотек іконок, — щоб прибрати цей баласт. Менші SVG швидше завантажуються, полегшують вбудовані іконки у вашому HTML і допомагають підтримувати порядок у репозиторіях.
Типовий пресет застосовує десятки безпечних перетворень: видаляє XML-декларацію, коментарі, метадані та простори імен редакторів, упорядковує ідентифікатори, скорочує записи кольорів, об’єднує контури, перетворює базові фігури на компактні контури, коли так коротше, і переписує дані контурів із відносними командами та меншою кількістю цифр. Multipass повторює процес, доки не вдасться знайти подальшої економії, що часто дає ще кілька відсотків.
Як вибрати параметри
Precision (точність) визначає, скільки знаків після коми зберігається в числах; для іконок достатньо 2–3, а детальним ілюстраціям чи мапам може знадобитися більше. Remove <title> заощаджує байти, але прибирає доступну назву, тож залишайте її для змістовної графіки. Remove viewBox зазвичай варто тримати вимкненим, адже саме viewBox дає SVG змогу адаптивно масштабуватися. Remove width/height корисний, коли розмір задається через CSS. Remove scripts & event handlers видаляє елементи <script>, атрибути on* і посилання javascript: — корисна звичка для SVG з невідомих джерел. Pretty print додає відступи для зручності читання ціною кількох байтів.
Приватні, локальні та безпечні прев’ю
Уся обробка відбувається у вашому браузері; файли нікуди не завантажуються. Обидва прев’ю показуються через елемент зображення, що завантажує локальну blob-URL-адресу, а браузери ніколи не виконують скрипти в SVG, показаних у такий спосіб. Завжди порівнюйте обидва прев’ю перед використанням результату: надто агресивна точність або видалення viewBox можуть змінити вигляд графіки. Позначки розміру показують заощаджені байти, щоб ви могли знайти баланс між розміром файлу та візуальною точністю.
Як користуватися
- Додайте SVGПеретягніть файл .svg або вставте SVG-розмітку в поле введення.
- Виберіть параметриНалаштуйте multipass, точність і необов’язкове видалення, наприклад title, viewBox або ширини й висоти.
- Оптимізуйте й порівняйтеНатисніть Optimize SVG і порівняйте прев’ю та розміри оригіналу й оптимізованої версії.
- ЗавантажтеСкопіюйте розмітку або завантажте оптимізований файл .svg.