Масштабируемая векторная графика
Расширение	.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 (отангл. ScalableVectorGraphics —масштабируемаявекторная графика) —язык разметки масштабируемой векторной графики, созданныйКонсорциумом Всемирной паутины (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 включительно описание путей возможно только в пикселях.

<pathfill="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.

<svgversion="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"?><svgversion ="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"><rectx="0"y="0"width="400"height="400"fill="none"stroke="black"stroke-width="5px"stroke-opacity="0.5"/><gfill-opacity="0.6"stroke="black"stroke-width="0.5px"><circlecx="200px"cy="200px"r="104px"fill="red"transform="translate(  0,-52)"/><circlecx="200px"cy="200px"r="104px"fill="blue"transform="translate( 60, 52)"/><circlecx="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"><svgversion="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%"><rectfill="white"x="0"y="0"width="100%"height="100%"/><rectfill="silver"x="0"y="0"width="100%"height="100%"rx="1em"/></svg>

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

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svgwidth="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"><gid="Page-1"stroke="none"stroke-width="1"fill="none"fill-rule="even-odd"><polygonid="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.

• Форматы файлов
• XML
• Графические форматы
• Векторная графика
• Графика в Web
• Стандарты W3C

• ПРО:ИТ:Статьи по алфавиту
• ПРО:ИТ:Последняя правка: в прошлом году
• Википедия:Статьи, требующие конкретизации
• Википедия:Статьи с шаблонами недостатков по алфавиту
• Википедия:Статьи, требующие уточнения времени
• Страницы, использующие волшебные ссылки ISBN