Алгоритмы уменьшения изображений

3.4. Оптимизируем SVG (Scalable Vector Graphics)

Векторный формат SVG является наследником двух форматов — VML (Vector Markup Language), который был разработан фирмами Microsoft, Macromedia, Autodesk, Hewlett-Packard и Visio Corporation, а также PGML (Precision Graphics Markup Language), совместно придуманный фирмами Adobe Systems, IBM, Netscape и Sun Microsystems.

Работа над SVG началась еще в 1999 году, то есть это достаточно старый формат, но широкую известность он приобрел только недавно, когда его ограниченная поддержка появилась в современных браузерах. К сожалению, Microsoft не включила поддержку SVG в недавно вышедший браузер Internet Explorer 8.0, но есть несколько плагинов, позволяющих браузерам Microsoft показывать изображения SVG.

Формат SVG является единственным общепринятым форматом векторной графики в вебе, но интересен еще и тем, что поддерживает анимацию, а также может быть изменен и создан браузером, поскольку представляет собой чистый XML.

Несмотря на то, что формату исполнилось десять лет, он не настолько изучен в плане оптимизации как остальные общепринятые форматы. Из интересных исследований, пожалуй, можно отметить документ фирмы Nokia "S60 Platform: Vector Graphics Optimization" и статью блогера Джо-са Хёза, где он пытается автоматизировать часть советов Nokia и некоторые из своих идей на этот счет.

Каких-либо комплексных инструментов для оптимизации SVG нам найти не удалось. Одним из авторов книги была предпринята успешная попытка развить идеи Хёза и сделать такой инструмент самостоятельно.

К сожалению, данный инструмент панацеей не является, хотя иногда показывает потрясающие результаты (уменьшение файла на 83%), но некоторые вещи все равно нужно оптимизировать вручную.

3.4.1. Оптимизация вручную

Вот несколько советов, которые помогут вам уменьшить размер файла и повысить удобство пользователя при взаимодействии с интерактивными SVG.

• Все ссылки, которыми пользователь может воспользоваться, размещайте как можно ближе к началу документа, тогда они будут доступны уже на ранних этапах загрузки.
• Если браузеры, которые будут отображать иллюстрацию, поддерживают CSS-стили для SVG, то воспользуйтесь всеми преимуществами такого подхода: группировкой и наследованием свойств, в противном случае присвойте общие свойства родительскому тегу g.
• Используйте возможности тега path для более компактной записи: относительные координаты, h и vдля вертикальных и горизонтальных линий, s и t для задания квадратичных и кубических кривых Безье.
• Не забывайте, что SVG предоставляет возможности для многократного использования одних и тех же элементов внутри иллюстрации.
• Используйте фильтры для создания сложных конструкций силами графической системы пользователя.
• Если какие-то примитивы перекрывают друг друга, уберите все, что не видно пользователю — кривые Безье можно заменить линиями, эффекты убрать, контуры "втянуть".
• Попробуйте уменьшить детализацию там, где это не будет заметно: возможно, крошечное отверстие будет смотреться не хуже, если сделать его простым многоугольником, а не кривыми Безье.
• Эффективнее не выкраивать сложные отверстия в фигурах заднего плана, а наложить нужный контур поверх, еще одним слоем.
• Объединяйте в одну соединенные фигуры, имеющие одну и ту же заливку и градиент.
• Старайтесь реже использовать градиент и прозрачность, это сбережет ресурсы клиентской машины, по той же причине избегайте использования перекрывающихся прозрачных областей.

3.4.2. Редакторы для работы с SVG

Для выполнения большинства советов по оптимизации вручную вам потребуется графический редактор. Какие же инструменты присутствуют на рынке?

Adobe (Macromedia) FreeHand — удобный, гибкий инструмент, доступны версии для Windows и Mac, но есть два неприятных недостатка: не работает напрямую с SVG и больше не разрабатывается вследствие покупки Macromedia фирмой Adobe, у которой есть свой редактор векторной графики (рис. 3.18).

Adobe Illustrator — один из старейших инструментов, непростой в использовании, не столь удобный, но во многом очень гибкий, умеет работать с SVG. Существуют платные версии для Windows и Mac (рис. 3.19).

увеличить изображение
Рис. 3.18. Редактор Macromedia FreeHand MX

увеличить изображение
Рис. 3.19. Редактор Adobe Illustrator

Inkscape — популярный, простой в использовании, бесплатный редактор, созданный специально для редактирования SVG. Есть версии для Linux, Mac и Windows (рис. 3.20).

увеличить изображение
Рис. 3.20. Редактор SVG Inkscape

увеличить изображение
Рис. 3.21. Редактор графики GIMP

GIMP — известный многим бесплатный конкурент Adobe Photoshop, умеет редактировать и векторную графику, хотя справляется с этим хуже специализированных программ. Умеет работать с SVG. Существует в версиях для Linux, Mac, Windows (рис. 3.21).

Sketsa — платный, написанный на Java специализированный редактор SVG (рис. 3.22).

увеличить изображение
Рис. 3.22. Мультиплатформенный редактор Sketsa

3.4.3. Автоматическая оптимизация

Как уже было упомянуто выше, одним из авторов была написана утилита для автоматической оптимизации файлов 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 [ОПЦИИ] -fd>AHJl > РЕЗУЛЬТИРУЮЩИЙ_ФАЙЛ

Опции, которые понимает программа:

-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.

3.4.4. Используем gzip

Все современные браузеры поддерживают прозрачную распаковку контента, сжатого методами gzip и deflate. SVG — не исключение. Иллюстрация в этом формате (как текстовый XML-файл) прекрасно сжимается — по статистике Adobe Systems, сжатые файлы занимают в среднем на 50-80% меньше места, чем несжатые.

Способы настройки веб-серверов для работы со сжатым контентом были рассмотрены во "Алгоритмизация сжатия текстовых файлов" .