SVG - формат векторного зображення на основі XML. Він має великі переваги, особливо це легкий. Оскільки SVG є текстовим форматом, його можна переглядати і змінювати за допомогою простого текстового редактора, а застосування GZIP-стиснення дає чудові результати.
Дуже важливо, щоб веб-сайт надавав максимально легкі активи, особливо на мобільних пристроях, де пропускна здатність може бути дуже обмеженою. Ви хочете оптимізувати файли SVG для завантаження та відображення програми якнайшвидше.
У цій статті буде показано, як використовувати спеціальні інструменти для оптимізації зображень SVG. Ви також дізнаєтеся, як працює розмітка, щоб ви могли пройти додаткову милю для створення найлегших зображень.
Представляємо svgo
Оптимізація SVG дуже схожа на зменшення CSS або інших текстових форматів, таких як JavaScript або HTML. Це в основному про видалення непотрібних пробілів і надлишкових символів.
Інструментом, який я рекомендую зменшити, є розмір зображень SVG svgo . Це написано для node.js. Щоб його встановити, просто виконайте наведені нижче дії.
У основній формі ви будете використовувати командний рядок так:
$ svgo --input img /graph.svg --output img /optimised-graph.svg
$ svgo --input img / graph.svg - output img / optimized-graph.svg
Будь ласка, вкажіть параметр --output, якщо ви хочете зберегти вихідне зображення. Інакше svgo замінить його оптимізованою версією.
svgo застосує кілька змін до оригінального файлу - видалення непотрібних коментарів, тегів і атрибутів, зменшення точності чисел у визначеннях шляхів або сортування атрибутів для кращого стиснення GZIP.
Це працює без сюрпризів для простих зображень. Однак у більш складних випадках маніпуляція зображення може призвести до викривлення файлу.
плагіни svgo
svgo дуже модульна завдяки архітектурі на основі плагінів.
При оптимізації складних зображень я помітив, що основні проблеми викликані двома плагінами svgo:
- convertPathData
- mergePaths
Дезактивуючи їх, ви отримаєте правильний результат у більшості випадків:
$ svgo --disable = convertPathData --disable = mergePaths -i img /a.svg
$ svgo --disable = convertPathData --disable = mergePaths -i img / a.svg
convertPathData перетворить дані шляху, використовуючи відносні та скорочені позначення. На жаль, деякі середовища не повністю розпізнають цей синтаксис, і ви отримаєте щось подібне:
Скріншот переглядача зображень Gnome, що відображає оригінальне зображення SVG (зліва) та версію, оптимізовану через svgo (праворуч)
Зауважте, що оптимізоване зображення відображатиметься правильно у всіх браузерах. Таким чином, ви можете використовувати цей плагін.
Інший плагін, який може викликати проблеми - mergePaths - об'єднує фігури одного стилю, щоб зменшити кількість тегів <path> у джерелі. Однак це може створити проблеми, якщо два шляхи перекриваються.
На зображенні праворуч, зверніть увагу на відмінності у візуалізації навколо шиї та руки персонажа, а також зверніть увагу на логотип Twitter. На схемі відображаються три шляхи, що перекриваються, які складають голову персонажа.
Моя пропозиція полягає в тому, щоб спочатку спробувати svgo з усіма активованими плагінами, тоді якщо щось не так, вимкніть два згаданих вище.
Якщо результат все ще сильно відрізняється від вашого вихідного зображення, то вам доведеться деактивувати плагіни по одному, щоб виявити той, який викликає проблему. Ось список плагіни svgo .
Оптимізація ще більше
svgo - відмінний інструмент, але в деяких конкретних випадках ви хочете ще більше стиснути зображення SVG. Для цього вам доведеться викопати формат файлу і виконати деякі ручні оптимізації.
У цих випадках моїм улюбленим інструментом є Inkscape : це безкоштовний, відкритий код і доступний на більшості платформ.
Якщо ви хочете використовувати плагін mergePaths з svgo, ви повинні поєднувати перекриваються шляхи самостійно. Ось як це зробити:
Відкрийте зображення в Inkscape та визначте шлях з таким же стилем (заливка та обведення). Вибирайте їх усі (підтримуйте зміну натиснутою для багаторазового вибору). Натисніть на меню Шлях і виберіть Союз. Ви готові - всі три шляхи об'єднані в одну.
3 різних шляхи, які створюють голову персонажа, об'єднуються, як це показано на малюнку праворуч.
Повторіть цю операцію для всіх шляхів одного стилю, які перекриваються, і тоді ви будете готові знову використовувати svgo, зберігаючи плагін mergePaths.
Є різноманітні оптимізації, які можна застосувати вручну:
- Перетворюйте штрихи на шляхи, щоб вони могли бути об'єднані з шляхами подібного стилю.
- Вирізати шляхи вручну, щоб уникнути використання шляху кліпу.
- Виключіть підподібний шлях із шляху, що перекривається, і об'єднайте з подібним шляхом, щоб уникнути проблем із шарами. (На зображенні вище, побачте волосся персонажа - бічний шлях волосся знаходиться під головою, але верхнє волосся знаходиться над ним, так що ви не можете об'єднати три шляхи волосся, як є.)
Остаточні міркування
Ці ручні оптимізації можуть зайняти багато часу для мізерних результатів, тому подумайте двічі перед початком!
Хорошим правилом під час оптимізації зображень SVG є переконання, що кінцевий файл має лише один шлях для кожного стилю (такий же стиль заповнення та обведення) і не використовує теги <g> для групування шляху до об'єктів.
У Firefox OS ми використовуємо шрифт іконок, gaia-іконки , згенерований з гліфів SVG. Я помітив, що оптимізація їх призвела до значно легшого файлу шрифтів, без візуальних відмінностей.
Якщо ви використовуєте SVG для вбудовування зображень у додаток або для створення файлу шрифту, завжди пам'ятайте, що його потрібно оптимізувати. Це зробить ваших користувачів щасливішими!
Гійом працює у веб-індустрії вже більше десяти років. Він захоплений веб-технологіями і регулярно сприяє проектам з відкритим кодом, про які він пише на своєму технічний блог . Він також захоплений відеоіграми, анімацією і, як японський оратор, іноземними мовами.
Інші статті Гійома Седрика Марті ...
