SVG. Масштабируемая векторная графика. Часть 1

CG.

Компьютерная графика (CG от англ. - Computer Graphics), в привычном на сегодняшний день понимании, развивается с момента появления первых графических операционных систем. И начиная с первых их реализаций она разделилась на два основных направления: графика растровая и векторная. Для этих направлений разработано и применяется великое множество форматов файлов, редакторов и просмотровщиков. Для того, чтобы понять в чем основное отличие растровой и векторной картинки давайте посмотрим на пример показанный ниже.

Здесь мы видим смайлик, который при масштабе 1х1 будет выглядеть одинаково и для растровой и для векторной графики. Различия проявляются при масштабировании. При увеличении в десять раз мы на растровой картинке, которая показана в центре видим, что точки превратились в квадратики, а на векторной картинке (справа) край области изображающей глаз смайлика остался гладким.

Так будет всегда и это справедливо для любых типов файлов. Для примера отмечу, что BMP, JPEG, PNG относятся к растровым, а EMF, AI, CDR к векторным. И если опуститься до уровня кода этих файлов, то можно говорить о том, что файлы растровой графики содержат информацию о цвете пикселей (точек) располагающихся в виде прямоугольной матрицы, а файлы графики векторной информацию об объектах картины, которыми могут быть простые фигуры, как прямоугольник, круг, овал, и т.п., а так же их свойствах (размер, положение, цвет обводки и заливки).

В данной статье речь пойдет о SVG (от англ. - Scalable Vector Graphics) масштабируемой векторной графике предназначенной для сети Интернет.

Интернет.

Возможно не всем известно, но глобальная сеть и связанные с ней технологии не живут сами по себе, а развиваются под чутким надзором организации под названием World Wide Web Consortium(сокр. W3C). Эта организация, далее консорциум, состоит из представителей крупнейших фирм имеющих отношение к компьютерной индустрии. Представители таких фирм как IBM, Canon, Adobe, Opera, Google и т.д. собираются вместе и объединяются в рабочие группы, чтобы определить каким Интернет будет завтра.

Результаты своей деятельности представители консорциума выкладывают в сети по адресу http://www.w3.org и там вы всегда можете просмотреть документы на которые обязаны опираться разработчики программного обеспечения, например, браузеров.

Одна из рабочих групп консорциума занимается разработкой спецификаций SVG. Сформировалась эта группа в теперь уже далеком 1998 году. Возглавил ее Джон Феррайола (более подробную информацию о котором можно найти на страничке http://jonferraiolo.sys-con.com), тогда представитель от Adobe, а ныне член команды IBM. 29 октября 98 года он опубликовал требования к формату SVG и рабочая группа преступила к разработкам.

В составе группы опубликовавшей 11 февраля 1999 года первый черновик спецификации были: по два представителя от Microsoft, IBM, Netscape, Adobe, Corel и по одному отAutodesc, SUN, Apple, Xerox, Visio, HP, Macromedia, Quark,CCLRC, Inso; всего 20 человек. С тех пор состав рабочей группы конечно же несколько раз менялся, но работы велись непрерывно и о своей деятельности команда регулярно отчитывалась как на сайте консорциума, так и в Твиттере под ником @svgwg.

4 сенября 2001 года была опубликована первая спецификация - SVG 1.0, что дало возможность авторам (cg–художникам) быть уверенными в том, что результат их творчества будет одинаково передаваться конечному потребителю браузерами и редакторами.

Потом публиковались различные рекомендации, были сформированы требования для передачи формата SVG мобильными устройствами, особенности применения с нестандартными кодировками и т. п.

И наконец 16 августа 2011 года вышла вторая редакция спецификации — SVG 1.1

Отличия SVG от других векторных форматов.

Забегая вперед, заглянем внутрь файла SVG. Нам сразу становится ясно, что это обычный текстовый файл и объекты описаны в нем языком, который и определен спецификацией W3C, чего нельзя сказать, к примеру, о файлах EMF.

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

Более того, формат SVG относится к категории открытых и это означает, что мы всегда сможем узнать о том, как он устроен, чего нельзя сказать о фирменных форматах AI (Adobe) и CDR(Corel), которые разрабатываются производителями графических редакторов. И это еще один плюс рассматриваемого формата, но есть у него и минусы, о которых мы поговорим далее...

Минусы формата SVG.

Формат SVG задумывался, кроме всего прочего, и для экономии трафика в сети Интернет. Всегда ли такая экономия имеет место? Я отвечу — Нет. Дело в том, что для изображений маленьких размеров гораздо выгоднее применять растровую графику (к примеру PNG).

Кроме того, есть у SVG и проблемы с интеграцией на web страницах. Несмотря на то, что Microsoft входит в состав рабочей группы SVG полноценная поддержка формата браузером Internet Explorer не обеспечена до сих пор, а частичная начинается только с, последней на сегодняшний день, девятой версии этого браузера. ВерсииIE ниже девятой отображали файлы SVG только с применением плагина. Это обусловлено, с моей точки зрения, извечным желанием компании Билла Гейтса «перетянуть одеяло на себя».

Браузер Mozilla и некоторые другие отображают графику из файлов SVG, но не могут использовать их в качестве фоновых в связи с тем, что размер изображения может быть опущен (не указан в файле), а вычисление реальных координат объектов вызывает трудности. И только Google Chrome с легкостью обращается с файлами SVG.

Основную конкуренцию формату сегодня составляет графика интегрированная в новый, пока еще, формат гипертекста HTML5. Теперь картинки можно описывать прямо в тексте страницы выделив этот фрагмент кода парным тэгом <CANVAS>.

Анимация и интерактивность, которые также предусмотрены в формате SVG, гораздо лучше проработаны во Flash и даже несмотря на то, что он требует установки плагина (Flash Player) на большинстве браузеров, он пользуется гораздо большей популярностью. Напомню, что формат Flash был создан и разрабатывался компанией Macromedia, а в последующем перешел к Adobe и развивается ею по сей день.

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

Содержание спецификации SVG 1.1

Давайте для ознакомления с форматом SVG рассмотрим содержание спецификации. В первых двух главах мы видим введение и концепцию языка. В третьей главе речь идет о модели представления, т.е. о том, как программы предназначенные для отображения файлов SVG должны их читать. Затем в четвертой главе рассматриваются базовые типы и интерфейсы, а следом в пятой главе рассмотрена структура файлов (документов) SVG. Глава 6 посвящена стилизации объектов рисунка. Седьмая глава рассматривает систему координат, трансформации и единицы измерения. В восьмой главе говорится о кривых, а в следующей 9 главе остальных базовых фигурах, отдельно в 10 главе рассмотрен объект «Текст». Далее в 11 главе речь идет о заливке объектов, их обводке и маркерах. Глава 12 посвящена краскам, тринадцатая глава расскажет об альтернативных способах заливки, таких как градиент и текстура. В главе 14 говориться об обрезке, маскировании и композиционировании. Пятнадцатая глава посвящена визуальным фильтрам. Главы 16,17 и 18 сообщат нам соответственно об интерактивности, связывании и использовании сценариев. Следующая 19 глава расскажет об анимации, 20-я о шрифтах, 21-я о метаданных, 22-я об обратной совместимости, 23-я о расширяемости. Затем в спецификации приведены приложения в количестве 17-ти штук, которые окончательно перекрывают все вопросы связанные с форматом SVG.

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

Порядок освоения будет отличаться от предложенного содержанием спецификации, что обусловлено нарастающей сложностью рассматриваемого материала.