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

в 16:37, , рубрики: svg, Клиентская оптимизация, метки:

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

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

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

Инструменты

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

Сравнение

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

Изображение

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

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

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

Размер изображения — 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 не поддерживают оптимизацию растровых изображений.

Автор: Lorents

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js