SVG (Scalable Vector Graphics) - это язык разметки масштабируемой векторной графики. SVG предназначен для описания двухмерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так анимированную и интерактивную графику. Это открытый стандарт, является рекомендацией консорциума W3C 1).
На данный момент все популярные браузеры в поддерживают SVG, практически в полном объеме. Для просмотра SVG-файлов в старых версиях браузера (н-р IE 6 используются плагины). Один из таких плагинов выпуситала компания Adobe в 2003 году: Adobe SVG Viewer.
Здесь можно посмотреть довольно большой список ПО, которые поддерживает тем или иным образом 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-документа
<?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> .