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, type — MIME-тып «image/svg+xml». Атрыбуты width і height вызначаюць памеры вобласці SVG па гарызанталі і па вертыкалі. Элементы SVG сумяшчальныя з HTML, DHTML.
Сумяшчальнасць зCSS (англ. Cascading Style Sheets). Адлюстраваннем (фармаціраваннем і дэкарыраваннем) SVG-элементаў можна кіраваць з дапамогай табліцы стыляў CSS 2.0 і яе пашырэнняў, альбо проста з дапамогай атрыбутаў SVG-элементаў.
Лёгкая мадыфікацыя праз стандартныя API — напрыклад, DOM. SVG падтрымлівае стандартызаваную W3C аб’ектную мадэль дакумента DOM, забяспечваючы доступ да любога элементу, што дае шырокія магчымасці па дынамічнаму змяненню элементаў, іх атрыбутаў і падзей.
Лёгкае пераўтварэнне табліцамі стыляў XSLT. Як любы фармат заснаваны на XML, SVG дае магчымасць выкарыстоўваць для яго апрацоўкі табліцы трансфармацыі (XSLT). Пераўтвараючы XML-даныя ў SVG з дапамогай простага XSL, можна лёгка атрымаць графічнае прадстаўленне любых даных, напрыклад візуалізаваць хімічныя малекулы, апісаныя на мове CML.
SVG атрымлівае ў спадчыну ўсе недахопыXML, такія як вялікі памер файла (зрэшты, апошняе кампенсуецца існаваннем сціснутага фармату SVGZ, аднак яго выкарыстанне на дадзены момант ускладнена адсутнасцю ўласнага mime-type для SVGZ).
Складанасць выкарыстання ў буйных картаграфічных праграмах з-за таго, што для правільнага адлюстравання маленькай часткі відарыса дакумент неабходна прачытаць цалкам.
Чым больш у відарысе дробных дэталяў, тым хутчэй расце памер 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»[2].Калі па якім-то прычынах дэкларацыя 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"><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>
Паколькі код SVG займае даволі шмат месца, была створана «абгортка» SVGZ, калі SVG сціскаюць з дапамогай gzip, а атрыманаму файлу прысвойваюць пашырэнне «SVGZ».
SVG добра сціскаецца, паколькі гэта тэкставыXML-дакумент, які мае рэгулярную структуру.
LibreOffice Draw, OpenOffice.org Draw — дазваляе экспартаваць і імпартаваць SVG-файлы.
Microsoft Office Visio — здольны захоўваць праекты ў фармаце SVG. Пры гэтым, файлы SVG, створаныя ў Microsoft Visio, некарэктна адлюстроўваюцца пры загрузцы на Wikimedia.
Batik —Java бібліятэка для генерацыі, адмалёўкі і розных маніпуляцый з відарысамі ў фармаце SVG і заснаваны на гэтай бібліятэцы SVG-браўзер — Squiggle[5].
↑Аднак, у стандартным дыстрыбутыве MediaWiki, прадвызначана прапісаны ImageMagick, што прыводзіць да памылак у пераўтварэнні SVG у PNG, напрыклад, няправільныя межы і адсутнасць празрыстага фону ў атрыманым файле PNG. Выпраўляецца з дапамогай $wgSVGConverter = 'rsvg'.
