Редактирование: SVG

{{Файловый формат
| название      = Масштабируемая векторная графика
| screenshot    = 
| caption       = 
| owner         = [[Консорциум Всемирной паутины]]
| creatorcode   =
| категория     = [[vector graphics|vector image format]]
| container for = 
| contained by  = 
| extended from = [[XML]]
| extended to   = 
| latest release version = Scalable Vector Graphics (SVG) 1.1 (Second Edition)
| latest release date    = 16 августа 2011 
| genre         = [[Векторная графика]]
| free          = Да
| url           = http://www.w3.org/Graphics/SVG/
}}
'''SVG''' (от {{lang-en|'''S'''calable '''V'''ector '''G'''raphics}} — [[масштабируемость|масштабируемая]] [[векторная графика]]) — [[язык разметки]] масштабируемой векторной графики, созданный [[W3C|Консорциумом Всемирной паутины (W3C)]] и входящий в подмножество расширяемого языка разметки [[XML]], предназначен для описания двумерной векторной и смешанной векторно/[[растровая графика|растровой]] графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов (не путать с имитацией трёхмерности путём светотени). Это открытый стандарт, который является рекомендацией консорциума W3C — организации, разработавшей такие стандарты, как [[HTML]] и [[XHTML]]. В основу SVG легли языки разметки [[VML]] и [[PGML]]. Разрабатывается с 1999 года. В 2001 году вышла версия 1.0, в 2011 — версия 1.1, которая остаётся актуальной до сегодняшнего дня. В настоящее время в активной разработке находится версия 2.

