Знакомство с SVG

About

SVG (Scalable Vector Graphics) - это язык разметки масштабируемой векторной графики. SVG предназначен для описания двухмерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так анимированную и интерактивную графику. Это открытый стандарт, является рекомендацией консорциума W3C 1) Консо́рциум Всеми́рной паути́ны - организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. .

Поддержка языка SVG различными браузерами

На данный момент все популярные браузеры в поддерживают SVG, практически в полном объеме. Для просмотра SVG-файлов в старых версиях браузера (н-р IE 6 используются плагины). Один из таких плагинов выпуситала компания Adobe в 2003 году: Adobe SVG Viewer.

Здесь можно посмотреть довольно большой список ПО, которые поддерживает тем или иным образом SVG.

Сравнение форматов Adobe (Macromedia) Flash и SVG

Свойство	SWF (Flash)	SVG
Открытый стандарт, спецификация	нет, Macromedia SWF Specification License (http://www.macromedia.com/software/flash/open/licensing/fileformat/)	да, World Wide Web Consortium (W3C) Specification (http://www.w3.org/TR/SVG/)
Тип данных	Двоичный	Основанный на тексте, может быть прочитан непосредственно
Тип MIME	application/x-shockwave-flash	image/svg+xml
Интерактивность	Есть	Есть
Сжатие	Есть, zlib	Есть, gzip
Размер файлов	В общем случае трудно сказать, какой из файлов – SWF или SVG будет более компактным. Поскольку SWF файлы двоичные, то следует ожидать от них меньшего размера.	С другой стороны формат SVG поддерживает gzip компрессию и конечные SVGZ файлы могут быть сравнимы по размеру (такие документы имеют расширение svgz)
Поддержка браузерами	Большинство браузеров, включая самый распространенный Internet Explorer 6, содержат встроенные плейеры. Размер Adobe Flash Player 9 составляет 1,21 Мб	Не поддерживается браузером Internet Explorer 6. Для отображения нужен плагин Adobe SVG Viever 3.03, размер которого составляет 2,27 Мб
Индексация поисковыми системами	Поддерживается, при помощи специальных средств	Поддерживается, причем описание и ключевые слова можно встраивать в сам SVG–документ
Поддержка графических фильтров	Поддерживаются начиная с flash player 8	Есть
Динамическая поддержка библиотек кода (PHP, XSLT, JSP)	Есть	Есть
Поддержка CSS, XSL, XPath	Труднореализуемо	Есть

Структура SVG документа

Пример простейшего 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="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="0" y="0" width="200" height="200"/> <text x="70" y="100" fill="red" >OSLL</text> </svg>

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

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

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

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

В следующей строке размещается корневой элемент документа с указанием пространства имен SVG (атрибут xmlns):

<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width="100%" height="100%">

В нем также указываются атрибуты width и height, определяющие значения ширины и высоты документа, версия документа при помощи атрибута version. Указание атрибут baseProfilе = “full” заменяет декларацию DOCTYPE в документе.

После описание SVG идет остальной текст документа вложенный в корневой элемент, где собственно располагаются элементы, описывающие содержание кодируемой сцены. Завершается документ всегда закрытием корневого тега </svg> .

Ссылки

Курс по SVG на Интуите
Апачевский тулкит для работы с SVG