Векторная графика SVG SVG (Scalable Vector Graphics) —
Векторная графика SVG
SVG (Scalable Vector Graphics) - язык разметки, созданный W3C консорциумом c 1999 года для описания графических данных на веб-странице в виде текста (XML). Однако термин SVG может означать не только сам язык разметки, но и формат получаемого изображения. На SVG можно создавать несложные векторные и смешанные векторно-растровые изображения. Язык разрабатывался, основываясь на идее технологии VML от Microsoft и PGML. В отличие от VML, SVG не является чей-то собственностью, полностью открыт и бесплатен. Текущая версия - 1.1, выпущена в 2001 году, в настоящий момент идет разработка и утверждение версии 1.2. SVG рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Вы можете визуально оценить часть возможностей формата SVG и познакомиться с синтаксисом разметки на странице онлайн-редактора.
SVG (Scalable Vector Graphics) SVG (в переводе масштабируемая векторная графика) - это язык для описания двухмерной графики в формате XML. Можно сказать, что SVG – это HTML для графики. Графические возможности языка чрезвычайно велики и сравнимы с возможностями пакетов Corel Draw и Adobe Illustrator. Он включает в себя несколько типов различных объектов: векторную графику (линии, окружности, кривые) текст (с форматированием, заданием стилей и эффектов) растровые изображения (внедряемые в SVG–документ) произвольные заливки, штриховки, градиенты, заливки заданным растром, а также произвольным фрагментом векторного изображения, разнообразные стили линий - линии произвольной толщины, штриховые, с различными стилями угловых и конечных точек поддержка прозрачности всего изображения или его части, с заданной степенью возможность применения фильтров (размытие, попиксельное смешивание, наложение) поддержка Unicode – возможность отображения в одном SVG документе текстов на различных языках и различными шрифтами встроенные развитые средства анимации, позволяющие без программирования в режиме реального времени менять практически все атрибуты изображения или его фрагмента встроенные средства для создания интерактивности, а также поддержка JavaScript и DOM поддержка каскадных таблиц стилей (CSS)
Масштабируемая векторная графика Название отражает следующие превосходства языка: SVG–документы могут быть отображены на самых различных устройствах – от экранов мобильных телефонов и карманных компьютеров(рис) до мониторов PC и ноутбуков SVG–документы представляются в векторном формате, следовательно, их можно масштабировать без потери качества по сравнению с растровыми изображениями SVG–графика может быть создана "на лету« при помощи любого языка программирования (Javascript, Java или C#) и возможно управление видом этой графики в режиме работы приложения.
Разработка Объектная модель 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 был принят в качестве спецификации консорциумом в сентябре 2001 г. Стандарт SVG 1.1 и его версии SVG mobile profiles были приняты консорциумом в качестве рекомендации в январе 2003 г. Ведутся работы по созданию стандарта SVG 1.2. Эта версия языка будет содержать ряд новых свойств: встроенные атрибуты фигурного форматирования текста, поддержка аудио и видео, а также более полная поддержка DOM.
Поддержка SVG браузерами В настоящее время SVG применяется в Интернете сравнительно мало. На сайтах, где используются SVG, оно не представляется непосредственно, а конвертируется в растровое изображение. Для этого используются различные библиотеки, например Batik (на языке Java), которые "на лету" выполняют преобразования. Браузеры Internet Explorer 7, Opera (начиная с 8-й версии) и Mozilla способны самостоятельно, без дополнительных утилит воспроизводить формат SVG. Что касается прочих браузеров – в том числе и Internet Explorer 6, то им для воспроизведения нужны плагины. Наиболее распространен Adobe SVG Viewer Имеется также Corel SVG Viewer SVG также может быть встроен в PDF документ. Adobe Acrobat Reader поддерживает SVG начиная с 6-й версии. Для встраивания SVG в PDF существует утилита для Adobe Acrobat Pro. Для мобильных устройств, телефонов и PDA, также существует поддержка SVG. Специально для них были разработаны варианты SVG формата: SVG Tiny (SVGT) and SVG Basic (SVGB). На сайте W3C размещен официальный список программного обеспечения для SVG (http://www.svgi.org/)
Схема зданий – близнецов с возможностью навигации по этажам и просмотра схемы
Создание SVG документов Запускаем блокнот, вводим в него код Шаблон документа SVG выглядит следующим образом: Атрибуты width и height определяют значения ширины и высоты документа (здесь в пикселях). Внутри тега указывается пространство имен и версия документа при помощи соответствующих тегов xmlns и version. Для правильной интерпретации SVG документа браузерами в принципе (как мы уже убедились), вполне достаточно следующего шаблона: Однако мы будем применять полное описание. Простые элементы графики будут отображаться правильно, но сложные элементы, относящиеся к спецификации 1.1, могут быть не выведены. Лучше сразу привыкать правильно оформлять SVG–документы.
Сохранить, переименовать, открыть Сохраняем его, называя SimpleSVG.txt, меняем расширение файла на SimpleSVG.svg, открываем в браузере (после установки Adobe SVG Viewer) и видим синий прямоугольник
Порядок действий
Значения оси абсцисс возрастают при движении слева направо, а оси ординат – при движении сверху вниз (расположение координатных осей SVG–документа) При загрузке документа в браузер он располагается, начиная с верхнего левого угла видимой области. Поэтому выбранная система координат достаточно удобна.
Для заливки прямоугольника использовано именованное название цвета "blue". SVG графика поддерживает 147 именованных цветов. Документ вместе с прямоугольником будет выглядеть относительно координатных осей теперь так:
Altova XML Spy 2007 Основной инструмент редактирования SVG–обычный текстовый редактор, однако в нем отсутствует подсветка синтаксиса и возможность быстрого просмотра внесенных изменений. При написании этого курса использовался, пожалуй, лучший редактор XML документов – Altova XML Spy 2007 (http://www.altova.com/ (36,3 Мб)). Его также можно применять для создания SVG–файлов. После запуска программы выбираем из списка шаблонов SVG–документ: Пролог нового документа содержит ссылку на упрощенную версию спецификации: Копированием и вставкой эта спецификация заменяется на нужную нам: Программа поддерживает несколько режимов отображения документа – Text, Grid, Browser
Вставка SVG рисунков в HTML – страницы При помощи тега
Вставка SVG рисунков в HTML – страницы При помощи тега
Вставка SVG рисунков в HTML – страницы При помощи тега
