SVG

Масштабируемая векторная графика

Разработчик	Консорциум Всемирной паутины
Последний выпуск	Scalable Vector Graphics (SVG) 1.1 (Second Edition) / 16 августа 2011
Тип формата	Векторная графика
Расширен из	XML
Открытый формат?	Да

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

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

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

<path fill="none" 
stroke="black" d="M 227 239 L 328 90 L 346 250 L 201 124 L 410 150 L 228 238" />

• Описание основных геометрических фигур (многоугольники, прямоугольники, окружности и т. п.).
• Широкий спектр визуальных свойств, которые можно применить к фигурам и путям: окраска, прозрачность, скругление углов и т. д.
• Интерактивность. На каждый отдельный элемент и на целое изображение можно повесить обработчик событий (клик, перемещение, нажатие клавиши и т.д), таким образом, пользователь может управлять рисунком (например — перемещать мышкой некоторые элементы).
• Анимация и сценарии. С помощью 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, однако его использование на данный момент затруднено, так как SVGZ не имеет собственного mime-type).
• Сложность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
• Чем больше в изображении мелких деталей, тем быстрее растёт размер 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"
    "www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

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

<!DOCTYPE svg [ 
    <!-- ваши данные -->   ]>

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

<svg version="1.1"
     baseProfile="full"
     xmlns="www.w3.org/2000/svg"
     xmlns:xlink="www.w3.org/1999/xlink"
     xmlns:ev="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 = "www.w3.org/2000/svg" 
     xmlns:xlink = "www.w3.org/1999/xlink"
     xmlns:ev = "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"
    "www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
     baseProfile="full"
     xmlns="www.w3.org/2000/svg"
     xmlns:xlink="www.w3.org/1999/xlink"
     xmlns:ev="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>

• Желтая звезда:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="198" height="188"
     viewBox="0 0 198 188"
     version="1.1"
     baseProfile="full"
     xmlns="www.w3.org/2000/svg"
     xmlns:xlink="www.w3.org/1999/xlink"
     xmlns:ev="www.w3.org/2001/xml-events">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="even-odd">
        <polygon id="Star-1" stroke="#979797" stroke-width="3" fill="#F8E81C"
            points="99 154 40 185 51 119 4 73 69 64 99 3 128 64 194 73 147 119 158 185 ">
        </polygon>
    </g>
</svg>

SVGZ

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

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

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

браузер	версия
Internet Explorer	9+
Mozilla Firefox	1.5+
Netscape Navigator	9.0+
Google Chrome	3.0+
Safari	4.0+
Opera	8.0+

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

• [www.w3.org/TR/SVG12/ SVG 1.2 (предварительный)]
• [www.w3.org/TR/SVG11/ SVG 1.1]
• [www.w3.org/TR/SVGMobile12/ SVG Мобильный 1.2 (предварительный)]
• [www.w3.org/TR/SVGMobile/ SVG Мобильный]
• [www.w3.org/TR/SVGPrint/ SVG Печать]
• [www.w3.org/TR/SVG2Reqs/ SVG Требования (предварительный)]

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

Приложения

• Adobe GoLive версии от CS2 — HTML-редактор.
• Adobe Illustrator версии от 10.0 — векторный графический редактор.
• CorelDRAW — векторный графический редактор.
• GIMP — свободный кроссплатформенный растровый графический редактор; позволяет открывать SVG файлы, при импорте происходит растеризация с заданным разрешением.
• Inkscape — свободный кроссплатформенный векторный графический редактор; использует SVG как основной формат.
• LibreOffice Draw, OpenOffice.org Draw — позволяет экспортировать и импортировать SVG-файлы.
• Microsoft Office Visio — способен сохранять проекты в формат SVG. При этом, файлы SVG, созданные в Microsoft Visio, некорректно отображаются при загрузке на Wikimedia.
• sK1 — свободный векторный графический редактор, только для Linux.
• Sketch — только для OSX.
• Sketsa SVG Editor — редактор SVG-файлов.
• [code.google.com/p/svg-edit/ svg-edit] — онлайн редактор для современных браузеров. Базируется на JavaScript.

Инструменты и библиотеки

• Batik — Java библиотека для генерации, отрисовки и различных манипуляций изображениями в SVG формате и основанный на этой библиотеке SVG-браузер — Squiggle.
• MetaPost — язык программирования, используемый для создания графических иллюстраций.
• librsvg — библиотека, используемая в MediaWiki для работы с SVG.
• [svgextension.codeplex.com/ SVG Viewer Extension for Windows Explorer] — расширение для проводника Windows, позволяющее просматривать в нём SVG файлы в виде эскизов.
• [snapsvg.io/about/ Snap] — библиотека JavaScript для работы с SVG.

Ссылки

• [www.w3.org/Graphics/SVG/ Официальный раздел SVG на сайте W3 консорциума] (англ.)
• [www.opera.com/docs/specs/presto26/svg/elements/ Список] поддерживаемых элементов SVG в браузере Opera (англ.)
• [dev.opera.com/tags/svg/ Статьи о возможностях SVG от разработчиков Оперы] (англ.)
• [www.mozilla.org/projects/svg/faq.html FAQ] (англ.) о реализации SVG в браузере Mozilla Firefox
• [www.adobe.com/svg/ Страница] (англ.) формата SVG на сайте Adobe
• [xml.nsu.ru/extra/svgintro_0.xml Школы консорциума W3C. Введение в SVG]  (рус.)
• [www.openclipart.org/ Открытые SVG клипарты (openclipart.org)]
• [v.sytnik.lviv.ua/ru/tags/svg-0/ Описание чертежей в формате SVG (v.sytnik.lviv.ua)]  (рус.)
• [www.cmsmagazine.ru/library/items/graphical_design/how-to-use-svg/ Как использовать SVG для создания веб-анимации под все типы устройств]

Литература

• * Бэн Фрэйн. Глава 7. Использование SVG для достижения независимости от разрешения. // [www.htbook.ru/load/kompjutery_i_seti/setevye_tekhnologii/html5_i_css3_razrabotka_sajtov_dlja_ljubykh_brauzerov_i_ustrojstv/7-1-0-327 HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств] = Responsive Web Design with HTML5 and CSS3. Second Edition. PACKT publishing.. — 2 издание. — Санкт-Петербург: Питер, 2017. — С. 175-204. — 272 с. — ISBN 978-1784398934 англ. 978-5-496-02271-2.