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

Що таке Оптимізатор SVG?

Оптимізатор SVG — це безкоштовний браузерний інструмент для вебдизайнерів, авторів іконок і фронтенд-розробників, яким потрібно полегшити рукописний або експортований SVG перед публікацією. Векторні редактори додають невидиму вагу: XML-коментарі, блоки метаданих, атрибути Inkscape/Sodipodi/Illustrator, зайві десяткові, марні трансформації, обгорткові групи, а також ID та defs, на які ніщо не посилається. Вмикайте кожне очищення в Налаштуваннях, вставте розмітку або перетягніть файл .svg, спостерігайте, як рендери Оригінал і Оптимізовано оновлюються поруч, і читайте статистику До, Після, Заощаджено, Gzip і Brotli. Скопіюйте результат або завантажте як .min.svg. Використовуйте для полегшення вбудованих іконок, спрайтів, логотипів та ілюстрацій.

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

1. Вставте свій SVG або перетягніть/завантажте файл .svg — розмітка заповнить поле введення.
2. Відкрийте Налаштування й увімкніть саме потрібні очищення: округлення координат, видалення коментарів, метаданих і атрибутів редактора, порожніх груп, невикористаних ID і defs, об'єднання трансформацій, мінімізацію вбудованих стилів, скорочення hex-кольорів, видалення типових значень і мінімізацію пробілів.
3. Якщо округлення координат увімкнено, задайте точність (0-5 знаків).
4. Порівняйте рендери Оригінал і Оптимізовано поруч, щоб переконатися, що малюнок досі правильний.
5. Прочитайте статистику До, Після, Заощаджено, Gzip і Brotli, щоб побачити реальну економію розміру.
6. Скопіюйте оптимізований SVG або завантажте його як файл .min.svg.

Приклади

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

Поширені запитання

Що саме видаляє оптимізатор?

За ввімкнених відповідних перемикачів: XML-коментарі, елементи <metadata>, <title> і <desc>, атрибути просторів імен редактора (Inkscape, Sodipodi, Illustrator), порожні групи, ID, на які ніщо не посилається, і <defs> без посилань. Він також може округлювати числові атрибути й дані шляху, об'єднувати марні трансформації, мінімізувати атрибути style і CSS у <style>, скорочувати hex-кольори (#ffffff→#fff) та видаляти типові атрибути представлення, як-от fill-opacity="1".

Чи змінить округлення координат вигляд мого SVG?

Округлення до низької точності може зсунути точки на крихітну частку одиниці — зазвичай непомітно, але файл менший. Підвищте точність (до 5 знаків) для точної геометрії або вимкніть округлення, щоб не чіпати числа.

Чи можу я завантажити файл і переглянути результат?

Так. Перетягніть або завантажте файл .svg (чи вставте розмітку), і рендери Оригінал та Оптимізовано з'являться поруч, щоб ви помітили будь-які поломки. Потім скопіюйте вивід або завантажте оптимізований .min.svg — нічого не завантажується; файл читається локально.

Що означають цифри Gzip і Brotli?

Розмір Gzip вимірюється реальним стисканням оптимізованого SVG у вашому браузері, тож відображає справжні байти на з'єднанні з gzip. Цифра Brotli — це оцінка, виведена з того розміру gzip (brotli зазвичай стискає текст трохи сильніше); справжній кодувальник brotli надто важкий для включення, тож він позначений тильдою.

Чи завантажується мій SVG кудись?

Ні. Розбір, очищення, вимірювання розміру та серіалізація відбуваються локально у вашому браузері за допомогою вбудованого DOMParser. Нічого не надсилається на сервер, тож інструмент працює офлайн, а ваша графіка залишається приватною.