SVG

Масштабируемая векторная графика
Расширение	.svg или .svgz
MIME-тип	image/svg+xml и image/SVG
Разработчик	Консорциум Всемирной паутины
Последний выпуск	SVG Tiny 1.2 SVG 1.1 (Second Edition) SVG 2
Тип формата	Векторная графика
Расширен из	XML
Открытый формат?	Да
Сайт	w3.org/Graphics/S… (англ.)
Медиафайлы на Викискладе

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 228 238 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, и имеющего 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.

• Полностью отсутствует поддержка трёхмерной графики
• SVG наследует все недостатки XML, такие как большой размер файла (впрочем, последний компенсируется существованием сжатого формата SVGZ, однако его использование на данный момент затруднено, так как SVGZ не имеет собственного MIME-типа).
• Сложность использования в крупных картографических приложениях заключается в том, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
• Чем больше в изображении мелких деталей, тем быстрее растёт размер 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. Вместо этого рекомендовано включать в корневой элемент <svg> атрибут baseProfile со значением «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>

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

<?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="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://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>

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

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

• SVG 1.2 (предварительный)
• SVG 1.1
• SVG Мобильный 1.2 (предварительный)
• SVG Мобильный
• SVG Печать
• 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 — свободный векторный графический редактор.
• Sketch — только для macOS.
• Sketsa SVG Editor — редактор SVG-файлов.
• svg-edit — онлайн редактор для современных браузеров. Базируется на JavaScript.

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

• Официальный раздел SVG на сайте W3 консорциума (англ.)
• Список поддерживаемых элементов SVG в браузере Opera (англ.)
• Статьи о возможностях SVG от разработчиков Оперы (англ.)
• FAQ (англ.) о реализации SVG в браузере Mozilla Firefox
• Страница (англ.) формата SVG на сайте Adobe
• Школы консорциума W3C. Введение в SVG  (рус.)
• Открытые SVG клипарты (openclipart.org)
• Описание чертежей в формате SVG (v.sytnik.lviv.ua)  (рус.)
• Как использовать SVG для создания веб-анимации под все типы устройств

• * Бэн Фрэйн. Глава 7. Использование SVG для достижения независимости от разрешения. // 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.