SVG — входящий в подмножество XML язык разметки масштабируемой векторной графики был создан в 1999 году, но только в 2011-м он был включен в рекомендации W3C. Поразительно, но за одиннадцать лет (с 2000 по 2011 год) SVG не претерпел существенных изменений. Тем не менее, ему все же удалось завоевать доверие и широкое признание разработчиков.

Один из таких разработчиков, наблюдавший за эволюцией SVG с момента его возникновения до наших дней, провел экскурс в историю развития языка. Только сейчас, по прошествии многих лет, ему удалось понять причины успехов и неудач SVG. Все свои наблюдения и умозаключения автор собрал в хронике «Взлеты и падения SVG». Пост подготовлен специально для корпоративного блока PayOnline, компании, которая занимается организацией платежей на сайтах и в мобильных приложениях. Далее непосредственно перевод.

Где-то в 1998 году моя бывшая коллега, в то время работавшая в Adobe, заглянула в мой офис чтобы рассказать мне об абсолютно новой технологии. Она знала, что мне будет интересно. Речь тогда шла о PGML или «Precision Graphics Markup Language», который представлял собой не что иное, как вариацию Adobe на тему XML для векторной графики. Джон Уорнок, один из основателей Adobe, тогда сказал про него следующее:

«Внедрение PGML позволяет удовлетворить растущий спрос на точную спецификацию, которая позволяла бы членам интернет-сообщества быстро и надежно управлять графикой и взаимодействовать с ней в Вебе».

Я с головой ушел в изучение PGML и с тех самых пор начал внимательно следить за XML-стандартами векторной графики. PGML от Adobe, VML от Microsoft, а также другие похожие проекты (Web Schematics, Hyper Graphics Markup Language, WebCGM и DrawML) вскоре слились в осязаемый W3C стандарт под названием Scalable Vector Graphics (SVG). Предполагалось, что основным предназначением нового формата будет отображение интерактивной векторной графики в веб-браузерах. В те далекие времена Netscape Navigator 4.7 и Internet Explorer 5, эта задача была выполнима только с помощью Macromedia Flash.

В 2000-м ситуация прояснилась

Что же такого крутого было в SVG? Это был практически «PostScript для веб-разработки», поэтому решение Adobe спонсировать и поддерживать его на ранних этапах развития было вполне понятно: как и Postscript, SVG давал возможность описывать изображения с помощью векторов, почти не прибегая к другим решениям. Такой подход был гораздо эффективнее, нежели использование растровой графики, а также позволял добиться гораздо более естественного масштабирования.



Однако был еще один момент, делавший SVG еще круче: в отличие от PostScript, SVG записывался декларативно внутри в рамках стандартной разметки мета-языка XML. То есть простые смертные могли смело открыть текстовый файл, написать в нем что-нибудь вроде

<circle cx=”60? cy=”60? r=”50?/>

… после чего сохранить этот файл, загрузить его в браузер и посмотреть на результат. Можно было пойти дальше и написать скрипт по правилам Document Object Model (DOM), который оживил бы нарисованное изображение или изменил заданные в XML-коде параметры. В отличие от доступной тогда альтернативы в виде Macromedia Flash, этот способ был более понятным для пользователя. Кроме того, текстовый характер разметки позволял легко проводить поиск по коду. Изначально для отображения SVG-графики требовался плагин, однако в конечном счете стандарт предусматривал встроенную поддержку со стороны браузера.

Для меня аргументы в пользу этой технологии были очевидны: ее применение привело бы к прогрессу в области веб-технологий, а сама она должна была получить самое широкое распространение. Вскоре после этого я нашел на Yahoo группу SVG Developers, куда как мотыльки на свет «слетались» такие же разработчики, как я.

1999 год плавно перетекал в 2000-й, и тогда у меня сложилось впечатление, что широкое распространение SVG уже не за горами. Я был уверен, что это произойдет в 2001-м или, в крайнем случае, в 2002-м. Приход SVG казался чем-то совершенно естественным. К тому же опыт показывал, что в 1990-х годах стандартам обычно требовалось на распространение около двух лет. Однако «внезапному успеху» SVG суждено было случиться значительно позже, чем я ожидал. 2002 год успел не только наступить, но и закончиться, а распространиться за это время сумел только Macromedia Flash.

