SVG

З пляцоўкі Вікіпедыя
Jump to navigation Jump to search
SVG
SVG logo.svg
Пашырэнне .svg або .svgz
MIME image/svg+xml
Распрацаваны Кансорцыум Сусветнага павуціння
Тып фармату графічны фармат[1] і XML application[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 ўключна апісанне шляхоў магчыма толькі ў пікселях.
  • Апісанне асноўных геаметрычных фігур (шматкутнікі, прастакутнікі, акружнасці і г п.).
  • Шырокі спектр візуальных уласцівасцяў, якія можна прымяніць да постацям і шляхах: афарбоўка, празрыстасць, скругление кутоў і г д.
  • Інтэрактыўнасць. На кожны асобны элемент і на цэлае малюнак можна павесіць апрацоўшчык падзей (клік, перамяшчэнне, націск клавішы і гд.), такім чынам, карыстальнік можа кіраваць малюнкам (напрыклад — перамяшчаць мышкай некаторыя элементы[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'.

Шаблон:Фарматы медыяфайлаў