Векторизация растровой графики, источник

Все знают стандарт векторной графики SVG (Scalable Vector Graphics). Великая вещь, которая незаменима в веб-дизайне. Но этот формат до сих пор полностью не поддерживается ни в одном браузере по одной простой причине: он невероятно сложный. Если посмотреть на спецификации, там более 200 подпунктов в 27 разделах (около 900 страниц на бумаге). Только оглавление занимает 19 экранов. Мягко говоря, это перебор.

К счастью, SVG — не единственный формат векторной графики. Есть более эффективные и минималистичные альтернативы.

Идея векторной графики проста и логична: она хранит объекты, а не пиксели. Окружность будет закодирована несколькими байтами (координаты центра, радиус окружности, цвет заливки и окантовки), в то время как количество пикселей такого объекта может вырасти до гигантских размеров. Также и у других простых фигур в векторном формате практически идеальное сжатие.

<svg>
<circle cx="96" cy="16" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

То есть векторная графика — это красота, математика и минимализм.

Но SVG не просто решает эту задачу, а берёт на себя нечто большее. В контейнер SVG вы можете поместить буквально что угодно, вплоть до скриптов. Из-за такой сложности он представляет определённую опасность, а санация файлов SVG — практически невыполнимая задача. Вот почему его не любят хостинги. И несколько недооценивают веб-разработчики, особенно знающие о сотнях уязвимостей, связанных с рендерингом SVG.

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

Минималистичный SVG


Разработчики нового формата векторной графики TinyVG поставили задачу избавиться от этих недостатков. Сделать более простой формат с меньшим количеством функций, но достаточно функциональный для 90% задач.

Описание основных особенностей с официального сайта:

  • Компактное бинарное кодирование (в среднем 39% размера сопоставимого SVG-файла).
  • Охватывает 90% типично используемых SVG-файлов, при этом гораздо проще.
  • Поддерживаются распространённые 2D-примитивы (пути, линии, прямоугольники, многоугольники).
  • Поддержка линейного и радиального двухточечного градиента.
  • Настраиваемая точность для небольших файлов.
  • Понятная спецификация.

Демо этого тигра сгенерировано текущей реализацией рендерера TinyVG:


Оригинальный файл SVG имеет размер 96 719 байт, оптимизированная версия — 86 806, а после конвертации в TinyVG он ужимается до 27 252 байт, то есть более чем в три раза от оригинала.

TinyVG прошёл тестирование на большом объёме реальных изображений из баз данных MaterialDesign, Papirus, W3C, Zig и freesvg.org. В среднем файлы TinyVG имеют размер 20–50% от оригинальных SVG — и их гораздо проще парсить и рендерить.

В большинстве случаев даже после компрессии SVG с помощью gzip файлы TVG всё равно значительно меньше.
Набор данных Количество файлов Уровень сжатия (TVG/SVG) Средний размер TVG Средний размер SVG
Всего 2129 46,38% 3224 10 194
Иконки материального дизайна 1000 51,47% 220 428
Papirus 1000 47,20% 841 1783
W3C 115 53,18% 301 567
FreeSVG 5 29,72% 12 315 41 435
Zig 9 36,15% 2443 6759
Примечание. С другой стороны, если очистить SVG-картинки в svgcleaner, а потом сжать gzip, то разница не будет такой заметной. Например, тот же тигр магически уменьшается с 52 763 до 20 924 с gzip или 19 529 c zstd. Однако svgcleaner убирает из файла не только синтаксический сахар, но и некоторые графические элементы, которые не влияют на видимый эффект, так что это не совсем чистое сравнение. Просто факт, что такой же оптимизации по размеру можно добиться не переходом на новый формат, а просто минификацией существующих SVG. Конечно, это не принижает достижений разработчиков, которые попытались упросить спецификации и сам векторный формат.

Вот ряд картинок в разных форматах, которые можно сравнить по размеру файла:


См. спецификации в PDF и в тексте.

▍ Инструментарий


Следующие инструменты предоставляют в комплекте рендерер TinyVG, а также конвертер текстовых форматов для текста TinyVG и SVG.


Нативная библиотека подходит для интеграции TinyVG в нативные проекты, будь то Zig, Rust, C или C++ (через C ABI). Библиотека предоставляет средства для рендеринга TinyVG в растровые изображения и SVG (текст).

Существует также полифилл, чтобы использовать TinyVG в браузере, демо.

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

Другие оптимизации векторных форматов


