Введение в SVG

SVG (Scalable Vector Graphics, в переводе масштабируемая векторная графика) - это язык для описания двухмерной графики в формате XML. Можно сказать, что SVG – это HTML для графики. Он включает в себя несколько типов различных объектов:

Графические возможности языка чрезвычайно велики и сравнимы с возможностями пакетов Corel Draw и Adobe Illustrator:

Название "масштабируемая векторная графика" отражает следующие превосходства языка:

(http://esvg.ultimodule.com/bin/esvg/templates/splash.asp?NC=2483X)

Объектная модель SVG документа основана на принятом консорциумом W3C в 2000 году стандарте DOM (Document Object Model) Level-2. Это дает возможность использования стандартных языков для начального построения и произвольного манипулирования любыми элементами изображения. Составной частью стандарта SVG является модель событий, позволяющая привязать произвольный сценарий к любому фрагменту SVG документа и достаточно легко реализовывать интерактивные графические изображения.

SVG разрабатывается консорциумом W3C при поддержке таких крупных компаний, как Microsoft, Adobe, Corel, IBM, Hewlett-Packard, Sun Microsystems, Canon, Kodak и многих других (всего более двадцати). От их совместных усилий зависят стандартизация многих деталей языка, а также скорость его создания.

Стандарт SVG 1.0 (http://www.w3.org/TR/2001/REC-SVG-20010904/) был принят в качестве спецификации консорциумом в сентябре 2001 г. Стандарт SVG 1.1 (http://www.w3.org/TR/SVG/) и его версии SVG mobile profiles (http://www.w3.org/TR/SVGMobile/) (SVG Basic and SVG Tiny) были приняты консорциумом в качестве рекомендации в январе 2003 г. Ведутся работы по созданию стандарта SVG 1.2 (http://www.w3.org/TR/2004/WD-SVG12-20040318/), который сейчас имеет статус черновика. Эта версия языка будет содержать ряд новых свойств: встроенные атрибуты фигурного форматирования текста, поддержка аудио и видео, а также более полная поддержка DOM.

На момент написания этого курса рабочей версией является SVG 1.1. Поэтому именно его мы и будем рассматривать.

Поддержка SVG браузерами

В настоящее время SVG применяется в Интернете сравнительно мало. На сайтах, где используются SVG, оно не представляется непосредственно, а конвертируется в растровое изображение. Для этого используются различные библиотеки, например Batik (на языке Java), которые "на лету" выполняют преобразования.

Браузеры Internet Explorer 9, Opera (начиная с 8-й версии) и Mozilla способны самостоятельно, без дополнительных утилит воспроизводить формат SVG. Что касается прочих браузеров – в том числе и Internet Explorer 6 (входящего в состав Windows XP), то им для воспроизведения нужны плагины. Наиболее распространен Adobe SVG Viewer, который можно бесплатно скачать с сайта Adobe (http://www.adobe.com/svg/viewer/install/ ) (был выпущен в сентябре 2003 года и с тех пор не обновлялся)

Имеется также Corel SVG Viewer (http://www.corel.com/servlet/Satellite?pagename=CorelCom/ProcessLayoutlc=enppg=CorelCorp/Trials/DownloadContainer). Далее в книге будет использоваться описание Adobe SVG Viewer.

SVG также может быть встроен в PDF документ. Adobe Acrobat Reader поддерживает SVG начиная с 6-й версии. Для встраивания SVG в PDF существует утилита для Adobe Acrobat Pro.

Для мобильных устройств, телефонов и PDA, также существует поддержка SVG. Специально для них были разработаны варианты SVG формата: SVG Tiny (SVGT) and SVG Basic (SVGB). Имеется также конкурент SVG - Macromedia Flash Lite, который частично поддерживает SVG Tiny начиная с версии 1.1.

На сайте W3C размещен официальный список программного обеспечения для SVG:

http://www.svgi.org/

Flash против SVG

Самый распространенный векторный формат, который применяется для анимации в современном Интернете – Adobe (Macromedia) Flash. Яркие, интерактивные ролики, игры – автономные и распределенные, обучающие системы и видео – все это формат Flash, который по праву завоевал заслуженную популярность. Вместе с тем SVG очень похож на Flash. В табл. 1.1 приводится их сравнительная характеристика.

Можно заметить, что SVG–формат практически ничем не уступает Flash, а кое в чем и превосходит Flash. Почему же тогда последний используется несравненно более широко? Основная причина ограниченности распространения SVG файлов – отсутствие программных пакетов, таких как Adobe (Macromedia) Flash или Swish, позволяющих быстро создавать анимацию при помощи визуальных средств. Компания Kiyut создала неплохой редактор Sketsa SVG Graphics Editor (http://www.kiyut.com/products/sketsa/index.html), но он скорее напоминает одну из графических программ – Adobe Illustrator или Corel Draw, чем комплексный пакет графики и программирования Adobe (Macromedia) Flash (рис. 1.3):

(рис 1.3) Редактор SVG–графики Sketsa SVG Graphics Editor

Имеются также редакторы SVG, создаваемые энтузиастами. Pilat (http://pilat.free.fr/dessin_loc/draw.svg) создал достаточно интересный редактор в формате SVG, доступный онлайн, но до Flash ему также далеко (рис. 1.4):

Одни из самых впечатляющих примеров использования SVG приложений расположены на сайте Adobe. Интерактивная диаграмма распределения численности населения по странам мира, с возможностью добавления величин и выбора типа графика (рис. 1.5)

(http://www.adobe.com/svg/demos/chart.html)

Схема зданий – близнецов с возможностью навигации по этажам и просмотра схемы (рис. 1.6):

(http://www.adobe.com/svg/demos/vbs/html/frameset.html)

И, наконец, самый интересный пример – то, чего не может Flash! Трехмерная структура химических соединений с возможностью управления в пространстве, масштабирования и выделения названий атомов как обычного текста (рис. 1.7):

С помощью добавления JavaScript в формат SVG можно создавать также трехмерные анимированные изображения, например этот трехмерный куб был создан при помощи набора Batik SVG Toolkit (http://xml.apache.org/batik/) (рис. 1.8):

Развитие векторных форматов

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

SVF (Simple Vector Format) был создан для представления в Интернете материалов, разработанных в системах CAD (AutoCAD, ArchiCAD). Первый плагин для отображения этого формата появился в 1996 г. Поддерживалось масштабирование, слои, гиперссылки. Формат не поддерживал анимации, интерактивности и антиалиасинга (http://www.softsource.com/svf/).

DWF (Drawing Web Format) векторный формат, разработанный компанией AutoDesk поддерживающий основные функции векторной графики, а также JavaScript. Формат не поддерживал анимации. Для воспроизведения графики была создана серия плагинов AutoDesk WHIP4 (http://www.autodesk.com/whip) (с 2003 года плагин называется Volo View (http://www.autodesk.com/voloview).

PGML (Precision Graphics Markup Language) собственный, основанный на тексте, векторный формат компании Adobe. Вначале планировалось его использование в качестве основы для форматов PostScript и PDF. Предполагалось также разработка версии формата с поддержкой высокого уровня интерактивности и анимации. (http://www.w3.org/TR/1998/NOTE-PGML)

WebCGM (Web Computer Graphics Metafile, или CGM) является стандартом ISO бинарного графического формата с древовидной структурой. Применяется в основном в технической промышленности. Первая версия WebCGM была представлена в 1999 году консорциумом W3C. (http://www.w3.org/Graphics/WebCGM/)

VML (Vector Markup Language) разработанный в Microsoft формат также основан на XML и близок по концепции и возможностям к SVG. Это формат был представлен консорциуму W3C для стандартизации, но был отвергнут в пользу SVG. VML используется для экспорта и импорта векторных графических изображений в MS Office (http://www.w3.org/TR/NOTE-VML).

PDF (Portable Document Format) платформонезависимый формат электронных документов, созданный компанией Adobe с использованием ряда возможностей PostScript. В первую очередь предназначен для представления в электронном виде полиграфической продукции, — значительное количество современного профессионального печатного оборудования может обрабатывать PDF непосредственно. (partners.adobe.com/asn/developer/acrosdk/DOCS/pdfspec.pdf)

VRML (Virtual Reality Modeling Language) предназначен для описания трехмерных изображений и оперирует объектами, описывающими геометрические фигуры и их расположение в пространстве. Подобно SVG файлы vrml представляют собой обычный текстовый файл, интерпретируемый браузером с помощью плагина (http://www.web3d.org/)

HGML (Hyper Graphics Markup Language) Был представлен в июне 1998 в качестве компактного формата для веб-графики. Не был реализован. (http://www.w3.org/TR/NOTE-HGML)

DrawML (Draw Markup Language) двухмерный формат векторной графики предназначенной для описания технической графики. (http://www.w3.org/TR/1998/NOTE-drawml-19981203)

Просмотр SVG–графики в Adobe SVG Viewer

Приступим к работе с плагином для просмотра SVG графики. Контекстное меню Adobe SVG Viewer очень похоже на меню обычного Flash проигрывателя (рис. 1.9):

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

Последнее свойство наиболее интересное –изображение можно "таскать" по экрану(рис. 1.10):

При выборе пункта меню "Find" открывается диалоговое окно поиска в SVG документе, поскольку он представляет собой текстовый файл. Просмотреть код исходного документа можно непосредственно в браузере (рис. 1.11):

Панель информации в Internet Explorer 6 (Windows XP SP2)

Всякий раз при открытии SVG–файла (как и впрочем, flash – ролика) в Internet Explorer появляется назойливое сообщение о блокировке активного содержимого (рис. 1.12):

Понятно, что созданные нами самими SVG–файлы не смогут причинить вреда компьютеру. Поэтому приходится всякий раз разрешать открытие, проделывая однотипную последовательность действий. Маловразумительная справка не предлагает способа решения этой проблемы. Для отключения панели информации в главном меню выбираем "Сервис\Свойства обозревателя", в появившемся окне переходим на вкладку "Дополнительно" и отмечаем галочкой пункт "Разрешать запуск активного содержимого файлов на моем компьютере" (рис. 1.13):

Теперь SVG–файлы будут открываться без всяких предупреждений.

Создание SVG документов

Приступим, наконец, к самому интересному – созданию собственных SVG–файлов. Запускаем блокнот, вводим в него следующий код:

<svg width="200" height="100" >
  <rect x="50" y="40" width="100" 
        height="30" fill="blue"/>
</svg>

Сохраняем его, называя "SimpleSVG.txt", меняем расширение файла на "SimpleSVG.svg", открываем в браузере (после установки Adobe SVG Viewer) и видим синий прямоугольник (рис. 1.14):

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

<?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 width="200" height="100"  
   xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>

Первая строка – это стандартное объявление XML – документа:

<?xml version="1.0" encoding="utf-8"?>

Далее помещается ссылка на DTD-схему документа версии 1.1:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Наконец, тег <svg> описывает содержимое SVG документа:

<svg width="200" height="100"  
  xmlns="http://www.w3.org/2000/svg" version="1.1">

Атрибуты width и height определяют значения ширины и высоты документа. Здесь приводятся значения в пикселях. Внутри тега указывается пространство имен и версия документа при помощи соответствующих тегов xmlns и version. Для правильной интерпретации SVG документа браузерами в принципе (как мы уже убедились), вполне достаточно следующего шаблона:

<svg width="200" height="100">
</svg>

Однако далее мы будем применять полное описание. Дело в том, что простые элементы графики будут отображаться правильно, но сложные элементы, относящиеся к спецификации 1.1, могут быть не выведены. Лучше сразу привыкать правильно оформлять SVG–документы .

Значения оси абсцисс возрастают при движении слева направо, а оси ординат – при движении сверху вниз (рис. 1.15)

При загрузке документа в браузер он располагается, начиная с верхнего левого угла видимой области. Поэтому выбранная система координат достаточно удобна.

Добавляем в наш документ прямоугольник:

<?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 width="200" height="100"  
  xmlns="http://www.w3.org/2000/svg" version="1.1">
     <rect x="50" y="40" width="100" height="30" fill="blue"/>
</svg>

Для заливки прямоугольника использовано именованное название цвета "blue". SVG графика поддерживает 147 именованных цветов. Документ вместе с прямоугольником будет выглядеть относительно координатных осей теперь так (рис. 1.16):

Сохраним теперь наш полный SVG документ, назвав его NormalSVG.txt, сменим расширение на "NormalSVG.svg", откроем в браузере – результат будет в точности такой же, как и для файла "SimpleSVG.svg" (рис. 1.17):

В последующих главах мы будем разбирать другие элементы SVG–графики.

Работа с Altova XML Spy

Основной инструмент редактирования SVG–обычный текстовый редактор, однако в нем отсутствует подсветка синтаксиса и возможность быстрого просмотра внесенных изменений. При написании этого курса использовался, пожалуй, лучший редактор XML документов – Altova XML Spy 2007 (http://www.altova.com/ (36,3 Мб)). Его также можно применять для создания SVG–файлов. После запуска программы выбираем из списка шаблонов SVG–документ (рис. 1.18):

Пролог нового документа содержит ссылку на упрощенную версию спецификации:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">

Копированием и вставкой эта спецификация заменяется на нужную нам:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Программа поддерживает несколько режимов отображения документа – Text (рис. 1.19, А), Grid (рис. 1.19, Б), Browser (рис. 1.19, В):

В режиме Text можно вводить код вручную, при этом работает подсветка синтаксиса, автозавершение строк, а в дополнительных окнах выводится информация об элементах (рис. 1.20):

Режим Grid позволяет конструировать SVG–документ, используя панели инструментов, доступна также сборка блоков при помощи удобного визуального представления (рис. 1.21):

В режиме браузер содержимое SVG–документа отображается в графическом режиме непосредственно в программе.

Для быстрого переключения между режимами Text и Browser удобно настроить сочетания клавиш. В главном меню программы выбираем "Tools" – "Customize…", в появившемся диалоговом окне в списке "Category" выбираем пункт View, далее в списке "Commands" выбираем последовательно пункты "Text View" и "Browser View", назначаем для них сочетания клавиш (рис. 1.22):

Вставка SVG рисунков в HTML – страницы

Рассмотрим теперь вставку SVG–рисунков в HTML – страницы. Такая задача встречается, когда графика представляет собой меню сайта, диаграмму или элемент оформления. Существуют три способа встраивания:

При помощи тега <embed>.

Фрагмент HTML – страницы:

<body bgcolor = "#6699FF">
<embed src="butterfly.svg" width="500" height="300" 
       type="image/svg+xml" name="mybutterfly" 
       pluginspage="http://www.adobe.com/svg/viewer/install/main.html" 
       wmode="transparent">
</body>

Дополнительный атрибут pluginspage указывает адрес страницы, на которую будет направлен пользователь в том случае, если его браузер не поддерживает SVG–графику. В данном случае для фона HTML - страницы установлен голубой цвет ( bgcolor = "#6699FF" ). Атрибут wmode делает прозрачной область рисунка, не заполненной графикой (рис. 1.23>):

(рис 1.23) Встраивание SVG–документа при помощи тега embed

Этот способ встраивания поддерживается многими браузерами и допускает прямое и обратное взаимодействие при помощи скриптов между HTML и SVG. Корпорация Adobe для своего плагина SVG Viewer рекомендует применение именно тега embed. Но он не вполне точно соответствует самой спецификации HTML.

При помощи тега <object>.

Фрагмент HTML – кода страницы:

<body bgcolor = "#6699FF">
<object type="image/svg+xml" name="mybutterfly" 
  data="butterfly.svg" width="500" height="300">
  Для просмотра SVG графики Вам необходимо обновить браузер</object>
</body>

Внутри тега object помещено сообщение, которое будет отображено при невозможности отображения браузером SVG графики. В этом случае рисунок не содержит прозрачной области (рис. 1.24):

(рис 1.24) Встраивание SVG–документа при помощи тега object

Этот способ можно применять для всех браузеров, с поддержкой стандарта HTML 4.0 (или более высокого). Недостатком является отсутствие взаимодействия между HTML и SVG–рисунок может быть использован лишь в качестве иллюстрации или меню, в котором будет реализована система гиперссылок в самом SVG-документе.

При помощи тега <iframe>.

Фрагмент HTML – кода страницы:

<body bgcolor = "#6699FF">
<iframe src="butterfly.svg" width="500" height="300" 
        name="mybutterfly" >
   Для просмотра SVG графики Вам необходимо обновить браузер
</iframe>
</body>

Здесь также внутри тега iframe помещается информационное сообщение. Отображаемый рисунок также не содержит прозрачной области (рис.1.25):

(рис 1.25) Встраивание SVG–документа при помощи тега iframe

Этот способ поддерживается всеми современными браузерами, но он не документирован. Также заметна рамка вокруг рисунка. Для того чтобы от нее избавиться, следует добавить форматирование:

frameborder="0" marginwidth="0"  marginheight="0"

Фрагмент HTML – кода страницы теперь будет выглядеть так:

<body bgcolor = "#6699FF">
 <iframe src="butterfly.svg" width="500" height="300" 
         name="mybutterfly" frameborder="0" 
         marginwidth="0"  marginheight="0">
    Для просмотра SVG графики Вам необходимо обновить браузер
 </iframe>
</body>

Теперь, страница будет выглядеть в точности так же, как и в случае применения тега object.

Обзор ресурсов, посвященных SVG-графике

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