Веб-графика: судьбы «вектора» в Сети

До поры до времени на веб-страницах пользователи могли наблюдать лишь растровую графику (вкратце о форматах рассказывалось в предыдущей статье). Векторная графика пришла в Сеть несколько позже, и своим массовым распространением обязана, по странному стечению обстоятельств, прежде всего технологии Flash. Плагины для воспроизведения Flash-роликов были установлены на компьютере едва ли не каждого интернет-пользователя уже в ранние 2000-е.

Flash, зародившись в середине 1990-х как средство векторной анимации, ныне представляет собой комплексную мультимедийную платформу для создания насыщенных интернет-приложений (RIA), развиваемую компанией Adobe. Среди сегодняшних возможностей Flash — не только и даже не столько собственно векторная графика и анимация, сколько воспроизведение видео и звука, организация видеоконференций и других форм интерактивного взаимодействия, доступ к локальной файловой системе машины пользователя и многое другое.

Конкурирующая платформа, реализующая похожий функционал — Silverlight, разрабатываемая фирмой Microsoft. Технология Silverlight, впрочем, получила гораздо меньшее распространение, нежели Flash. Фирма Microsoft, положа руку на сердце, озаботилась разработкой собственной платформы для создания RIA слишком поздно. Во-первых, в 2007 году, когда была представлена первая версия Silverlight, технология Flash была распространена повсеместно. Во-вторых, на тот момент браузер Internet Explorer уже безнадежно утратил положение монополиста на соответствующем рынке. В-третьих, сегодня даже Flash переживает не лучшие времена в связи с тем, что уже очевидно, что рано или поздно этой проприетарной технологии придется уступить место открытым стандартам. Так что перспективы Silverlight (тоже, разумеется, проприетарной технологии) представляются туманными. Лишь около половины пользователей браузеров устанавливают себе соответствующий плагин; а распространенных в Сети приложений, разработанных с помощью Silverlight, и вовсе на порядки меньше, чем приложений, созданных на основе Flash.

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

Ожидается, что в обозримом будущем функционал, предоставляемый средствами наподобие Flash и Silverlight, будет реализован в браузерах благодаря поддержке таких открытых стандартов, как HTML5 (где предусматриваются элементы <video> и <audio>), CSS3 (в особенности речь идет о модулях Animations, Transitions, 2D Transforms, 3D Transforms), Canvas, SVG, WebSocket API, File API, WebRTC и других.

Кстати говоря, компания Adobe прекрасно осознает происходящее, начав недавно заниматься разработкой таких программных продуктов, как Edge (редактор веб-анимации на базе открытых технологий HTML5, CSS3 и JavaScript) и Wallaby (конвертор файлов в формате Flash в HTML-файлы с использованием SVG, CSS3 и JavaScript). После официального релиза Adobe Edge, разумеется, станет коммерческим продуктом (актуальные на момент написания статьи preview-версии распространяются бесплатно), но принципиальное его отличие от Flash состоит в использовании открытых форматов на выходе. Сделать анимационный ролик при помощи Edge, вероятно, получится быстро и удобно, но для достижения аналогичного результата никто не обязан использовать именно Edge — можно написать код вручную, можно разработать собственный фреймворк или даже собственный полнофункциональный редактор анимации, не будучи скованным никакими патентными или лицензионными ограничениями.

В свете сказанного есть надежда, что основным векторным графическим форматом веба в обозримом будущем станет, наконец, SVG — открытая спецификация, разрабатываемая консорциумом W3C с конца 1990-х. Актуальной на текущий момент является версия 1.1. Собственно, единственным на сегодня ощутимым препятствием для массового распространения SVG является, как обычно, Internet Explorer (до версии 8 включительно).

SVG представляет собой подмножество XML. Иными словами, данные в формате SVG — это вполне читаемый человеком код, в отличие от, например, файлов в форматах Corel Draw или Adobe Illustrator, являющихся бинарными. (Иногда применяется, впрочем, формат SVGZ — по природе своей это SVG, сжатый при помощи алгоритма gzip. Общеизвестно, что человеко-читаемый текст хорошо поддается сжатию.)

Имеет смысл для примера привести «внутренности» какой-либо картинки в формате SVG. Пусть это будет логотип рабочей группы WHATWG — он довольно прост, и его описание не отнимет слишком много места:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="45" fill="#ffffff" stroke="#3c790a" stroke-width="10"/>
<path d="M38,38c0-12,24-15,23-2c0,9-16,13-16,23v7h11v-4c0-9,17-12,17-27c-2-22-45-22-45,3zM45,70h11v11h-11z" fill="#3c790a"/>
</svg>

Как видно, здесь описываются два объекта — окружность и помещенный внутрь нее сложный контур в форме вопросительного знака. Вот как можно было бы увеличить наш подопытный логотип в 6 раз — без каких-либо потерь качества, как и подобает векторной графике:


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="600" height="600">
<g transform="scale(6)">
<circle …/>
<path …/>
</g>
</svg>

Весьма вероятно, что в ближайшие несколько лет, получив надлежащую поддержку во всех браузерах, SVG вытеснит GIF и PNG (в варианте с индексированной палитрой) из прочно занятых последними ниш, относящихся к сравнительно простым изображениям с четкими контурами (наподобие логотипов). Растровая графика в лице формата JPEG (и, в гораздо более редких случаях, полноцветного PNG — по причине того, что последнему при прочих равных требуется больше места) сохранит актуальность только для изображений фотографического характера.

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

Артемий Ломов, WebHiTech