Scalable Vector Graphics (сокращенно SVG) (с англ. Маштабовна векторная графика) - спецификация языка разметки основанный на XML и формат для двумерной векторной графики, как статической, так и анимированной и интерактивной. SVG может быть исключительно декларативным, или содержать описания сценариев. Изображения могут содержать внешние ссылки путем применения простых XLink -ов. ^[2] Эта спецификация является открытым стандартом, разработанным рабочей группой англ. SVG Working Group организации World Wide Web Consortium.

1. История развития

SVG был разработан рабочей группой W3C SVG Working Group, начиная от 1998, после того как Macromedia и Microsoft ввели Vector Markup Language (VML), и одновременно Adobe Systems и Sun Microsystems представили конкурирующий формат PGML. Рабочую группу возглавил Chris Lilley с W3C.

• SVG 1.0 получил статус рекомендации W3C 4 сентября 2001. ^[3]
• SVG 1.1 стал рекомендации W3C 14 января 2003. ^[4] Спецификация SVG 1.1 имеет модульную структуру, чтобы позволить реализовывать подмножество формата в профилях. Кроме циого, между SVG 1.1 и SVG 1.0 очень мало видминостей.
  • SVG Tiny и SVG Basic (Мобильный профиль SVG) стали рекомендации W3C время, 14 января 2003. Они описаны как профили SVG 1.1.
• SVG Tiny 1.2 стал кандидатом в рекомендации W3C 10 августа 2006. ^{[5] [6]}, и официальной рекомендации W3C - 22 декабря 2008 ^[7]. SVG Full 1.2 является рабочим очерком (W3C Working Draft). SVG Tiny 1.2 сначала был выпущен как профиль, но позже переработан в полноценную спецификацию, включая все необходимые части от SVG 1.1 и SVG 1.2. SVG 1.2 Full добавляет модули внутрь ядра SVGT 1.2.
• SVG Print добавляет многостраничные документы и обязательную поддержку управления цветами.

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

Microsoft присоединилась к W3C SVG Working Group в начале 2010 года ^[12], после длительных колебаний по собственнических решений и конкурирующих решений в области веб-графики.

2. Свойства и преимущества формата

Рисунок демонстрирует разницу между растровой и векторной графикой. Растровое изображение образовано из отдельных точек- пикселей, в то время как векторное изображение образовано из комбинации форм. При увеличении или деформации пиксели растрового изображения становятся заметны, тогда как векторный рисунок сохраняет форму

• Текстовый формат - файлы SVG можно читать и редактировать с помощью обычных текстовых редакторов. Работать с SVG без средств визуального программирования не сложнее чем с HTML. При просмотре документов 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 подключаются через тег , значение атрибута src имя файла с расширением ". Svg", содержащий разметку SVG. Атрибуты 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).

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

Первая строка - стандартный заголовок XML, объявления ( англ. XML declaration ), Указывающий версию XML (version) (обычно "1.0") и кодировку (encoding) (желательно использовать Юникод кодирования UTF-8 или UTF-16, но другие так же допустимы, например, Windows-1251 и KOI-8):

  version  =  "1.0"  encoding  =  "UTF-8"  ?> 

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

  "Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

К сожалению, в некоторых случаях при применении Mozilla Firefox со встроенным браузером SVG, содержание объявления DOCTYPE может быть источником ошибок. Есть рекомендации не использовать декларацию DOCTYPE в SVG версий 1.0 и 1.1. Зато рекомендуется включать атрибут baseProfile в корневой элемент

    ]> 

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

  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%"  > 

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

3.1. Пример

Наш пример

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

Для отображения рисунка нужен браузер со встроенным просмотром формата или с установленным плагином.

  version  =  "1.0"  encoding  =  "Utf-8"  standalone  =  "Yes"  ?>   "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"  >   x  =  "0"  y  =  "0"  width  =  "400"  height  =  "400"  fill  =  "None"  stroke  =  "Black"  stroke-width  =  "5px"  stroke-opacity  =  "0.5"  />   fill-opacity  =  "0.7"  stroke  =  "Black"  stroke-width  =  "0.5px"  >   cx  =  "200px"  cy  =  "200px"  r  =  "100px"  fill  =  "Red"  transform  =  "Translate (0, -50)"  />   cx  =  "200px"  cy  =  "200px"  r  =  "100px"  fill  =  "Blue"  transform  =  "Translate (70, 50)"  />   cx  =  "200px"  cy  =  "200px"  r  =  "100px"  fill  =  "Green"  transform  =  "Translate (-70, 50)"  />   >   > 

4. Сжатие SVGZ

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

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

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

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

6. Сноски