Оптимизация / сжатие SVG-изображений

Здарствуй Хабр!
Статья посвящена оптимизации изображений формата SVG.



SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML.

Инструменты

Принцип работы приложений заключается в следующем, они удаляют «ненужную» информацию из SVG, тем самым уменьшается размер самого файла. На сегодняшний день можно выделить три основных приложения для оптимизации SVG:

• SVG Cleaner;
• SVG Scour (для работы необходимо установить Python);
• SVG Optimizer (для работы необходимо установить Node.js).

Сравнение

Для сравнения результатов приложений, я взял следующее изображение.


Изображение сохранено с помощью Adobe Illustrator CS6.


Размер изображения — 6 279 219 байт

Приложение	Результат, байт	Результат, %	Затраченное время, секунда
SVG Scour 0.26-3	4 421 520	29,6%	205
SVG Cleaner 0.5.1	3 727 883	40,6%	30
SVG Optimizer 0.37	2 646 541	57,9%	15
SVG Scour+SVG Cleaner+SVG Optimizer	2 502 136	60,1%	240

Я проводил тестирование с большим количеством изображений, вышеприведенное таблица практически точно отображает мои результаты тестирования.

Заключение

1. Последовательное использование приложений помогает увеличить степь сжатия изображения.
2. SVG представляет собой текстовой файл XML, программы по оптимизации могут «испортить» изображения, т.е. браузеры не правильно отрисовывают изображение.
3. SVG поддерживает не только векторную графику, но растровую, но современные приложения по оптимизации SVG не поддерживают оптимизацию растровых изображений.