2003 год: время застоя в развитии веб-стандартов

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

Лучшие времена

В 2003 году для отображения SVG в браузерах Adobe предлагал SVG Viewer, а инструментом для личного творчества был Illustrator. В то же время Mozilla начала работу над встраиванием поддержки стандарта в свой браузер. Что и говорить, даже Microsoft Visio поддерживал SVG. Наглядных примеров, демонстрировавших возможности SVG, было много. Среди них были не только картографические приложения или образцы визуализации данных, но даже векторные аналоги Flash-сайтов.



Об SVG также было написано несколько книг. Введение в одной из них, SVG Unleashed Криса Лайли, завершалось словами «добро пожаловать в будущее».

Худшие времена

Несмотря на все это, у меня все чаще возникало ощущение, что будущее так и не наступит: Adobe SVG Viewer, единственный в то время инструмент для отображения SVG-графики в браузере, не получил широкого распространения. Microsoft решительно проигнорировала SVG в Internet Explorer 6. Без поддержки со стороны самого популярного веб-браузера развитие стандарта застопорилось, а сам он стал бесполезен в качестве обычного формата для веб-публикаций. Он прекрасно подходил для закрытых систем, его эстетика привлекала гиков, однако в целом SVG выпал из мейнстрима и был неизвестен большинству пользователей интернета. Единственной технологией векторной графики, получившей широкое распространение, был Macromedia Flash.

Два главных сдерживающих фактора

С тех пор прошло более десяти лет и сейчас мне легко определить, с какими трудности тогда столкнулся SVG, и понять, почему покорение мира заняло так много времени. В то время я совершенно не понимал в чем же дело и не мог предсказать как будут развиваться события. Впрочем, задним числом размышлять всегда проще…



Браузерные войны или «кому вообще нужны эти стандарты»?

Я с любовью вспоминаю Mozilla тех времен. У них были серьезные намерения по внедрению SVG и они делали для этого все, что могли. Нельзя сказать, что работа продвигалась быстро, но прогресс был стабильным. В результате встроенная, не требующая установки сторонних плагинов поддержка SVG впервые появилась и была успешно опробована именно в их билдах.

В 2002 году Microsoft связались со мной и предложили нанять всю нашу компанию (нас, впрочем, было только двое). Моей первой реакцией было «Зачем?», однако вскоре мне стало понятно, что они знали все про нашу работу с SVG. Независимо от того, планировали Microsoft поддерживать SVG или нет, было очевидно, что они что-то замышляют. В конце концов оказалось, что даже несмотря на то внимание, с которым компания следила за SVG, она вовсе не собиралась применять стандарт в его чистом виде. Вместо этого Microsoft пыталась бесцеремонно скопировать SVG. Эта попытка воплотилась в виде языка разметки XAML, предназначенного для отображения векторного и анимированного контента с помощью так и не снискавшей популярности технологии Silverlight. XAML был поразительно похож на SVG.

Adobe тем временем продолжала поддерживать SVG Viewer, а также авторские инструменты, работавшие с SVG, такие как FrameMaker, Illustrator, InDesign, и GoLive. Тем не менее они никак не могли повлиять на Microsoft, чтобы та изменила свой курс. Позиции Internet Explorer тогда были чрезвычайно сильны и всякий раз, когда дело доходило до создания большого количества векторного контента, большинство дизайнеров и разработчиков продолжало выбирать Macromedia Flash. Несмотря на превосходство SVG в техническом плане, решающим фактором в этом противостоянии была расстановка сил на браузерном рынке. В свете превосходства Microsoft поддержка, которую Adobe оказывал SVG, выглядела скорее как эксперимент, а не как полноценное усилие.

«Стандарты — для неудачников»
— Мнение циников