TinyVG — не первая оптимизация векторных форматов. Собственно, научные статьи в этой области выходят постоянно. Особенно актуально направление векторизации растровой графики. Например, в 2008 году группа французских исследователей под руководством Александрины Орзан (Alexandrina Orzan) из Технологического института в Гренобле разработала инструменты для генерации векторной графики на рассеянных кривых (diffusion curves), в том числе программу для автоматической конвертации растровых изображений в векторные. Рассеянные кривые — это обычные кривые Безье, но с информацией о цвете в ключевых точках, между которыми градиент меняется с помощью многосеточного метода. Выглядит это так:


Таким образом можно в крохотном объёме информации закодировать сложное и большое изображение.

А в 2018 году Михаил Бессмельцев с коллегами из лаборатории компьютерных наук и искусственного интеллекта (CSAIL) Массачусетского технологического института предложили оригинальный метод использования оснащённого поля с двумя парами векторов для каждой точки на плоскости. Ранее было известно, что оснащённые поля логично и естественно подходят для отслеживания ориентации кривых в таких резких переходах, но они никогда не применялись для векторизации изображений.

Что такое оснащённые поля, демонстрирует следующая иллюстрация.


В оснащённом поле хотя бы одно направление поля выровнено по исходной кривой, а около X- и T-пересечений оно выровнено по обоим направлениям

Показанные результаты демонстрируют, что качество векторизации значительно выше, чем у предыдущих методов. Даже на сильно зашумлённых оригиналах геометрия кривых не теряется и совпадает с оригинальными начертаниями.


(а) Локальный подход к векторизации переходов (Норис, 2013) может привести к неправильным или неточным соединениям. (b) Метод Фавро (2016) может существенно отклоняться от растрового оригинала. (с) Новый метод Бессмельцева и Соломона показывает лучший результат по сравнению с предыдущими разработками

Научная статья опубликована 5 января 2018 года на сайте препринтов arXiv.org (вторая версия статьи — 5 сентября 2018 года, arXiv:1801.01922v2).

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

Битвы форматов


Вообще, битва форматов — это всегда интересное и непредсказуемое явление. Взять недавнюю историю с растровыми форматами AVIF и JPEG XL (JXL). Как известно, Google с февраля 2023 года неожиданно прекратила поддержку JPEG XL в браузере Chromium. Получается, что по факту AVIF победил JPEG XL.

В то же время сравнительное тестирование JPEG, JPEG-XL, AVIF и WebP на 27 картинках вроде бы показывает преимущество JPEG-XL.





Однако поддержку JPEG-XL в итоге решили убрать из браузера(-ов). Как видим, лучший формат не всегда становится победителем в реальной жизни.

Среди векторных форматов тоже немало новых разработок, которые или уже заменили SVG в своих нишах, или явно претендуют на это. Можно упомянуть Lottie для векторной анимации и IconVG для иконок (продвигается Google).

В любом случае формат SVG сложный и тяжеловесный. Даже браузеры не поддерживают все существующие функции SVG, не говоря о будущих оптимизациях. А этих оптимизаций теоретически может быть бесконечно много, потому что математики находят всё более эффективные способы сжатия реальности (то есть векторизации изображений).

Поэтому вместо «толстого» SVG можно использовать альтернативные форматы или просто очищать SVG с последующим сжатием.

Пол-лимона подарков от RUVDS. Отвечай на вопросы и получай призы ????

