Еда

SVG (от англ.  масштабируемая векторная графика) язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так анимированную и интерактивную графику или, в иных терминах, декларативную и скриптовую. Это открытый стандарт, является рекомендацией консорциума W3C, организации, разработавшей такие стандарты, как HTML и XHTML. Разрабатывается с 1999 года, в 2001 году вышла 1.1 версия, которая остается актуальной до сегодняшнего дня, в активной разработке версия 1.2. В основу SVG легли языки разметки VML и PGML.

Возможности языка

• Описание путей (англ. ). Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты. Строка с данными задаётся атрибутом d тега path и содержит команды, закодированные набором букв и чисел. Буква определяет тип команды, числа её параметры (чаще всего координаты). Команды позволяют описывать фигуры, состоящие из отрезков прямых (L, H, V), кривых Безье (C, S, Q, T) и дуг (A). Пример, описывающий звезду из 5 линий, содержит строку данных с командами M (англ.  переместить) и L (англ.  нарисовать линию), содержащими в качестве аргументов координаты точек по X и Y.

• Описание основных геометрических фигур (многоугольники, прямоугольники, окружности и т. п.).
• Широкой спектр визуальных свойств, которые можно применить к фигурам и путям: окраска, прозрачность, скругление углов и т. д.
• Интерактивность. На каждый отдельный элемент и на целое изображение можно повесить обработчик событий (клик, перемещение, нажатие клавиши и т.д), таким образом, пользователь может управлять рисунком (например перемещать мышкой некоторые элементы ).
• Анимация и сценарии. С помощью 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 (англ. ). Отображением (форматированием и декорированием) SVG элементов можно управлять с помощью таблицы стилей CSS 2.0 и её расширений, либо напрямую с помощью атрибутов SVG элементов.

• SVG предоставляет все преимущества XML:
  • Возможность работы в различных средах.
  • Интернационализация (поддержка Юникода).
  • Широкая доступность для различных приложений.
  • Лёгкая модификация через стандартные API например, DOM. SVG поддерживает стандартизированную W3C объектную модель документа DOM, обеспечивая доступ к любому элементу, что даёт широкие возможности по динамическому изменению элементов, их атрибутов и событий.
  • Лёгкое преобразование таблицами стилей XSLT. Как любой основанный на XML формат, SVG дает возможность использовать для его обработки таблицы трансформации (XSLT). Преобразуя XML-данные в SVG с помощью простого XSL, можно легко получить графическое представление любых данных, например визуализировать химические молекулы, описанных на языке CML (Chemical Marup Language).

Недостатки формата

• SVG наследует все недостатки XML, такие как большой размер файла (впрочем, последний компенсируется существованием сжатого формата SVGZ).
• Сложность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.

Структура документа SVG

Первая строка стандартный XML-заголовок, объявление (англ. ), указывающее версию XML (version) (обычно 1.0) и кодировку символов (encoding):

Во второй и третьей строках должен располагаться заголовок DOCTYPE, определяющий тип документа (англ. ) DTD:

К сожалению, в некоторых случаях при применении Mozilla Firefox со встроенным просмотрщиком SVG содержание объявления DOCTYPE может быть источником ошибок. Имеются рекомендации не использовать декларацию DOCTYPE в SVG версий 1.0. Вместо этого рекомендовано включать атрибут baseProfile в корневой элемент <svg> со значением full.

Если по каким-то причинам декларация DOCTYPE в документе необходима, рекомендовано использовать пустую декларацию, как в примере.

В четвёртой строке размещается корневой элемент документа с указанием пространства имен SVG.

Далее идёт остальной текст документа вложенный в корневой элемент, где собственно располагаются элементы, описывающие содержание кодируемой сцены.

Завершается документ всегда закрытием корневого тега </svg> .

Простой статичный SVG-документ с контуром квадрата размером 400 пикселей и тремя полупрозрачными кругами радиусом 100 пикселей, по центру квадрата, каждый круг смещается от центра квадрата примерно на пол радиуса.

Примечание: Этот код выполняется одинаково в Mozilla Firefox 2.0.0.11 и в Internet Explorer 6.0.2900.2180 (SVG Document Adobe Systems Inc.)

Ещё один пример прямоугольник с закруглёнными углами, заполняющий всю область отображения:

SVGZ

Поскольку код SVG занимает довольно много места, была создана обёртка SVGZ, когда SVG сжимают с помощью gzip, а полученному файлу присваивают расширение SVGZ.

SVG хорошо сжимается, поскольку это текстовый XML-документ, имеющий регулярную структуру.

Поддержка в браузерах

В январе 2010 Microsoft вступила в рабочую группу W3C SVG. На конференции MIX 2010 Microsoft показала Internet Explorer 9, в котором появилась поддержка формата SVG. В preview3 версии уровень поддержки уже составляет 52.55

Спецификации стандарта

• SVG 1.2 (предварительный)
• SVG 1.1
• SVG Мобильный 1.2 (предварительный)
• SVG Мобильный
• SVG Печать
• SVG Требования (предварительный)

Программное обеспечение

• Inscape свободный векторный графический пакет для работы с SVG.
• OpenOffice.org Draw умеет экспортировать графику в файлы формата SVG.
• sK1 векторный графический редактор.
• Adobe Illustrator версии от 10.0.
• Adobe GoLive версии от CS2.
• CorelDRAW векторный графический редактор.
• Visio векторный графический редактор от Microsoft.
• librsvg библиотека, используемая в Mediawii для работы с SVG.¹¹
• Bati Java библиотека для генерации, отрисовки и различных манипуляций с изображениями в SVG формате и основанный на этой библиотеке SVG-браузер Squiggle.