В ситуации, когда Internet Explorer безо всякой поддержки SVG пожинал плоды своей огромной популярности, а Flash был единственным браузерным плагином, пользовавшийся у пользователей реальным спросом (благодаря тому, что появился на рынке в нужное время), ни Microsoft, ни Macromedia не были заинтересованы в поддержке открытой технологии, способной уровнять возможности игроков. Те компании, которые поддерживали SVG оказались аутсайдерами. Среди них были как инженеры, видевшие в нем более совершенную, а следовательно, и более востребованную в будущем технологию, так и бизнесы, для которых использование SVG было способом наступить на пятки крупным монополистам, господствующим на рынке благодаря своим закрытым технологиям.

Войны стандартов или «весь ваш текст теперь наш»

Однако даже если бы монополисты, храбро отвергнув интересы своих акционеров, встали под знамена SVG, последний все равно встретил бы сопротивление, уже со стороны других технологий. Дело в том, что SVG существовал на пересечении нескольких других стандартов, двое из которых – HTML и CSS – появились значительно раньше. SVG был более новым набор спецификаций. К началу 2000-х W3C имел далеко не идеальную репутацию. Организация успела отметиться созданием нескольких бесполезных (Xlink) и откровенно неудачных (XML Schema) стандартов. В качестве яркого примера неудач W3C можно привести XHTML. Простейшая на первый взгляд задача помещения SVG в контекст пересекающихся HTML и CSS была осложнена тем фактом, что обе эти технологии находились в состоянии постоянного изменения, совсем необязательно двигаясь в правильном направлении.

Возьмем, к примеру, обработку текста. В SVG 1.0 отсутствовала такая востребованная особенность, как подстраивающийся под форму контейнера текст с правильным переносом слов. Рабочая группа SVG, взявшись за решение задачи, сразу же поняла, что это не входит в ее зону ответственности, поскольку рабочая группа CSS уже успела серьезно поработать над текстовой составляющей до них… Политические вопросы и многообразие технических подходов мешали определить, какую конкретно роль во всем этом должен был играть SVG.

В 2004 году была сформирована рабочая группа Compound Document Format. Ее задачей была разработка формата документов, который объединял бы вместе несколько разных форматов, таких как XHTML и SVG. Разумеется, подобная разработка требовала встроенной браузерной поддержки, поскольку написание SVG кода через плагин не позволило бы добиться хорошего сочетания SVG и HTML синтаксиса.

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

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

2005 год: Adobe отказывается от SVG

Adobe много лет терпела все превратности поддержки «стандарта неудачников». Очевидно, компании надоело бороться за справедливость и терпеть поражения в борьбе с монополистами. В 2005 году она объявила о приобретении Macromedia, своего крупнейшего и, вероятно, единственного конкурента. Для SVG-сообщества это событие имело негативные последствия: уже в 2006 году SVGViewer был признан устаревшим, а инструментарий, позволявший работать с SVG, был удален из других приложений.



Adobe оказал Flash значительную поддержку и не жалел средств и сил для его доработки. Это позволило технологии завоевать более 90% рынка, став практически универсальной графической платформой для персональных компьютеров. Что касается всех остальных устройств, то они были еще неспособны полноценно отображать веб-страницы или графику. Благодаря Flash планы Adobe по захвату рынка постепенно претворялись в жизнь.



Вместо того чтобы, взять SVG на вооружение как альтернативу, Microsoft выпустила через некоторое время его запоздалый вариант — Silverlight. Седьмое и восьмое поколения Internet Explorer продолжали игнорировать SVG.

И пока Adobe и Microsoft развивали проприетарные альтернативы SVG, рабочая группа все так же занималась развитием стандарта, а другие «неудачники» вроде Mozilla продолжали двигать технологию вперед. Стандарт SVG «похорошел» с появлением версии 1.2, содержавшей несколько скромных «фич». Параллельно с этим шла работа над версией 1.1, исправляющая баги наспех созданной версии 1.0. Оба варианта разрабатывались в течение нескольких лет.

В декабре 2008 года SVG 1.2 Tiny стал рекомендацией W3C, а SVG 1.1, содержавший исправления ошибок и разъяснения для версии 1.0, добился того же статуса в 2011 году.

