SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов (не путать с имитацией трёхмерности путём светотени). Это открытый стандарт, который является рекомендацией консорциума W3C — организации, разработавшей такие стандарты, как HTML и XHTML. В основу SVG легли языки разметки VML и PGML. Разрабатывается с 1999 года. В 2001 году вышла версия 1.1, которая остается актуальной до сегодняшнего дня. В настоящее время в активной разработке находится версия 1.2.
Растровое изображение, сгенерированное из примера SVG, демонстрирует прозрачность,
градиентную заливку, разнообразные контуры и текст. Для просмотра
оригинала потребуется
браузер со встроенной поддержкой SVG, или оборудованный специальным
плагином.
Возможности языка
- Описание путей (англ. path). Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты. Строка с данными задаётся атрибутом
d
тега path
и содержит команды, закодированные набором букв и чисел. Буква определяет тип команды, числа — её параметры (чаще всего — координаты). Команды позволяют описывать фигуры, состоящие из отрезков прямых (L
, H
, V
), кривых Безье (C
, S
, Q
, T
) и дуг (A
). Пример, описывающий звезду из 5 линий, содержит строку данных с командами M
(англ. moveto — переместить) и L
(англ. lineto — нарисовать линию), содержащими в качестве аргументов координаты точек по X и Y.
<path fill="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 элементов.
- SVG предоставляет все преимущества XML:
- Возможность работы в различных средах.
- Интернационализация (поддержка Юникода).
- Широкая доступность для различных приложений.
- Лёгкая модификация через стандартные API — например, DOM. SVG поддерживает стандартизированную W3C объектную модель документа DOM, обеспечивая доступ к любому элементу, что даёт широкие возможности по динамическому изменению элементов, их атрибутов и событий.
- Лёгкое преобразование таблицами стилей XSLT. Как любой основанный на XML формат, SVG дает возможность использовать для его обработки таблицы трансформации (XSLT). Преобразуя XML-данные в SVG с помощью простого XSL, можно легко получить графическое представление любых данных, например визуализировать химические молекулы, описанных на языке CML (Chemical Markup Language).
Недостатки формата
- SVG наследует все недостатки XML, такие как большой размер файла (впрочем, последний компенсируется существованием сжатого формата SVGZ).
- Сложность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
- Чем больше в изображении мелких деталей, тем быстрее растёт размер SVG-данных. Предельный случай — когда изображение представляет собой белый шум. В этом случае SVG не только не даёт никаких преимуществ, но и даже обладает чрезмерно избыточным по отношению к растровому формату размером. На практике, SVG становится невыгоден уже задолго до того, как изображение дойдёт до стадии белого шума.
Структура документа SVG
Первая строка — стандартный XML-заголовок, объявление (англ. XML declaration), указывающее версию XML (version) (обычно «1.0») и кодировку символов (encoding):
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
Во второй и третьей строках должен располагаться заголовок 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 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%">
Далее идёт остальной текст документа вложенный в корневой элемент, где собственно располагаются элементы, описывающие содержание кодируемой сцены.
Завершается документ всегда закрытием корневого тега </svg>
.
Пример
Простой статичный SVG-документ с контуром квадрата размером 400 пикселей и тремя полупрозрачными кругами радиусом 104 пикселей, по центру квадрата, каждый круг смещается от центра квадрата примерно на пол радиуса.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
height = "400px" width = "400px">
<rect x="0" y="0" width="400" height="400"
fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5"/>
<g fill-opacity="0.6" stroke="black" stroke-width="0.5px">
<circle cx="200px" cy="200px" r="104px" fill="red" transform="translate( 0,-52)" />
<circle cx="200px" cy="200px" r="104px" fill="blue" transform="translate( 60, 52)" />
<circle cx="200px" cy="200px" r="104px" fill="green" transform="translate(-60, 52)" />
</g>
</svg>
Примечание: Этот код выполняется одинаково в Mozilla Firefox 2.0.0.11 и в Internet Explorer 6.0.2900.2180 (SVG Document Adobe Systems Inc.)
Ещё один пример — прямоугольник с закруглёнными углами, заполняющий всю область отображения:
<?xml version="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">
<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%">
<rect fill="white" x="0" y="0" width="100%" height="100%" />
<rect fill="silver" x="0" y="0" width="100%" height="100%" rx="1em"/>
</svg>
SVGZ
Поскольку код SVG занимает довольно много места, была создана «обёртка» SVGZ, когда SVG сжимают с помощью gzip, а полученному файлу присваивают расширение «SVGZ».
SVG хорошо сжимается, поскольку это текстовый XML-документ, имеющий регулярную структуру.
Поддержка в браузерах
Спецификации стандарта
- SVG 1.2 (предварительный)
- SVG 1.1
- SVG Мобильный 1.2 (предварительный)
- SVG Мобильный
- SVG Печать
- SVG Требования (предварительный)
Программное обеспечение
- Adobe Illustrator версии от 10.0 — векторный графический редактор.
- Adobe GoLive версии от CS2 — HTML-редактор.
- CorelDRAW — векторный графический редактор.
- Inkscape — свободный векторный графический пакет для работы с SVG.
- Microsoft Office Visio – способен сохранять проекты в формат SVG. При этом, файлы SVG, созданные в Microsoft Visio, некорректно отображаются при загрузке на Wikimedia.
- OpenOffice.org Draw — умеет экспортировать графику в файлы формата SVG.
- sK1 — свободный векторный графический редактор.
- Sketsa SVG Editor — редактор SVG-файлов.
- MetaPost — язык программирования, используемый для создания графических иллюстраций.
- librsvg — библиотека, используемая в Mediawiki для работы с SVG[5][6].
- Batik — Java библиотека для генерации, отрисовки и различных манипуляций изображениями в SVG формате и основанный на этой библиотеке SVG-браузер — Squiggle[7].
Примечания
- Редактирование 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 консорциума (англ.)
- Сообщество пользователей, разработчиков и энтузиастов SVG
- Вики об SVG (англ.)
- Список поддерживаемых элементов SVG в браузере Opera
- Статьи о возможностях SVG от разработчиков Оперы
- FAQ (англ.) о реализации SVG в браузере Mozilla Firefox
- Примеры (англ.) использования формата SVG
- Страница (англ.) формата SVG на сайте Adobe
- Школы консорциума W3C. Введение в SVG (рус.)
- Открытые SVG клипарты (openclipart.org)