Автор: Євген Рижков Дата публікації: 08.09.2010
Одна з переваг SVG-файлів - це відмінні можливості компресії. Для більшої ефективності її слід проводити в два етапи: оптимізація коду і архівування.
Оптимізація SVG-коду
Мета даного етапу - по максимуму скоротити код: чим менше коду, тим файл легше. Домогтися цього можна дотримуючись рекомендацій:
- скорочуємо кількість окремих вузлів по максимуму:
- використовуємо криві Безьє, еліпси, дуги і т.д. для створення плавних кривих ліній, замість безлічі коротких відрізків прямих ліній (polyline);
- текст робимо текстом замість того щоб його малювати складними лініями;
- застосовуємо відносні координати замість абсолютних (при цьому читання коду людиною ускладнюється);
- використовуємо можливості SVG (градієнти, фільтри) для створення різних ефектів - мінімум графічних даних для отримання результату;
- SVG дозволяє багаторазово використовувати один і той же елемент в ілюстрації;
- SVG підтримує CSS успадкування та угруповання. Використовуй це;
- скорочуй точність даних: для нормального відображення досить 2-3 знаків після коми;
- скорочення квітів (наприклад, #FFFFFF = #FFF);
- зменшуємо деталізацію всюди, де це можливо без видимих втрат якості зображення;
- видаляємо (або спрощуємо) невидимі елементи (наприклад, ті, які щось перекриває);
- використовуємо можливості тега path для більш компактного запису: відносні координати, h і v для вертикальних і горизонтальних ліній, s і t для завдання квадратичних і кубічних кривих Безьє.
архівування SVG
SVG файл - це звичайний текстовий файл, який добре піддається архівування. Одним з кращих способів для цього зараз є gzip-стиснення. Стислі файли можуть важити в 2-5 разів менше, ніж стиснені.
W3C: приклади компресії SVG-файлів незжатими SVG файл З gzip стиснення Ступінь стиснення 12,912 2,463 81% 12,164 2,553 79% 11,613 2,617 77% 18,689 4,077 78% 13,024 2,041 84%
Стиснутий SVG-файл отримує розширення SVGZ.
Автоматизація оптимізації
Навіть при досить простих зображеннях, ручна оптимізація може зажадати годинник. З цим не погоджувався Євген Степанищев (bolk) , Який взяв за основу ідеї Jos Hirth і зробив php-скрипт, для оптимізації SVG-файлів з таким функціоналом оптимізації:
- видалення пробільних символів, символів перекладу рядків і коментарів, заміна порожніх парних відкривають і закривають тегів на їх короткий еквівалент;
- видалення атрибутів, тегів і просторів імен редактора Inkscape (які не використовуються браузером);
- зниження точності значень атрибута d тега path. Так само видаляються прогалини, де це допустимо;
- видаляються теги path з порожнім атрибутом d;
- оптимізація атрибута стилів ( "style"), видаляються зайві прогалини, видаляються властивості, значення яких дорівнюють їх значення за замовчуванням і видаляються властивості, що відносяться до "fill" і "stroke", якщо задані стилі, що скасовують дію цих властивостей. Значення кольору, якщо це можливо, приводяться до більш компактній формі;
- скорочення чисел в атрибутах - урізаються незначущі нулі справа, в чисто числових атрибутах видаляється нуль зліва, до точки ( "0.05000" стає ".05");
- видалення невикористовуваних атрибутів id. Якщо в ілюстрації є теги <script> або <style>, то цей крок пропускається.
Програма працює з командного рядка. Синтаксис запуску і доступні ключі описані в кінці коду самого скрипта.
Нам здалося незручним використання командного рядка, тому зробили браузерную версію SVG-оптимізатора .
Крім перерахованих вище можливостей додали можливість gzip стиснення.
