Опубликован: 07.11.2007 | Доступ: свободный | Студентов: 1766 / 346 | Оценка: 4.29 / 4.14 | Длительность: 25:09:00
Специальности: Программист
Лекция 1:

Введение в SVG

Лекция 1: 123456 || Лекция 2 >
Аннотация: Поддержка SVG браузерами. Flash против SVG. Развитие векторных форматов. Просмотр SVG–графики в Adobe SVG Viewer. Панель информации в Internet Explorer 6 (Windows XP SP2). Создание SVG документов. Работа с Altova XML Spy. Вставка SVG рисунков в HTML – страницы. Обзор ресурсов, посвященных SVG–графике.

Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

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

  • векторную графику (линии, окружности, кривые)
  • текст (с форматированием, заданием стилей и эффектов)
  • растровые изображения (внедряемые в SVG–документ).

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

  • произвольные заливки, штриховки, градиенты, заливки заданным растром, а также произвольным фрагментом векторного изображения,
  • разнообразные стили линий - линии произвольной толщины, штриховые, с различными стилями угловых и конечных точек,
  • возможность использования кривых Безье (кубических и квадратичных),
  • поддержка прозрачности всего изображения или его части, с заданной степенью,
  • возможность применения фильтров, типичных для растровой графики – размытие, попиксельное смешивание, наложение,
  • поддержка Unicode – возможность отображения в одном SVG документе текстов на различных языках и различными шрифтами,
  • расположение текстовых строк вдоль произвольных кривых,
  • встроенные развитые средства анимации, позволяющие без программирования в режиме реального времени менять практически все атрибуты изображения или его фрагмента,
  • встроенные средства для создания интерактивности, а также поддержка JavaScript и DOM,
  • поддержка каскадных таблиц стилей (CSS),
  • поддержка антиалиасинга.

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

  • SVG–документы могут быть отображены на самых различных устройствах – от экранов мобильных телефонов и карманных компьютеров(рис. 1.1) до мониторов PC и ноутбуков.
  • SVG–документы представляются в векторном формате, следовательно, их можно масштабировать без потери качества по сравнению с растровыми изображениями (рис. 1.2).
  • SVG–графика может быть создана "на лету" при помощи любого языка программирования (Javascript, Java или C#) и возможно управление видом этой графики в режиме работы приложения.
Бизнес-диаграмма в формате SVG

Рис. 1.1. Бизнес-диаграмма в формате SVG

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

Увеличенный фрагмент растрового (А) и векторного SVG (Б) изображений. У растрового изображения заметна "зазубренная" структура

увеличить изображение
Рис. 1.2. Увеличенный фрагмент растрового (А) и векторного SVG (Б) изображений. У растрового изображения заметна "зазубренная" структура

Объектная модель 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/ProcessLayout&lc=en&ppg=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/

Лекция 1: 123456 || Лекция 2 >