Комментарии (22)


  1. fransua
    15.05.2023 09:55
    +8

    Не думаю, что корректно называть полифилом wasm библиотеку на 60Кб+.
    SVG можно из JS модифицировать, анимировать, он поддерживает CSS. А тут что, просто картинки без нативной поддержки в браузерах? Ну так можно и CDR и AI использовать.


    1. domix32
      15.05.2023 09:55

      Дык анимирование и стилизация svg это маленько иная сфера применения, нежели у TVG - оптимизация размера статики, типа иконок, которые на странице можно скейлить без потерь качества.


  1. Zara6502
    15.05.2023 09:55
    +15

    зато приморили flash, который в 1-2 мегабайт умещал мультики, анимации и игры.


    1. entze
      15.05.2023 09:55

      Там еще runtime до какого-то момента старались не раздувать больше 1Мб за счет оптимизаций, правда сыгравших злую шутку с безопасностью.


      1. Zara6502
        15.05.2023 09:55

        у меня остались YetiSports 1-5, они без рантайма работают, так как собраны в EXE сразу, все части по 1.1-1.5 Мб. Понятно что это не очередная серия Масяни, там графики не так и много, но в контексте статьи где статичный "лев" умудряется в 100 мб файл залазить, это капец. Там даже таблично векторами если DBF сделать будет килобайт 100 (ну или я что-то сильно не понимаю в векторной графике).


        1. domix32
          15.05.2023 09:55

          100 Мб где?


          1. Zara6502
            15.05.2023 09:55
            +1

            вот позор, посыпаю голову пеплом, я прочитал как "Оригинальный файл SVG имеет размер 96 719 МЕГАбайт", а там "байт" написано.


        1. valera545
          15.05.2023 09:55

          Вектора при наличии рукожопости легко можно сделать неподъёмными. Но это не имманентное свойство векторов — так-то они лёгкие.


    1. valera545
      15.05.2023 09:55
      +3

      Мне очень жаль ActionScript. С него начиналось моё программирование. Иногда представляю себе, каким мог стать фронтенд, если бы вместо JS раскрутили AS. Фантастика, да, мечты о странном.


      1. domix32
        15.05.2023 09:55

        Они же оба EcmaScript. Только современный JS это уже ES6, а последний ActionScript кажется ES 4.x.


        1. iliazeus
          15.05.2023 09:55
          +1

          У ActionScript 3 было много своего синтаксиса поверх ECMAScript: статическая типизация, классы, геттеры-сеттеры и события как свойства классов. Что-то из этого потом появилось в самом ECMAScript, но далеко не все.


        1. valera545
          15.05.2023 09:55

          AS графику описывал в полном объёме. Представляете — никакого HTML, никакого CSS, всё в скрипте написано, безо всяких уродств типа SVG? )

          ЗЫ. А ещё и анимация там же. Да, потребовалась бы та же модульная система для декомпозиции, но с JS как-то справились же.


          1. domix32
            15.05.2023 09:55

            Вощемта вы тоже можете проинитить канвас и жить без остального html/css.

            А так не сказать, что там чего-то прям такого сверхъестественного есть, чего не найти в JS.


    1. mamonaton
      15.05.2023 09:55

      flash - это просто детство , жалко конечно, что прикрыли его


  1. LordDarklight
    15.05.2023 09:55

    а куда веду ссылки на скачивание инструментария?


  1. roqin
    15.05.2023 09:55

    Хм, а ведь ещё до всяких SVG существовал формат векторной графики CGM, стандартизированный ИСО, и даже в 2001 вышел WebCGM (но тут уже SVG появился). А почему он никакого развития не получил, что про него аж все забыли, всё же по размеру несколько компактнее должен быть?


    1. domix32
      15.05.2023 09:55

      Потому что W3C почему-то считала xml светлым будущим веба, а не эти ваши "бинарные проприетарные блобы".


      1. roqin
        15.05.2023 09:55
        +1

        Хм, забавно. Это при том, что форматы растровой графики (GIF, JPEG, PNG и т.п.) изначально были бинарными, а возможность писать их в текстовом виде (data:…base64…) появилась не так уж давно. Загадочный всё же у них был ход мыслей.


        1. domix32
          15.05.2023 09:55

          Ну да. И формулы тоже как MathML, а не старым бобрым латехом, и звуки тоже каким-то там MusicML. Благо сейчас их больше особо не слушают и толкают технологии силами WATWG. А когда-то была честь иметь шилдик "W3C approved".

          Емнип там и за PNG тоже была отдельная война. И APNG вместо гифок. Так в итоге и бросили поддержку в пользу обычных mp4 видосиков.


  1. Kyoki
    15.05.2023 09:55
    +3

    Ну да, совсем одно и тоже - тестовый формат, который можно изменить как угодно и когда угодно, и банарный формат.


  1. stan_podoba
    15.05.2023 09:55
    +1

    (глупая идея) Скормить 900 страниц документации Chat GPT, попросить исправить ошибки в спецификации, и написать код, для реализации поддержки этого формата (делов-то)


  1. Tamerlan_Hajiyev
    15.05.2023 09:55

    Проблема векторных мультимедиа в том, что они медленно рендерятся (настолько, что прорисовка заметна на глаз). Зачем мыкаться с векторной графикой всего и вся, когда объёмы носителей и скорость интернета позволяют хранить и передавать растровую графику высоко разрешения, быстро прорисовываемую на устройстве любой мощности? Растры - для медиа, векторы - для САПР.