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

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



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

    Инструменты


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

    Сравнение


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

    Изображение

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

    Параметры 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 не поддерживают оптимизацию растровых изображений.
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 10
    • 0
      Изображение в примере из поста, открыл в Corel Draw X6, экспортировал в svg с настройками по умолчанию, размер файла — 1,98 МБ (2 081 121 байт). Файл.
      Lorents протестируйте мой файл возможно получится еще уменьшить.
      • 0
        Гм, он добавил классы (иногда даёт выигрыш), и сильно исказил картинку. По крайней мере все браузеры показывают одинаково искажённой.
      • 0
        Сделал rghost.ru/47148372 — 28,2%
        • +17
          привет.
          я – автор SVGO (SVG Optimizer).

          если есть какие-нибудь вопросы или пожелания, буду рад ответить и выслушать.
          немного подробностей можно найти в моём докладе на ноябрьском Web Standards Days в Москве, где я рассказал про общие принципы оптимизации SVG и пропиарил утилиту в целом :)

          на сегодняшний день SVGO ещё не исчерпал всех тех идей оптимизации, которые накопились, т.е. результат может быть ещё круче, чем в нынешней таблице сравнения (касательно как степени сжатия, так и скорости работы).
          • 0
            по-моему в сравнительной таблице не хватает столбца, говорящего про искажения. Не уверен, что понимаю, как задать метрику на искажения, но уж хотя бы ваше личное ощущение по этому поводу хочется услышать
            • 0
              я бы ещё добавил, что искажения можно разделить на два вида: 1) явные баги, когда утилита ломает оригинальный результат рендеринга 2) осознанные «lossy» искажения (например, слегка уменьшить точность чисел с плавающей точкой в огромных массивах координат Path).

              и если вторые можно контролировать, то первые порой абсооютно непредсказуемы – я ловил очень прикольные глитчи в процессе разработки :)
            • +1
              Попробуйте киллер-фичу формата: gzip-сжатие!

              envek@envek-work:~/svg$ gzip -c --best administrative-map.svg > administrative-map.svgz
              envek@envek-work:~/svg$ ls -lh
              -rw-rw-r-- 1 envek envek 84K июля   2 16:36 administrative-map.svg
              -rw-rw-r-- 1 envek envek 31K июля   2 16:36 administrative-map.svgz
              

              Жаль, браузеры пока о такой файл спотыкаются, если сервер не скинет следующие заголовки (соответственно, локально не открывают):
              Content-Type: image/svg+xml
              Content-Encoding: gzip
              
              • +1
                сюда ещё хорошо подходит гугловый Zopfli, XML вообще хорошо жмётся по своей природе.
                • 0
                  Тут фишка в том, что gzip уже является частью формата (как минимум, де-факто), его поддерживают все браузеры (редакторы тоже должны, inkscape понимает, убунта для них превьюхи строит успешно), браузеры же корректно открывают сжатые файлы, если им сказать, что они сжатые. Осталось только браузерам сказать, чтобы они для расширения svgz пробовали сначала прогнать файл через gunzip — и всё.
                  • +1
                    я понимаю.
                    фишка Zopfli как раз в том, чтобы статически сжать svg → svgz с чуть большим сжатием, чем даже «gzip --best», с обратной совместимостью, никак не влияющей на существующие браузеры.

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