Дотримуйтесь цього робочого прикладу, а потім адаптуйте ті самі елементи керування до власного зображення. Відкрити Компресор SVG.
Завантажте статичний SVG або вставте розмітку
Відкрийте компресор SVG і виберіть файл SVG або спробуйте приклад. Приклад — це svg-compressor.svg, іконка орбіти розміром 985 байт із viewBox 512 × 512, градієнтною заливкою, заголовком та описом. Використовуйте «Вставити SVG», якщо розмітка вже є в редакторі або буфері обміну.
Інструмент приймає до 20 файлів розміром до 2 МБ кожен. Він аналізує повний документ SVG і видаляє стандартні декларації документа SVG без завантаження зовнішніх файлів. Пошкоджений XML, оголошення користувацьких сутностей та внутрішні підмножини документа відхиляються. Дуже складні файли також можуть досягти ліміту елементів або часу обробки.
Цей робочий процес створює статичну векторну графіку. Скрипти, обробники подій, зовнішні ресурси, анімація та вбудовані растрові зображення видаляються. Попередній перегляд оригіналу вже очищений, тому його не слід сприймати як необмежене відображення всіх функцій вихідного файлу.
Зберігайте копію оригіналу SVG. Інтерактивна ілюстрація або SVG, що містить фотографію, — це інший випадок використання, ніж статична векторна іконка.
Порівняйте результат і встановіть десяткову точність
Дві панелі попереднього перегляду показують очищений оригінал та оптимізований результат. Розміри поруч із «Оригінал» та «Оптимізовано», а також зведення байтів порівнюють вихідний файл із готовим результатом. Він повідомляє про збільшення, якщо оптимізація робить конкретний файл більшим, замість того, щоб обіцяти зменшення кожного разу.
Відкрийте «Налаштування» і встановіть «Десяткову точність» на 2 для прикладу. Точність варіюється від 1 до 5 і починається з 3. Менші значення можуть спростити числову геометрію, але можуть змістити тонкі криві, невеликі проміжки або вирівняні краї. Збільште її, якщо попередній перегляд втрачає важливі деталі.
Цей зразок використовує просту геометрію, тому точність 2 зберігає його впізнавану форму. Інші SVG зі складними десятковими координатами можуть змінитися більше. Перегляд оптимізованої розмітки SVG показує фактичний текст, який буде завантажено; це не окреме представлення оригіналу.
Перевірте вектор у його передбачуваному розмірі відображення та у збільшеному вигляді. Тонке зміщення може бути важко помітити на маленькій мініатюрі.
Приклад у цьому посібнику
Спробуйте зразок: svg-compressor.svg, 985 байтів, 512 × 512 viewBox. Десяткова точність 2; увімкнено збереження доступних заголовків/описів та скорочення внутрішніх ідентифікаторів; вимкнено адаптивні розміри та читабельну вихідну розмітку. Завантажено SVG: 635 байтів.
- Джерело SVG
- 985 байтів
- Оптимізовано SVG
- 635 байтів
- Виміряне зменшення
- 35.5%
- Збережений контекст
- Заголовок, опис та 512 × 512 viewBox
Зберігайте описи та враховуйте зовнішні ідентифікатори
Залиште увімкненим «Зберігати доступні заголовки та описи» для цього прикладу. Це зберігає заголовок та опис SVG, видаляючи при цьому надлишкові метадані редактора та спрощуючи відповідну розмітку. Це різні типи інформації, і їх не слід вважати взаємозамінними.
«Скоротити внутрішні ідентифікатори» увімкнено за замовчуванням. Оптимізатор оновлює посилання всередині SVG, але зовнішні CSS або JavaScript можуть все ще покладатися на оригінальні ідентифікатори. Вимкніть цю опцію, якщо файл є частиною більшого додатка, який іменує свої елементи, і протестуйте готовий SVG у цьому контексті.
Залиште «Адаптивні розміри» та «Розбірлива вихідна розмітка» вимкненими для цього прикладу. «Адаптивні розміри» видаляють фіксовану ширину та висоту, коли координати viewBox можуть забезпечити масштабований розмір. «Розбірлива розмітка» додає відступи і корисна для обслуговування, але може збільшити розмір тексту.
Для окремого файлу іконки очищення внутрішніх ідентифікаторів зазвичай є простим. Для діаграми, що керується зовнішніми скриптами, збереження ідентифікаторів може бути важливішим, ніж кілька збережених байтів.
Завантажте та перевірте готовий вектор
Виберіть «Почати», а потім «Завантажити». Отриманий результат має 635 байт порівняно з 985 байтами вихідного файлу: зменшення на 35.5%. Його заголовок та опис залишаються, а відображене порівняння відтворюється зі справжнього джерела та завантаженого SVG.
Стаття відображає обидва вектори з розміром 1,024 пікселів для чіткої ілюстрації результату; їхній логічний розмір координат залишається 512 × 512. Більший попередній перегляд не додає растровий вміст до збереженого SVG. Перевірте фактичний вектор на цільовій сторінці перед заміною існуючого робочого ресурсу.
Один файл завантажується як SVG з оригінальною базовою назвою. Пакет завантажується як один ZIP-архів із нумерованими суфіксами для однакових імен файлів. Обробка відбувається у браузері. Збережіть оригінальне джерело, якщо хочете спробувати інші налаштування оптимізації пізніше.
Економія розміру файлу вимірюється лише для цього зразка. Вже оптимізований SVG може показати незначне покращення або стати трохи більшим.
Поширені запитання
Чи буде оптимізований SVG виглядати точно так само?
Оптимізатор прагне зберегти статичний вигляд, але округлення та видалення непідтримуваного вмісту можуть змінити файл. Порівняйте попередні перегляди та протестуйте збережений SVG у своєму проекті.
На що впливає десяткова точність?
Вона керує точністю, що використовується для числових даних геометрії та шляхів. Менші значення можуть зменшити розмір, але можуть змінити дрібні деталі. Значення за замовчуванням — 3.
Чи зберігаються заголовок і опис?
Так, за замовчуванням. Залиште ввімкненим параметр «Зберігати доступні заголовки та описи», щоб зберегти ці елементи SVG.
Чому зникають скрипти або растрові зображення?
Цей інструмент створює статичний векторний вихідний файл. Скрипти, події, зовнішні ресурси, анімація та вбудовані растрові зображення навмисно видаляються під час очищення.
Чи можна зберегти ідентифікатори, на які посилається CSS?
Вимкніть «Скорочувати внутрішні ідентифікатори», якщо зовнішній код залежить від конкретних ідентифікаторів. Перевірте оптимізований файл на цільовій сторінці перед заміною оригіналу.
Чи завантажуються файли SVG для оптимізації?
Ні. Інструмент виконує аналіз та оптимізацію в браузері та завантажує результат локально.
Чи можна завантажити SVG з DOCTYPE?
Стандартна декларація документа SVG приймається та видаляється без отримання її зовнішнього ідентифікатора. Спеціальні декларації сутностей та внутрішні підмножини документа відхиляються.
Зробіть вектор легшим, отримавши результат, який можна перевірити.
Спробуйте зразок або використайте власний файл і перегляньте результат перед поширенням.
