Оптимизация SVG. Компрессия кода.

Подготовил: Евгений Рыжков Дата публикации: 08.09.2010
Последнее обновление: 17.11.2010

сжатие SVGОдно из достоинств SVG-файлов — это отличные возможности компрессии. Для большей эффективности ее следует проводить в два этапа: оптимизация кода и архивирование.

Оптимизация SVG-кода

Цель данного этапа — по максимуму сократить код: чем меньше кода, тем файл легче. Добиться этого можно придерживаясь рекомендаций:

  • сокращаем количество отдельных узлов по максимуму:
    • используем кривые Безье, эллипсы, дуги и т.д. для создания плавных кривых линий, вместо множества коротких отрезков прямых линий (polyline);
    • текст делаем текстом вместо того чтобы его рисовать сложными линиями;
  • применяем относительные координаты вместо абсолютных (при этом чтение кода человеком усложняется);
  • используем возможности SVG (градиенты, фильтры) для создания различных эффектов — минимум графических данных для получения результата;
  • SVG позволяет многократно использовать один и тот же элемент в иллюстрации;
  • SVG поддерживает CSS наследование и группировку. Используй это;
  • сокращай точность данных: для нормального отображения достаточно 2-3 знаков после запятой;
  • сокращение цветов (например, #FFFFFF = #FFF);
  • уменьшаем детализацию везде, где это возможно без видимых потерь качества изображения;
  • удаляем (или упрощаем) невидимые элементы (например, те, которые что-то перекрывает);
  • используем возможности тега path для более компактной записи: относительные координаты, h и v для вертикальных и горизонтальных линий, s и t для задания квадратичных и кубических кривых Безье.

Архивирование SVG

SVG файл — это обычный текстовый файл, который отлично поддается архивированию. Одним из лучших способов для этого сейчас является gzip-сжатие. Сжатые файлы могут весить в 2-5 раз меньше, чем несжатые.

W3C: примеры компрессии SVG-файлов
Несжатый SVG файл С gzip сжатием Степень сжатия
12,9122,46381%
12,1642,55379%
11,6132,61777%
18,6894,07778%
13,0242,04184%

Сжатый SVG-файл получает расширение SVGZ.

Автоматизация оптимизации

Даже при довольно простых изображениях, ручная оптимизация может потребовать часы. С этим был не согласен Евгений Степанищев (bolk), который взял за основу идеи Jos Hirth и сделал php-скрипт, для оптимизации SVG-файлов с таким перечнем возможностей оптимизации:

  • удаление пробельных символов, символов перевода строк и комментариев, замена пустых парных открывающих и закрывающих тегов на их короткий эквивалент;
  • удаление атрибутов, тегов и пространств имен редактора Inkscape (которые не используются браузером);
  • снижение точности значений атрибута d тега path. Так же удаляются пробелы, где это допустимо;
  • удаляются теги path с пустым атрибутом d;
  • оптимизация атрибута стилей ("style"), удаляются лишние пробелы, удаляются свойства, значения которых равны их значениям по умолчанию, удаляются свойства, относящиеся к "fill" и "stroke", если заданы стили, отменяющие действие этих свойств. Значения цвета, если это возможно, приводятся к более компактной форме;
  • сокращение чисел в атрибутах — урезаются незначащие нули справа, в чисто числовых атрибутах удаляется ноль слева, до точки ("0.05000" становится ".05");
  • удаление неиспользуемых атрибутов id. Если в иллюстрации есть теги <script> или <style>, то этот шаг пропускается.

Программа работает из командной строки. Синтаксис запуска и доступные ключи описаны в конце кода самого скрипта.

Нам показалось неудобным использование командной строки, поэтому сделали браузерную версию SVG-оптимизатора.

online svg оптимизатор

Помимо вышеперечисленных возможностей добавили возможность gzip сжатия.

Материалы

Показать комментарии