SVG

мова разметкі вектарнай графікі

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

SVG
SVG Logo.svg
Example of SVG code.png
Пашырэнне .svg або .svgz
MIME image/svg+xml
Распрацаваны Кансорцыум Сусветнага павуціння
Тып фармату vector graphics file format[d][1] і XML application[d]
Пашыраны з XML
Прыклад вектарнай выявы ў гэтым фармаце, які дэманструе празрыстасць, градыентнае заліванне, разнастайныя контуры і тэкст.

Магчымасці мовыПравіць

  • Апісанне шляхоў (англ. path). Дазваляе задаць любую фігуру кампактным радком, якая апісвае шлях ад пачатковай кропкі да канчатковай праз любыя прамежкавыя каардынаты. Радок з дадзенымі задаецца атрыбутам d тэга path і змяшчае каманды, закадаваныя наборам літар і лікаў. Літара вызначае тып каманды, колькасці — яе параметры (часцей за ўсё — каардынаты). Каманды дазваляюць апісваць фігуры, якія складаюцца з адрэзкаў прамых (L, H, V), крывых Без'е (C, S, Q, T) і дуг (A). Прыклад, які апісвае зорку з 5 ліній, змяшчае радок дадзеных з камандамі M (англ. moveto — перамясціць) і L (англ. lineto — намаляваць лінію), якія змяшчаюць у якасці аргументаў каардынаты кропак па X і Y. У версіях SVG да 1.2 ўключна апісанне шляхоў магчыма толькі ў пікселях.
  • Апісанне асноўных геаметрычных фігур (шматвугольнікі, прамавугольнікі, акружнасці і г. д.).
  • Шырокі спектр візуальных уласцівасцяў, якія можна прымяніць да постацяў і шляхоў: афарбоўка, празрыстасць, зкругленне кутоў і г д.
  • Інтэрактыўнасць. На кожны асобны элемент і на цэлае малюнак можна павесіць апрацоўшчык падзей (клік, перамяшчэнне, націск клавішы і гд.), такім чынам, карыстальнік можа кіраваць малюнкам (напрыклад — перамяшчаць мышкай некаторыя элементы[2]).
  • Анімацыя і сцэнары. З дапамогай 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, аднак яго выкарыстанне на дадзены момант абцяжарана, так як SVGZ не мае ўласнага mime-type).
  • Складанасць выкарыстання ў буйных картаграфічных дадатках з-за таго, што для правільнага адлюстравання маленькай часткі выявы дакумент неабходна прачытаць цалкам.
  • Чым больш у малюнку дробных дэталяў, тым хутчэй расце памер 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»[3]. Калі па якім-то прычынах дэкларацыя DOCTYPE ў дакуменце неабходная, рэкамендавана выкарыстоўваць пустую дэкларацыю, як у прыкладзе.

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

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

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

ПрыкладыПравіць

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

Заўвага: Гэты код выконваецца аднолькава ў Mozilla Firefox 2.0.0.11 і ў Internet Explorer 6.0.2900.2180 (SVG Document Adobe Systems Inc.)

  • Яшчэ адзін прыклад — прастакутнік з закругленымі кутамі, які запаўняе ўсю вобласць адлюстравання:
  • Жоўтая зорка:
 
Чарцёж выкананы ў САПР КОМПАС-Графік і экспартаваны ў SVG-фармат

SVGZПравіць

Паколькі код SVG займае даволі шмат месца, была створана «абгортка» SVGZ, калі SVG сціскаюць з дапамогай gzip, а атрыманага файла прысвойваюць пашырэнне «SVGZ».

SVG добра сціскаецца, паколькі гэта тэкставы XML-дакумент, які мае рэгулярную структуру.

Падтрымка ў браўзэрахПравіць

браўзэр версія
Internet Explorer 9+[4]
Mozilla Firefox 1.5+[5]
Netscape Navigator 9.0+
Google Chrome 3.0+
Safari 4.0+
Opera 8.0+

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

Праграмнае забеспячэннеПравіць

ДадаткіПравіць

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

Зноскі

  1. https://www.w3.org/Graphics/SVG/ Праверана 6 кастрычніка 2016.
  2. Прыклад старонкі, якая дазваляе ствараць і рэдагаваць SVG у браўзеры (руск.) 
  3. SVG Authoring Guidelines:Don’t include a DOCTYPE declaration(англ.) 
  4. Windows Internet Explorer Platform Preview Release Notes Архівавана 19 красавіка 2010 года. (англ.) 
  5. Brockmeier, Joe. Review: Firefox 1.5 and Thunderbird 1.5 (англ.), Linux.com (30 November 2005). Проверено 30 ноября 2009.
  6. Squiggle.
  7. Manual:Image Administration — MediaWiki (англ.) 
  8. Однако, в стандартном дистрибутиве MediaWiki, по умолчанию прописан ImageMagick, что приводит к ошибкам в преобразовании SVG в PNG, например, неверные границы и отсутствие прозрачного фона в получаемом файле PNG. Устраняется с помощью $wgSVGConverter = 'rsvg'.