Table of Contents
Знакомство с 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> .