SVG получил основательную поддержку от Firefox и Webkit. Благодаря Webkit SVG заработал в Chrome и Safari. Теперь Internet Explorer оказался в полной изоляции. Постепенно он терял свою популярность, которая доставалась Chrome и Firefox. Одновременно с этим попытки Silverlight встать на ноги потерпели неудачу.

Благодаря стремительному распространению Flash-рекламы и росту количества «насыщенных интернет-приложений», Adobe Flash сохранил сильную позицию в сегменте десктопных браузеров. Однако в сегменте мобильных устройств, которые с выходом iPhone в 2007 году серьезно выросли в плане браузерной функциональности, Flash вел неравный бой. Поддержка SVG появилась в iPhone в 2008 году. О поддержке Flash не могло быть и речи.

2010 год: Смиренный SVG наконец унаследовал трон

Позже, в 2010 году, Стив Джобс опубликовал свои «Мысли о Flash». Согласно идеям Джобса, единственной доступной альтернативой Flash было некое сочетание технологий, составной частью которых был SVG.

Амбиции Adobe относительно Flash, AIR и Open Street Project представляли существенную угрозу для закрытой экосистемы Apple. И хотя замечания Джобса о нежелательном применении плагинов в браузерах и ужасной производительности Flash на мобильных устройствах были полностью обоснованы, угроза, которую Flash/AIR представляли для Apple носила прежде всего экономический характер, и именно она вынудила Джобса вновь обрести любовь к стандартам. Благодаря iPhone и iPad, Apple могла уничтожить Flash и это противостояние пришлось как нельзя кстати для SVG, уже ставшего частью HTML5. Благодаря этому SVG мог наконец получить то внимание и поддержку, которую заслужил уже давно.

Microsoft и Apple начали полноценно поддерживать и применять SVG, как только это стало «политически целесообразно». В 2011 году Microsoft даже провел конференцию SVG Open, что в свете событий предыдущих лет казалось чем-то невероятным.



Могу вас уверить, что версия SVG 2011 года не претерпела серьезных изменений по сравнению с версией 2000 года. Продемонстрированные во время презентации Internet Explorer 9 примеры отображения SVG, такие как великолепный труд в области картографии от Cargo.net, представляли собой не что иное, как «старинные образцы», разработанные еще в начале 2000-х. В целом написанные в 2001 году SVG-приложения прекрасно работали на iPad, когда тот только появился. Microsoft реализовала SVG с одной досадной особенностью: она отказалась воспроизвести поддержку SMIL, популярной в среде ранних SVG-разработчиков спецификации, позволявшей анимировать графику. Даже сегодня, когда Google планирует применять SMIL в своих продуктах, Microsoft, похоже, все же побеждает в борьбе за ее вытеснение.



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



Библиотеки и фреймворки для визуализации и работы с SVG, такие как d3.js, растут и развиваются. Некоторые из них достигли очень высокого уровня. SVG-графика сегодня доступна в более чем 2 миллионах устройств по всему миру, а Adobe вернул поддержку стандарта в свои графические приложения. Недавно компания даже добилась существенного прогресса в этом направлении: релиз CC2015.2 от 1 декабря предлагает прекрасные возможности по экспорту SVG графики из Illustrator и ее импорта в Photoshop. В сравнении с первыми вариантами экспорта, это гигантский прыжок вперед.

Теперь, когда SVG получил широкое распространение и полноценную поддержку со стороны браузеров, а инструменты разработки развиваются в правильном направлении, SVG стал тесно связан и совместим со всеми технологиями, применяемыми в рамках HTML5: Javascript, HTML, CSS, Canvas, и WebGL. Стандарт снова движется вперед, на этот раз в гармонии с другими технологиями. Подводя общие итоги можно сказать, что SVG удалось добиться поставленных в самом начале своего существования целей. Просто на это ушло больше времени, чем предполагали некоторые из нас.

Хорошее всегда приходит к тем, кто умеет ждать.

Материал к публикации подготовлен компанией PayOnline, международной системой для приема электронных платежей на сайте и в мобильных приложениях. Если вам нужно организовать прием платежей, смело обращайтесь. Также подписывайтесь на наш корпоративный блог, впереди еще много интересных постов.