Автоматическая оптимизация. Оптимизируем SVG (Scalable Vector Graphics). Алгоритмы уменьшения изображений
Редакторы для работы с SVG
Автоматическая оптимизация
Используем gzip
Как уже было упомянуто выше, одним из авторов была написана утилита для автоматической оптимизации файлов SVG. Прототипом послужили две небольшие программы на Java, взятые с сайта Джоса Хёза.Программа написана на языке PHP, скачать её можно по адресу http://bolknote.ru/files/svgcrush.phps
У программы есть несколько ключей настройки, которые по умолчанию установлены на максимальную оптимизацию. Единственный ключ, который необходимо задать программе — -f, который указывает имя обрабатываемого файла. Результат выда?тся в стандартный вывод и может быть перенаправлен в файл стандартной конструкцией:
php svgcrush.php -fpicture.svg > optimized.svg
Оптимизация производится в несколько этапов:
1. Поскольку SVG это XML, то на первом этапе удаляются пробельные символы, символы перевода строк и комментарии, которые облегчают понимание XML человеком, производится замена пустых парных открывающих и закрывающих тегов на их короткий эквивалент
2. Заметная часть изображений создана редактором Inkscape, который оставляет внутри SVG массу специфичных атрибутов, которые не использует браузер. На этом этапе и частично на следующих происходит удаление атрибутов, тегов и пространств им?н этого редактора
3. Для атрибута «d», тега «path» производится снижение точности значений, и исключаются пробелы там, где это допустимо. Редакторы оперируют 5—6 цифрами после запятой, тогда как использование одного разряда десятичной дроби даёт незначительные искажения, а два разряда дают идеальное изображение. На этом же этапе удаляются теги «path» с пустым атрибутом «d», так как это отключает визуализацию элемента
4. Следующий этап — оптимизация атрибута стилей («style»), удаляются лишние пробелы, удаляются свойства, значения которых равны их значениям по умолчанию, удаляются свойства, относящиеся к «fill» и «stroke», если заданы стили, отменяющие действие этих свойств. Значения цвета, если это возможно, приводятся к более компактной форме («#aabbcc» становится «#abc»)
5. Обрабатываются все числа в атрибутах — урезаются незначащие нули справа, в чисто числовых атрибутах удаляется ноль слева, до точки («0.05000» становится «.5»)
6. Удаляются неиспользуемые атрибуты «id» тегов. Если в иллюстрации есть теги «script» или «style», то это шаг пропускается
Программа, вероятно, будет совершенствоваться и дальше. Например, можно заменять числовое значение некоторых цветов на их английское название, если оно более короткое («tan», «red», «plum»), объединять трансформации, преобразовывать rgb(r,g,b) представление в #rrggbb и так далее.
Формат запуска программы следующий:
php svgcrush.php [ОПЦИИ] -fФАЙЛ > РЕЗУЛЬТИРУЮЩИЙ_ФАЙЛ
Опции, которые понимает программа:
-fФАЙЛ — файл, который будет обработан
-rЧИСЛО — точность чисел (см. этап №3) в атрибуте «d», тега «path», от 1 до 9, по умолчанию — 1
-D — не удалять атрибуты со значениями по умолчанию (частично исключает этап №4)
-C — не оптимизировать значения цветов (опять же, касается этапа №4)
-I — не удалять неиспользуемые ID (отключает этап №6)
-F — форматировать XML (частично исключает этап №1)
Для тестов эффективности мы использовали Open Clip Art Library версии 0.18 —архив бесплатных SVG. Были обработаны 2875 изображений, результаты следующие: процент оптимизации варьируется в пределах от 1% до 83%, среднее значение — 50%. В основном, изображения, которые не удалось оптимизировать, содержат растр, импортированный в SVG.