Хвилинку...(/)
Ми оптимізуємо ваші зображення. Будь ласка, зачекайте, поки ми забезпечимо найкращу якість результатів.
Чудово, ми успішно стиснули ваші зображення.
Зображення оптимізовано.
Стискати SVG-зображення онлайн
Видаляйте метадані, зберігайте вектор: ваш SVG виглядає так само
Оптимізація...
Стиснення SVG-файлів шляхом видалення зайвого від редактора
Відкрийте SVG у Блокноті — і ви побачите все: теги, числа, текст. У цьому й полягає суть формату. Жодних пікселів, жодних фотографій — лише інструкції для малювання фігур. Це важливо, бо змінює саме поняття стиснення у цьому випадку. Нічого не стискається і не спрощується. Просто видаляється зайвий текст, а малюнок залишається недоторканим.
Звідки насправді береться розмір
Майже нічого з цього — не сам малюнок. Експортуйте логотип з Illustrator, Figma чи Inkscape, і файл міститиме службову інформацію від редактора: коментар генератора, DOCTYPE, який нікому не потрібен з 2008 року, XML-декларацію, блок метаданих у форматі RDF, імена шарів та блок стилів із класами, які не використовуються жодним елементом. На реальному логотипі, який ми тестували, усе це займало близько двох третин файлу. Самі фігури — це лише мала частина.
Далі йдуть числа. Редактори записують координати з повною плаваючою точністю, тому прямокутник, який розташований на 10 і має ширину 180, зберігається як 10.000000 і 180.00000000. Помножте це на кожну точку у кожному шляху — і лише десяткові знаки можуть перевищити розмір самого малюнка.
Це залишається вектором, тому якість не втрачається
Це те, про що люди хвилюються даремно. SVG не має роздільної здатності. Він малюється заново при будь-якому розмірі, чи це фавіконка на 16 пікселів, чи білборд. Видалення блоку метаданих нічого не змінює. Файл, який ви отримуєте назад, масштабується так само, як і той, що ви завантажили, виглядає ідентично на будь-якому розмірі та залишається повністю редагованим у програмі, в якій ви його створили.
Що видаляється
Очищення зроблено максимально обережно. Воно зачіпає лише те, що не впливає на відображення.
| Видаляється | Залишається |
|---|---|
| Коментарі редактора та рядки генератора | Кожна фігура, шлях і крива |
| Блок метаданих і його RDF-простори імен | Кольори, градієнти та прозорість |
| DOCTYPE і XML-декларація | Текстові елементи та шрифти |
| Визначення, на які нічого не посилається | Фільтри, маски та використовувані шляхові обрізки |
| Порожні групи та шари | Трансформації та viewBox |
| Зайві десяткові знаки у координатах | Усе, що впливає на вигляд |
Чому менші SVG важливіші за менші фотографії
SVG зазвичай — це логотип чи іконка, тобто він знаходиться у шапці кожної сторінки сайту і завантажується першим. Фотографії завантажуються пізніше й ліниво. Іконки — ні. Зменшення кількох кілобайт у логотипі шапки дає більший ефект для швидкості сторінки, ніж таке ж скорочення у зображенні десь посеред статті, бо саме на шапку браузер чекає, перш ніж може почати відображення.
Що варто перевірити перед публікацією
Очищення скорочує внутрішні id-атрибути у файлі. Посилання всередині того ж SVG оновлюються, тому градієнти, маски та шляхові обрізки продовжують працювати, і малюнок виглядає так само. Але про зовнішній код нічого не відомо. Якщо ваш SVG використовується у спрайті іконок, на який посилаються інші сторінки, або якщо стилі чи скрипти звертаються до елементів за id, ці моменти варто перевірити після заміни файлу. Для звичайного логотипу чи експортованої іконки, як у більшості SVG, перевіряти нічого не потрібно.
Якщо у вашому SVG є фотографія
Іноді SVG — це не зовсім вектор. Якщо ви розмістите фотографію на робочому полі в Illustrator, експортуєте як SVG — зображення буде вбудовано як довгий рядок base64 усередині XML. Файл може важити два мегабайти з однією фігурою всередині. Очищення розмітки не зачіпає цей блок, бо це не розмітка. Якщо ваш файл майже не зменшився і спочатку містив фотографію — ось причина, і рішення: витягніть зображення та стисніть його окремо як JPEG або PNG.
Нічого налаштовувати
Жодних опцій, рівнів стиснення чи вкладок з додатковими налаштуваннями. Завантажте файл — отримайте очищений. Кілька файлів працюють так само: можна забирати їх по одному по мірі готовності або завантажити весь набір у ZIP.
Що відбувається з вашими файлами
Файли передаються через зашифроване з'єднання, очищуються і видаляються із сервера через годину. Нічого не зберігається і не використовується для інших цілей.
Що ви отримуєте
- Видалені метадані редактора, коментарі генератора, DOCTYPE і невикористані визначення
- Координати округлені до розумної точності замість дев'яти десяткових знаків
- Файл, який все ще масштабується без обмежень і відкривається у вашому редакторі
- Ідентичне відображення на будь-якому розмірі, перевірене з оригіналом
- Пакетне завантаження, з можливістю скачати по одному або всі разом у ZIP
- Без акаунта, без встановлення, і файли видаляються із сервера через годину
Що далі?
Працюєте з логотипом, який також є растровим? Стиснути PNG обробить прозору версію, а Стиснути WebP — сучасний формат. Якщо ж у SVG виявилася вбудована фотографія, Стиснути JPG — саме те, що потрібно для цього зображення.
Часті запитання
Ні, і це неможливо. SVG не містить пікселів і не має роздільної здатності. Це набір інструкцій для малювання, які браузер виконує заново при будь-якому розмірі зображення, тому воно буде так само чітким і на телефоні, і на білборді. Очищення файлу видаляє лише текст, який нічого не малює — наприклад, коментарі та метадані. Фігури, криві та кольори залишаються без змін, тому результат виглядає ідентично на будь-якому розмірі.
Уся службова інформація, яку додав ваш редактор. Illustrator, Figma та Inkscape додають коментар генератора, XML-декларацію, DOCTYPE, блок метаданих у RDF, імена шарів, а часто й блок стилів із класами, які ніхто не використовує. Крім того, координати записуються з максимальною точністю, тому значення 180 зберігається як 180.00000000. У типовому експортованому логотипі все це складає приблизно дві третини файлу. Те, що малює зображення, — це лише невелика частина.
Так. Результат — це звичайний SVG, який відкривається у Illustrator, Figma, Inkscape або будь-якому текстовому редакторі так само, як і оригінал. Єдина різниця — частина службової інформації редактора буде видалена, тому імена шарів можуть не зберегтися. Сам малюнок залишається незмінним і повністю редагованим.
Є дві поширені причини. Або файл вже був оптимізований — це трапляється зі SVG, експортованими з інструментів, які очищають їх одразу, або з файлами, що вже проходили оптимізацію, — або у файлі є вбудована фотографія. Останнє часто дивує: якщо розмістити фото на робочому полі в Illustrator і експортувати як SVG, зображення буде вбудовано у вигляді блоку base64 всередині XML. Цей блок — це дані зображення, а не розмітка, тому очищення розмітки його не зачіпає. Якщо SVG на два мегабайти майже не змінився, відкрийте його у текстовому редакторі та знайдіть дуже довгий рядок, що починається з data:image.
Може, і це варто знати перед публікацією. Очищення скорочує id-атрибути у файлі. Посилання всередині того ж SVG переписуються відповідно, тому градієнти, маски та шляхові обрізки продовжують працювати, і зображення виглядає так само. Але зовнішній код — це інша справа: якщо стилі звертаються до елемента за id, якщо JavaScript анімує певний вузол, або якщо файл є частиною спрайту, на який посилаються інші сторінки, перевірте ці моменти після заміни файлу. Для окремого логотипу чи експортованої іконки, а це більшість SVG, хвилюватися не потрібно.
Так, і обидва способи чудово поєднуються. Це очищення видаляє текст, який взагалі не повинен бути у файлі. Gzip, який застосовує ваш вебсервер під час передачі, стискає все, що залишилося. Використовувати обидва підходи — це звичайна практика, і разом вони дають менший розмір, ніж кожен окремо. Також варто перевірити, що на сервері увімкнене стиснення саме для типу image/svg+xml, оскільки деякі стандартні налаштування охоплюють лише HTML, CSS і JavaScript.