Формат SVG

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

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

  • векторную графику (линии, окружности, кривые)
  • текст (с форматированием, заданием стилей и эффектов)
  • растровые изображения (внедряемые в SVG–документ).

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

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

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

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

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

  • Inkscape - в качестве основного формата в программе используется SVG.
  • Adobe Edge предназначен для создания простого анимированного контента на открытых стандартах: Использование HTML 5, JavaScript, CSS3.
  • Altova Altova XMLSpy — редактор Введение в XML
  • BlueGriffon HTML, SVG редактор
  • SVG-edit - Web- приложение SVG-Edit, которое распространяется в виде расширения для Firefox или виджета Opera и использует только JavaScript, HTML, Основы работы с CSS и SVG. Работает в офлайновом режиме и не требует подключения к Интернету. В SVG-Edit реализована поддержка растровых изображений, группировка элементов, масштабирование, слои, кривые, смена фона и многое другое.

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>

Ссылки