Содержание

Формат SVG

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

SVG включает в себя несколько типов объектов:

Благодаря текстовой природе XML, SVG-файлы могут индексироваться поисковыми серверами, ключевые слова можно встраивать в сам SVG–документ. Таким образом вам не нужно создавать дополнительные метафайлы для поисковых серверов, как это делается в случае с Flash. Объектная модель SVG документа основана на принятом консорциумом W3C стандарте DOM (Document Object Model). SVG также может быть встроен в PDF документ.

Почти все свойства Основы работы с CSS2 могут применяться в SVG в качестве встраиваемых свойств стиля, атрибутов.

Анимация реализована в SVG с помощью языка SMIL, разработанного также консорциумом W3C. Поддерживаются скриптовые языки (JavaScript) на основе спецификации ECMAScript. В SVG обеспечивается событийная модель, отслеживаются события (загрузка страницы, изменение ее параметров, события мыши, клавиатуры и др.) Анимация может запускаться по определенному событию (например «onmouseover» или «onclick»), что придаёт графике интерактивность. У каждого элемента есть свои собственные события, к которым можно привязывать отдельные скрипты.

Программы для работы

SVG является текстовым форматом, это значит, что редактировать векторные картинки можно даже в любом тестовом редакторе.

JavaScript- библиотеки для работы с 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 xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<desc>
		<!-- put a description here -->
	</desc>
	<rect width="300" height="30" fill="blue"/>
</svg>

Ссылки