SVG

**SVG** (ад англ. **S**calable **V**ector **G**raphics — вектарная графіка, якая маштабуецца) — мова разметкі вектарнай графікі, якая маштабуецца, створаная Кансорцыумам Сусветнай павуціны (W3C) і ўваходзіць у падмноства пашыраемай мовы разметкі XML, прызначанай для апісання двухмернай вектарнай і змяшанай вектарна/растравай графікі ў фармаце XML. Падтрымлівае як нерухомую, так і аніміраваную інтэрактыўную графіку — або, у іншых тэрмінах, дэкларатыўную і скрыптовую. Не падтрымлівае апісанне трохвымерных аб’ектаў (не блытаць з імітацыяй трохвымернасці шляхам святлаценю). Гэта адкрыты стандарт, які з’яўляецца рэкамендацыяй кансорцыума W3C — арганізацыі, якая распрацавала такія стандарты, як HTML і XHTML. У аснову SVG ляглі мовы разметкі VML і PGML. Распрацоўваецца з 1999 года. У 2001 годзе выйшла версія 1.0, у 2011 — версія 1.1, якая застаецца актуальнай да сённяшняга дня. У цяперашні час у актыўнай распрацоўцы знаходзіцца версія 2.

## Магчымасці мовы 
* Апісанне шляхоў (англ. &#x20;path). Дазваляе задаць любую фігуру кампактным радком, якая апісвае шлях ад пачатковага пункту да канчатковага праз любыя прамежкавыя каардынаты. Радок з данымі задаецца атрыбутам `d` тэга `path` і змяшчае каманды, закадзіраваныя наборам літар і лікаў. Літара вызначае тып каманды, колькасці — яе параметры (часцей за ўсё — каардынаты). Каманды дазваляюць апісваць фігуры, якія складаюцца з адрэзкаў прамых (`L`, `H`, `V`), крывых Без’е (`C`, `S`, `Q`, `T`) і дуг (`A`). Прыклад, які апісвае зорку з 5 ліній, змяшчае радок даных з камандамі `M` (англ. &#x20;moveto — перамясціць) і `L` (англ. &#x20;lineto — намаляваць лінію), якія змяшчаюць у якасці аргументаў каардынаты пунктаў па X і Y. У версіях SVG да 1.2 ўключна апісанне шляхоў магчыма толькі ў пікселях.

```xml

```

* Апісанне асноўных геаметрычных фігур (шматвугольнікі, прамавугольнікі, акружнасці і г. д.).
* Шырокі спектр візуальных уласцівасцяў, якія можна прымяніць да фігур і шляхоў: афарбоўка, празрыстасць, скругленне вуглоў і г д.
* Інтэрактыўнасць. На кожны асобны элемент і на цэлы відарыс можна павесіць апрацоўшчык падзей (націск, перамяшчэнне, націск клавішы і гд.), такім чынам, карыстальнік можа кіраваць відарысас (напрыклад — перамяшчаць мышкай некаторыя элементы).
* Анімацыя і сцэнарыі. З дапамогай 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 падключаюцца праз тэг **&#x3C;object&#x3E;**, значэнне атрыбуту data — імя файла з пашырэннем «.svg», які змяшчае разметку SVG, type — MIME-тып «image/svg+xml». Атрыбуты width і height вызначаюць памеры вобласці SVG па гарызанталі і па вертыкалі. Элементы SVG сумяшчальныя з HTML, DHTML.
* Сумяшчальнасць з CSS (англ. &#x20;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-загаловак, аб’ява (англ. &#x20;XML declaration), якая паказвае версію XML (version) (*звычайна «1.0»*) і кадоўку знакаў (encoding):
```
У другім і трэцім радках павінен размяшчацца загаловак **DOCTYPE**, які вызначае тып дакумента (англ. &#x20;Document Type Definitions) DTD:На жаль, у некаторых выпадках пры ўжыванні Mozilla Firefox з убудаваным просмотрщиком SVG ўтрыманне аб’явы DOCTYPE можа быць крыніцай памылак. Маюцца рэкамендацыі не выкарыстоўваць дэкларацыю DOCTYPE ў SVG версій 1.0. Замест гэтага рэкамендавана ўключаць атрыбут *baseProfile* ў каранёвай элемент **&#x3C;svg&#x3E;** са значэннем «full».

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

Завяршаецца дакумент заўсёды закрыццем каранёвага тэга `&#x3C;/svg&#x3E;` .

### Прыклады 
* Просты статычны SVG-дакумент з контурам квадрата памерам 400 пікселяў і трыма напаўпразрыстымі коламі радыусам 104 пікселяў, па цэнтры квадрата, кожны круг ссоўваецца ад цэнтра квадрата прыкладна на полрадиуса.
Заўвага: Гэты код выконваецца аднолькава ў Mozilla Firefox 2.0.0.11 і ў Internet Explorer 6.0.2900.2180 (SVG Document Adobe Systems Inc.)

* Яшчэ адзін прыклад — прамавугольнік з закругленымі вугламі, які запаўняе ўсю вобласць адлюстравання:

```

* Жоўтая зорка:

```xml

    
        
        
    

```

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

Катэгорыя:Вектарная графіка
Катэгорыя:Графіка ў Web
Катэгорыя:Графічныя фарматы
Катэгорыя:Стандарты W3C
Катэгорыя:Фарматы файлаў