SVG (от англ.Scalable Vector Graphics — масштабируемаявекторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов (не путать с имитацией трёхмерности путём светотени). Это открытый стандарт, который является рекомендацией консорциума W3C — организации, разработавшей такие стандарты, как HTML и XHTML. В основу SVG легли языки разметки VML и PGML. Разрабатывается с 1999 года. В 2001 году вышла версия 1.0, в 2011 версия 1.1 которая остается актуальной до сегодняшнего дня. В настоящее время в активной разработке находится версия 2.
Растровое изображение, сгенерированное из примера SVG, демонстрирует прозрачность, градиентную заливку, разнообразные контуры и текст. Для просмотра оригинала потребуется браузер со встроенной поддержкой SVG, или оборудованный специальным плагином.
Описание путей (англ.path). Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты. Строка с данными задаётся атрибутом d тега path и содержит команды, закодированные набором букв и чисел. Буква определяет тип команды, числа — её параметры (чаще всего — координаты). Команды позволяют описывать фигуры, состоящие из отрезков прямых (L, H, V), кривых Безье (C, S, Q, T) и дуг (A). Пример, описывающий звезду из 5 линий, содержит строку данных с командами M (англ.moveto — переместить) и L (англ.lineto — нарисовать линию), содержащими в качестве аргументов координаты точек по X и Y.
<pathfill="none"stroke="black"d="M 227 239 L 328 90 L 346 250 L 201 124 L 410 150 L 228 238"/>
Описание основных геометрических фигур (многоугольники, прямоугольники, окружности и т. п.).
Широкий спектр визуальных свойств, которые можно применить к фигурам и путям: окраска, прозрачность, скругление углов и т. д.
Интерактивность. На каждый отдельный элемент и на целое изображение можно повесить обработчик событий (клик, перемещение, нажатие клавиши и т.д), таким образом, пользователь может управлять рисунком (например — перемещать мышкой некоторые элементы[1]).
Анимация и сценарии. С помощью ECMAScript или JavaScript можно описывать даже самые сложные сценарии, связанные с математическими вычислениями координат и пропорций фигур. Вместе с интерактивностью и SMIL анимацией это дает очень широкие возможности для разработчиков веб-графики.
Достоинства формата
Растровое изображение содержит в себе информацию о точках, а векторное — о фигурах. Здесь показано ключевое преимущество «вектора» над «растром».
Текстовый формат — файлы SVG можно читать и редактировать (при наличии некоторых навыков) при помощи обычных текстовых редакторов. При просмотре документов, содержащих SVG графику, имеется доступ к просмотру кода просматриваемого файла и возможность сохранения всего документа. Кроме того, SVG файлы обычно получаются меньше по размеру, чем сравнимые по качеству изображения в форматах JPEG или GIF, а также хорошо поддаются сжатию.
Масштабируемость — SVG является векторным форматом. Существует возможность увеличить любую часть изображения SVG без потери качества. Дополнительно, к элементам SVG документа возможно применять фильтры — специальные модификаторы для создания эффектов, подобных применяемым при обработке растровых изображений (размытие, выдавливание, сложные системы трансформации и др.) В тексте SVG-кода фильтры описываются тегами, визуализацию которых обеспечивает средство просмотра, что не влияет на размер исходного файла, обеспечивая при этом необходимую иллюстративную выразительность.
Широко доступно использование растровой графики в SVG документах. Имеется возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG.
Текст в графике SVG является текстом, а не изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами, не нужно создавать дополнительные метафайлы для поисковых роботов.
Анимация реализована в SVG с помощью языка SMIL (Synchronized Multimedia Integration Language), разработанного также консорциумом W3C. Поддерживаются скриптовые языки на основе спецификации ECMAScript. SVG-элементами можно управлять с помощью JavaScript. Применение скриптов и анимации в SVG позволяет создавать динамичную и интерактивную графику. В SVG обеспечивается событийная модель, отслеживаются события (загрузка страницы, изменение ее параметров, события мыши, клавиатуры и др.) Анимация может запускаться по определенному событию (например «onmouseover» или «onclick»), что придаёт графике интерактивность. У каждого элемента есть свои собственные события, к которым можно привязывать отдельные скрипты.
SVG — открытый стандарт. В отличие от некоторых других форматов, SVG не является чьей-либо собственностью.
SVG документы легко интегрируются с HTML и XHTML документами. Внешний SVG подключаются через тег <object>, значение атрибута data — имя файла с расширением «.svg», содержащего разметку SVG, type — MIME-тип, то есть image/svg+xml. Атрибуты width и height определяют размеры области SVG по горизонтали и по вертикали. Элементы SVG совместимы с HTML и DHTML.
Совместимость с CSS (англ.Cascading Style Sheets). Отображением (форматированием и декорированием) SVG элементов можно управлять с помощью таблицы стилей CSS 2.0 и её расширений, либо напрямую с помощью атрибутов SVG элементов.
Лёгкая модификация через стандартные API — например, DOM. SVG поддерживает стандартизированную W3C объектную модель документа DOM, обеспечивая доступ к любому элементу, что даёт широкие возможности по динамическому изменению элементов, их атрибутов и событий.
Лёгкое преобразование таблицами стилей XSLT. Как любой основанный на XML формат, SVG дает возможность использовать для его обработки таблицы трансформации (XSLT). Преобразуя XML-данные в SVG с помощью простого XSL, можно легко получить графическое представление любых данных, например визуализировать химические молекулы, описанных на языке CML (Chemical Markup Language).
Недостатки формата
SVG наследует все недостатки XML, такие как большой размер файла (впрочем, последний компенсируется существованием сжатого формата SVGZ, однако его использование на данный момент затруднено, так как SVGZ не имеет собственного mimetype).
Сложность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
Чем больше в изображении мелких деталей, тем быстрее растёт размер SVG-данных. Предельный случай — когда изображение представляет собой белый шум. В этом случае SVG не только не даёт никаких преимуществ в размере файла, но даже даёт проигрыш по отношению к растровому формату. На практике, SVG становится невыгоден уже задолго до того, как изображение дойдёт до стадии белого шума.
Структура документа SVG
Первая строка — стандартный XML-заголовок, объявление (англ.XML declaration), указывающее версию XML (version) (обычно «1.0») и кодировку символов (encoding):
Во второй и третьей строках должен располагаться заголовок DOCTYPE, определяющий тип документа (англ.Document Type Definitions) DTD:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
К сожалению, в некоторых случаях при применении Mozilla Firefox со встроенным просмотрщиком SVG содержание объявления DOCTYPE может быть источником ошибок. Имеются рекомендации не использовать декларацию DOCTYPE в SVG версий 1.0. Вместо этого рекомендовано включать атрибут baseProfile в корневой элемент <svg> со значением «full»[2].
Если по каким-то причинам декларация DOCTYPE в документе необходима, рекомендовано использовать пустую декларацию, как в примере.
<!DOCTYPE svg [ <!-- ваши данные --> ]>
В четвёртой строке размещается корневой элемент документа с указанием пространства имен SVG.
Далее идёт остальной текст документа вложенный в корневой элемент, где собственно располагаются элементы, описывающие содержание кодируемой сцены.
Завершается документ всегда закрытием корневого тега </svg> .
Пример
Простой статичный SVG-документ с контуром квадрата размером 400 пикселей и тремя полупрозрачными кругами радиусом 104 пикселей, по центру квадрата, каждый круг смещается от центра квадрата примерно на полрадиуса.
Примечание: Этот код выполняется одинаково в Mozilla Firefox 2.0.0.11 и в Internet Explorer 6.0.2900.2180 (SVG Document Adobe Systems Inc.)
Ещё один пример — прямоугольник с закруглёнными углами, заполняющий всю область отображения:
<?xmlversion="1.0"encoding="UTF-8"standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svgversion="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%"><rectfill="white"x="0"y="0"width="100%"height="100%"/><rectfill="silver"x="0"y="0"width="100%"height="100%"rx="1em"/></svg>
Чертеж выполнен в КОМПАС-График и экспортирован в SVG формат
SVGZ
Поскольку код SVG занимает довольно много места, была создана «обёртка» SVGZ, когда SVG сжимают с помощью gzip, а полученному файлу присваивают расширение «SVGZ».
SVG хорошо сжимается, поскольку это текстовый XML-документ, имеющий регулярную структуру.
Inkscape — свободный кроссплатформенный векторный графический пакет для работы с SVG.
Microsoft Office Visio — способен сохранять проекты в формат SVG. При этом, файлы SVG, созданные в Microsoft Visio, некорректно отображаются при загрузке на Wikimedia.
Batik — Java библиотека для генерации, отрисовки и различных манипуляций изображениями в SVG формате и основанный на этой библиотеке SVG-браузер — Squiggle[7].
проводника Windows, позволяющее просматривать в нём SVG файлы в виде эскизов.
svg-edit — онлайн редактор для современных браузеров. Базируется на JavaScript.
Примечания
Пример страницы, позволяющей создавать и редактировать SVG в браузере (рус.)
SVG Authoring Guidelines:Don’t include a DOCTYPE declaration (англ.)
Windows Internet Explorer Platform Preview Release Notes (англ.)
Review: Firefox 1.5 and Thunderbird 1.5 (англ.), Linux.com (30 November 2005). Проверено 30 ноября 2009.
Manual:Image Administration — MediaWiki (англ.)
↑Однако, в стандартном дистрибутиве MediaWiki, по умолчанию прописан ImageMagick, что приводит к ошибкам в преобразовании SVG в PNG, например, неверные границы и отсутствие прозрачного фона в получаемом файле PNG. Устраняется с помощью $wgSVGConverter = 'rsvg'.
Squiggle.
Ссылки
Официальный раздел SVG на сайте W3 консорциума (англ.)
