SVG

Пашырэнне	.svg або .svgz
MIME	image/svg+xml і image/SVG
Распрацаваны	Кансорцыум Сусветнага павуціння
Тып фармату	vector graphics file format[d], XML-based format[d] і file format family[d]
Пашыраны з	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 228 238 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.

Недахопы фармату

• SVG атрымлівае ў спадчыну ўсе недахопы XML, такія як вялікі памер файла (зрэшты, апошняе кампенсуецца існаваннем сціснутага фармату SVGZ, аднак яго выкарыстанне на дадзены момант ускладнена адсутнасцю ўласнага mime-type для SVGZ).
• Складанасць выкарыстання ў буйных картаграфічных праграмах з-за таго, што для правільнага адлюстравання маленькай часткі відарыса дакумент неабходна прачытаць цалкам.
• Чым больш у відарысе дробных дэталяў, тым хутчэй расце памер SVG-даных. Найгоршы выпадак — калі відарыс уяўляе сабой белы шум. У гэтым выпадку SVG не толькі не дае ніякіх пераваг у памеры файла, але нават дае пройгрыш адносна да растравага фармату. На практыцы, SVG становіцца нявыгадным ужо задоўга да таго, як відарыс дойдзе да стадыі белага шуму.

Структура дакумента SVG

Першы радок — стандартны XML-загаловак, аб’ява (англ. XML declaration), якая паказвае версію XML (version) (звычайна «1.0») і кадоўку знакаў (encoding):

У другім і трэцім радках павінен размяшчацца загаловак DOCTYPE, які вызначае тып дакумента (англ. Document Type Definitions) DTD:

На жаль, у некаторых выпадках пры ўжыванні Mozilla Firefox з убудаваным просмотрщиком SVG ўтрыманне аб’явы DOCTYPE можа быць крыніцай памылак. Маюцца рэкамендацыі не выкарыстоўваць дэкларацыю DOCTYPE ў SVG версій 1.0. Замест гэтага рэкамендавана ўключаць атрыбут baseProfile ў каранёвай элемент <svg> са значэннем «full». Калі па якім-то прычынах дэкларацыя DOCTYPE ў дакуменце неабходная, рэкамендавана выкарыстоўваць пустую дэкларацыю, як у прыкладзе.

У чацвёртым радку размяшчаецца каранёвай элемент дакумента з указаннем прасторы імёнаў SVG.

Далей ідзе астатні тэкст дакумента укладзены ў каранёвай элемент, дзе, уласна, размяшчаюцца элементы, якія апісваюць змест кодируемой сцэны.

Завяршаецца дакумент заўсёды закрыццем каранёвага тэга </svg> .

Прыклады

• Просты статычны SVG-дакумент з контурам квадрата памерам 400 пікселяў і трыма напаўпразрыстымі коламі радыусам 104 пікселяў, па цэнтры квадрата, кожны круг ссоўваецца ад цэнтра квадрата прыкладна на полрадиуса.

Заўвага: Гэты код выконваецца аднолькава ў 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 займае даволі шмат месца, была створана «абгортка» 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+

Спецыфікацыі стандарту

• 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.
• MetaPost — мова праграмавання, якая выкарыстоўваецца для стварэння графічных ілюстрацый.
• librsvg — бібліятэка, якая выкарыстоўваецца ў MediaWiki для працы з SVG.
• SVG Viewer Extension for Windows Explorer Архівавана 17 студзеня 2018. — пашырэнне для правадніка Windows, якое дазваляе праглядаць у ім SVG файлы ў выглядзе эскізаў.
• Snap — JavaScript бібліятэка для працы з SVG.