Здарствуй Хабр!
Статья посвящена оптимизации изображений формата 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 |
Я проводил тестирование с большим количеством изображений, вышеприведенное таблица практически точно отображает мои результаты тестирования.
Заключение
- Последовательное использование приложений помогает увеличить степь сжатия изображения.
- SVG представляет собой текстовой файл XML, программы по оптимизации могут «испортить» изображения, т.е. браузеры не правильно отрисовывают изображение.
- SVG поддерживает не только векторную графику, но растровую, но современные приложения по оптимизации SVG не поддерживают оптимизацию растровых изображений.
Автор: Lorents