[[Файл:Svg.svg|300px|right|thumb|Пример векторного изображения в этом формате, который демонстрирует прозрачность, [[градиент (компьютерная графика)|градиентную заливку]], разнообразные контуры и текст.  И ещё один [https://upload.wikimedia.org/wikipedia/commons/7/78/FusionintheSun.svg Пример файла в формате svg] ]]

== Возможности языка ==
* Описание путей ({{lang-en|path}}). Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты. Строка с данными задаётся атрибутом <code>d</code> тега <code>path</code> и содержит команды, закодированные набором букв и чисел. Буква определяет тип команды, числа — её параметры (чаще всего — координаты). Команды позволяют описывать фигуры, состоящие из [[Отрезок|отрезков прямых]] (<code>L</code>, <code>H</code>, <code>V</code>), [[Кривая Безье|кривых Безье]] (<code>C</code>, <code>S</code>, <code>Q</code>, <code>T</code>) и дуг (<code>A</code>). Пример, описывающий звезду из 5 линий, содержит строку данных с командами <code>M</code> ({{lang-en|moveto}} — переместиться к) и <code>L</code> ({{lang-en|lineto}} — нарисовать линию к), содержащими в качестве аргументов координаты точек по X и Y. В версиях SVG до 1.2 включительно описание путей возможно только в пикселях.
<source lang="xml">
<path fill="none" 
stroke="black" d="M 228 238 L 328 90 L 346 250 L 201 124 L 410 150 L 228 238" />
</source>
* Описание основных геометрических фигур (многоугольники, прямоугольники, окружности и т. п.).
* Широкий спектр визуальных свойств, которые можно применить к фигурам и путям: окраска, прозрачность, скругление углов и т. д.
* [[Интерактивность]]. На каждый отдельный элемент и на целое изображение можно повесить обработчик событий (клик, перемещение, нажатие клавиши и т.д), таким образом, пользователь может управлять рисунком (например — перемещать мышкой некоторые элементы<ref>[http://graphing.ru/d/ Пример страницы, позволяющей создавать и редактировать SVG в браузере]{{ref-ru}}</ref>).
* Анимация и сценарии. С помощью [[ECMAScript]] или [[JavaScript]] можно описывать даже самые сложные сценарии, связанные с математическими вычислениями координат и пропорций фигур. Вместе с интерактивностью и [[SMIL]]-анимацией это даёт очень широкие возможности для разработчиков веб-графики.

== Достоинства формата ==
[[Файл:Bitmap VS SVG ru.svg|300px|thumb|Растровое изображение содержит в себе информацию о точках, а векторное — о фигурах (форме). Здесь показано ключевое преимущество «вектора» над «растром» с точки зрения масштабирования в изобразительных целях.]]
* Текстовый формат — файлы 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 подключаются через тег '''&lt;object&gt;''', значение атрибута data — имя файла с расширением «.svg», содержащего разметку SVG, и имеющего [[Список MIME-типов|MIME-тип]] image/svg+xml. Атрибуты width и height определяют размеры области SVG по горизонтали и по вертикали. Элементы SVG совместимы с HTML и DHTML.
* Совместимость с [[Каскадная таблица стилей|CSS]] ({{lang-en|Cascading Style Sheets}}). Отображением (форматированием и декорированием) SVG-элементов можно управлять с помощью таблицы стилей CSS 2.0 и её расширений, либо напрямую с помощью атрибутов SVG-элементов.
* SVG предоставляет все преимущества [[XML]]:
** Возможность работы в различных средах.
** Интернационализация (поддержка [[Юникод]]а).
** Широкая доступность для различных приложений.
** Лёгкая модификация через стандартные [[API]] — например, [[Document Object Model|DOM]]. SVG поддерживает стандартизированную W3C объектную модель документа DOM, обеспечивая доступ к любому элементу, что даёт широкие возможности по динамическому изменению элементов, их атрибутов и событий.
** Лёгкое преобразование таблицами стилей [[XSLT]]. Как любой основанный на XML формат, SVG даёт возможность использовать для его обработки таблицы трансформации (XSLT). Преобразуя XML-данные в SVG с помощью простого [[XSL]], можно легко получить графическое представление любых данных, например визуализировать химические молекулы, описанных на языке [[Chemical Markup Language|CML]].

== Недостатки формата ==
* Полностью отсутствует поддержка трёхмерной графики
*SVG наследует все недостатки [[XML]], такие как большой размер файла (впрочем, последний компенсируется существованием сжатого формата [[SVGZ]], однако его использование на данный момент затруднено, так как SVGZ не имеет собственного [[Список MIME-типов|MIME-типа]]).
* Сложность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
* Чем больше в изображении мелких деталей, тем быстрее растёт размер SVG-данных. Предельный случай — когда изображение представляет собой [[белый шум]]. В этом случае SVG не только не даёт никаких преимуществ в размере файла, но даже даёт проигрыш по отношению к растровому формату. На практике, SVG становится невыгоден уже задолго до того, как изображение дойдёт до стадии белого шума.

== Структура документа SVG ==
Первая строка — стандартный XML-заголовок, объявление ({{lang-en|XML declaration}}), указывающее версию XML (version) (''обычно «1.0»'') и [[кодировка символов|кодировку символов]] (encoding):
<source lang="xml"><?xml version="1.0" encoding="UTF-8" standalone="no"?></source>

Во второй и третьей строках должен располагаться заголовок '''DOCTYPE''', определяющий тип документа ({{lang-en|Document Type Definitions}}) [[DTD]]:
<source lang="xml"><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"></source>
К сожалению, в некоторых случаях при применении [[Mozilla Firefox]] со встроенным просмотрщиком SVG содержание объявления DOCTYPE может быть источником ошибок. Имеются рекомендации не использовать декларацию DOCTYPE в SVG версий 1.0. Вместо этого рекомендовано включать атрибут ''baseProfile'' в корневой элемент '''&lt;svg&gt;''' со значением «full»<ref>[http://jwatt.org/svg/authoring/#doctype-declaration SVG Authoring Guidelines:Don’t include a DOCTYPE declaration]{{ref-en}}</ref>.

Если по каким-то причинам декларация DOCTYPE в документе необходима, рекомендовано использовать пустую декларацию, как в примере.
<source lang="xml">
<!DOCTYPE svg [ 
    <!-- ваши данные -->   ]>
</source>

В четвёртой строке размещается корневой элемент документа с указанием [[Пространство имён (XML)|пространства имён]] SVG.
<source lang="xml">
<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%"></source>
Далее идёт остальной текст документа вложенный в корневой элемент, где собственно располагаются элементы, описывающие содержание кодируемой сцены.

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

=== Примеры ===
* Простой статичный SVG-документ с контуром квадрата размером 400 [[пиксел]]ей и тремя полупрозрачными кругами радиусом 104 пикселей, по центру квадрата, каждый круг смещается от центра квадрата примерно на полрадиуса.
<source lang="xml">
<?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>
</source>
Примечание: Этот код выполняется одинаково в Mozilla Firefox 2.0.0.11 и в Internet Explorer 6.0.2900.2180 (SVG Document Adobe Systems Inc.)

* Ещё один пример — прямоугольник с закруглёнными углами, заполняющий всю область отображения:
<source lang="xml">
<?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>
</source>

* Жёлтая звезда:
<source lang="xml">
<?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>
</source>

[[Файл:Пример чертежа в SVG формате.svg|300px|thumb|Чертёж выполнен в [[САПР]] КОМПАС-График и экспортирован в SVG-формат]]

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

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

== Поддержка в браузерах ==
{| class="wikitable" style="font-size: 85%; text-align: center; width: auto;"
|-
! браузер
! версия
|-
! style="text-align:left;" | [[Internet Explorer]]
| 9+<ref name="ie9pre">[http://ie.microsoft.com/testdrive/info/ReleaseNotes/Default.html#WPGN  Windows Internet Explorer Platform Preview Release Notes] {{webarchive|url=https://web.archive.org/web/20100419010701/http://ie.microsoft.com/testdrive/info/ReleaseNotes/Default.html |date=2010-04-19 }} {{ref-en}}</ref>
|-
! style="text-align:left;" | [[Mozilla Firefox]]
| 1.5+<ref>{{cite news
 |url=http://www.linux.com/archive/feature/50209
 |title=Review: Firefox 1.5 and Thunderbird 1.5
 |last=Brockmeier|first=Joe
 |date=2005-11-30
 |work=Linux.com
 |lang=en
 |accessdate=2009-11-30}}</ref>
|-
! style="text-align:left;" | [[Netscape Navigator]]
| 9.0+
|-
! style="text-align:left;" | [[Google Chrome]]
| 3.0+
|-
! style="text-align:left;" | [[Safari]]
| 4.0+
|-
! style="text-align:left;" | [[Opera]]
| 8.0+
|}

== Спецификации стандарта ==
* [http://www.w3.org/TR/SVG12/ SVG 1.2 (предварительный)]
* [http://www.w3.org/TR/SVG11/ SVG 1.1]
* [http://www.w3.org/TR/SVGMobile12/ SVG Мобильный 1.2 (предварительный)]
* [http://www.w3.org/TR/SVGMobile/ SVG Мобильный]
* [http://www.w3.org/TR/SVGPrint/ SVG Печать]
* [http://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 Visio|Microsoft Office Visio]] — способен сохранять проекты в формат SVG. При этом, файлы SVG, созданные в Microsoft Visio, некорректно отображаются при загрузке на Wikimedia.
* [[sK1]] — [[свободное программное обеспечение|свободный]] векторный графический редактор.
* [[Sketch]] — только для [[macOS]].
* [[Sketsa SVG Editor]] — редактор SVG-файлов.
* [https://github.com/SVG-Edit/svgedit svg-edit] — онлайн редактор для современных браузеров. Базируется на JavaScript.

=== Инструменты и библиотеки ===
* [[Batik (software)|Batik]] — [[Java]]-библиотека для генерации, отрисовки и различных манипуляций изображениями в SVG-формате и основанный на этой библиотеке SVG-браузер — Squiggle<ref name="xmlgraphics">[http://xmlgraphics.apache.org/batik/tools/browser.html Squiggle].</ref>.
* [[MetaPost]] — язык программирования, используемый для создания графических иллюстраций.
* [[librsvg]] — библиотека, используемая в [[MediaWiki]] для работы с SVG<ref>[http://www.mediawiki.org/wiki/Manual:Image_Administration#SVG Manual:Image Administration — MediaWiki<!-- Заголовок добавлен ботом -->]{{ref-en}}</ref><ref>Однако, в стандартном дистрибутиве MediaWiki по умолчанию прописан ImageMagick, что приводит к ошибкам в преобразовании SVG в PNG, например, неверные границы и отсутствие прозрачного фона в получаемом файле PNG. Устраняется с помощью ''' $wgSVGConverter = 'rsvg'.'''</ref>.
* [http://svgextension.codeplex.com/ SVG Viewer Extension for Windows Explorer] — расширение для [[Проводник Windows|проводника Windows]], позволяющее просматривать в нём SVG-файлы в виде эскизов.
* [http://snapsvg.io/about/ Snap] — библиотека JavaScript для работы с <abbr>SVG.</abbr>

== Примечания ==
{{примечания}}

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

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

{{Стандарты W3C}}
{{Графические форматы}}

[[Категория:XML]]
[[Категория:Графические форматы]]
[[Категория:Векторная графика]]
[[Категория:Графика в Web]]
[[Категория:Стандарты W3C]]