SVG

SVG (од англ. Scalable Vector Graphics = „размерлива векторска графка“) е дводимензионална векторска графика на основа на XML со поддршка за интерактивности и анимации. Таа е отворен стандард што го изготвува Конзорциумот за Светската пајажина (W3C) почнувајќи од 1999 г.

Размерлива векторска графика
Scalable Vector Graphics

Наставка	.svg, .svgz
MIME-тип	image/svg+xml[1][2]
UTI	public.svg-image
Творец	W3C
Прва верзија	4 септември 2001
Најнова верзија	1.1 (II изд.) / 16 август 2011; пред 13 години (2011-08-16)
Тип на формат	векторски графички формат
Проширен од	XML
Отворен формат?	да
Мреж. место	w3.org/Graphics/SVG/

Сликава ја прикажува разликата помеѓу растерска и векторска слика. Растерската е составена од одреден број на точки, а векторската се состои од даден број на облици. Со зголемување на сликата, кај растерската графика ги добиваме точките од кои е составена, додека пак векторската ги запазува облиците какви што се.

SVG-сликите и нивното поведение се зададени текстуално во XML-податотеки. Ова значи дека истите можат да се пребаруваат, индексираат, сценираат (со скрипта) и, по потреба, да се збиваат. Како XML-податотеки, сликите во форматот SVG можат да се создаваат и уредуваат со секој уредник на текст, но работата со нив е најзгодна во програми за цртање како Inkscape. Предноста на векторската графика е тоа што на сликите можат да се зголемуваат до бесконечност без никакви промени или загуби.

Денес сите позастапени прелистувачи како Mozilla Firefox, Internet Explorer 9 и 10, Google Chrome, Opera и Safari имаат поддршка за SVG во поголема или помала мера, и можат непосредно да исцртуваат (рендерираат) графички код.

Преглед

Развојот на SVG почнува уште во 1999 г. од група фирми во состав на W3C, откако во 1998 биле поднесени конкурентни стандарди јазик за означување на прецизна графика (PGML, изведен од PostScript на Adobe) и јазикот за векторско означување (VML, од RTF на Microsoft) и искористени се нивните искуства.^[3]

SVG допушта три вида на графички објекти: векторска графика, растерска графика, и текст. Графичките објекти, вклучувајќи ги растерските слики од форматите PNG и JPEG, можат да се групираат, стилизираат, вметнуваат/придодаваат во претходно исцртани објекти. SVG не нуди непосредна поддршка за z-индекси^[4] што ај двојат редоследот на исцртување од редоследот во документот кај објектите што се преклопуваат, за разлика од некои други векторски графички јазици како VML. Текстот може да биде во било кој XML-именски простор соодветен за намената, кој ја достапноста на SVG-графиката и овозможува пребарливост на текстот. Во овој збир можности спаѓаат и трансформации, патеки за потсек, алфа-маски, филтерски ефекти, шаблонски објекти и менување на големината.

Почнувајќи од 2001 г, уредбата на SVG е надградена на верзија 1.1 (тековната препорака) и верзија 1.2 (сè уште работен нацрт). Препораката наречена SVG Mobile е предвидена со два упростени „профили“ на SVG 1.1, наречени SVG Basic и SVG Tiny, наменети за уреди со ограничени сметачки и приказни можности. SVG Tiny подоцна станал самостојна препорака (тековна верзија е 1.2) и претставува основа за SVG 1 февруари Покрај овие варијанти и профили, постои и уредба SVG Print (сè уште работен нацрт) со насоки за документи во SVG 1.2 и SVG Tiny 1.2 наменети за печатарството.

Печатење

Иако главна задршка на уредбата во SVG е означниот јазик за векторска графика, во него се предвидени основни можности за јазик за опис на страница (PDL), како што е PDF на Adobe. Подготвен е со можност за богата графика и складност со каскадни стилски страници (CSS) за стилски цели. Така, тој се разликува од XHTML, чија главна цел е општење на содржини, а не ликовно претставување и укажува кои објекти треба да се прикажа, но не и каде треба да стојат. Наспроти тоа, SVG е идеален за употреба во печатарството, бидејќи ги содржи сите функции што го ставаат секој глиф и секоја слика на саканото место во конечниот изглед на страницата.^[5] Во најново време се изготвува многу поспецијализиран вид на SVG, наречен „SVG Print“ на кого работат Canon, HP, Adobe и Corel) и засега е во облик на работна нацрт-верзија.^[6]

Сценирање и анимација

Цртежите во SVG можат да бидат динамични и интерактивни. Видоизмените на графиката во однос на времетраењето се задаваат јазикот SMIL, или пак можат да се испрограмираат во сценариски (скриптен) јазик (како на пр. ECMAScript или JavaScript). W3C го препорачува SMIL како претпочитан стандард за анимирање во SVG.^[7] На секој графички објект може да му се зададе богата палета на активности како оние поттикнати од доведување на глушецот врз објектот (onmouseover) и негово стискање (onclick).

Збивање

Бидејќи се во XML, SVG-сликите содржат многу повторливи делови текст, па затоа се мошне погодни за алгоритми за беззагубно збивање (компресија). Кога една SVG-слика ќе се набие со соодветниот алгоритам gzip, тогаш се нарекува „SVGZ“-слика и ја има наставката .svgz. Сите места што прикажуваат слики од SVG 1.1, воедно прикажуваат и набиени слики.^[8] Една SVGZ-податотека има големина 20-50% од изворната.^[9]

Можности

Четирите основни елементи на SVG-графиката: правоаголник, кружница и елипса, патека и многуаголник.

Уредбата SVG 1.1 определува 14 видови можности со свои функции:^[10]

Патеки

На сликата се исцртуваат прости или сложени (повеќеелементни) обливи со криви или прави линии што можат да се исполнуваат, контурираат или употребат како исечок. Патеките имаат компактно кодирање. На пример M (се однесува на move to, „премести на“) им претходи на првичните бројчени координати x и y , а L (line to, „линија кон“) ѝ претходи на точката до која ќе се протега линијата што треба да се нацрта. Други наредбени букви (C, S, Q, T и A) стојат пред податоците со кои се цртаат разни Безјеови и елиптични криви. Патеката се затвора со Z. Во сите случаи, пред апсолутните координати стојат големите наредеени букви, а пред релативните координати стојат исти такви мали букви.^[11]

Основни облици

Можат да се цртаат патеки од прави линии и патеки составени од поврзани отсечки, покеај затворените многуаголници, кружници и елипси. Стандардни елементи се и правоаголниците и заоблените правоаголници.^[12]

Текст

Уникодните знаци што се содржат во една SVG-податотека се изразени како податоци во XML. Можни се многу визуелни ефекти, а уредбата на SVG автоматски работи со двонасочен текст (на пр. за составување на арапски и македонски текст), вертикален текст (како кинескиот во минатото) и текст по закривена патека (како текст околу логоа и амблеми).^[13]

Сликање

Облиците можат да се насликаат и/или контурираат (со боја, постепено нијансирање или шара). Полнетиците можат да бидат непроѕирни или со извесен степен на проѕирност. На темињата на многуаголниците (т.е. на краевите на линиите) можат да се ставаат „бележници“ како стрелки или симболи.^[14]

Бои

Боите можат да се применат врз сите видливи SVG-елементи, било непосредно или преку „полнетица“ (fill), „потег“ (stroke) и други својства. Боите се укажуваат на истиот начин како стилските стрници CSS2, т.е. со употреба на називи како black (црна) или blue (сина) во шеснаесетеречен облик како #2f0 или #22ff00, десетично како rgb(255,255,127) или пак како постотоци во обликот rgb(100%,100%,50%).^[15]

Постепено нијансирање и шари

Облиците во SVG можат да се исполнуваат и контурираат со полни бои на гореопишаниот начин, но и со постепено нијансирање на боите или со повторливи шари. Постепеното нијансирање на боите може да биде линеарно или кружно (радијално) и може да се врши со било колку бои и повторувања. Може да се укаже и нијансирањето на проѕирноста. Шарите се засноваат на претходно зададени растерски или векторски графички објекти, кои можат да се повторуваат во насока x и/или y. Постепените нијансирања и шарите можат да се анимираат и сценираат.^[16]

Во последно време^[17][18] професионалните корисници на SVG се залагаат за додавање на можностите за мрежно нијансирање или, по можност, дифузни криви. Причината е тоа што дури и простата примена на дифузни криви дава дури и најсуптилни ефекти на сенки и сенчење"^[19] и дека сликите со дифузни криви се споредливи по квалитет и кодна ефикасност со мрежното нијансирање, но се поедноставни за создавање и дека можат да се добиваат од растерски слики по наполно автоматски пат."^[20]

Исечоци, маскирање и придодавање

Графичките елементи заедно со текстот, патеките и основните облици (фигури) и нивните комбинации можат да се користат како контури што можат да независно една од друга се сликаат (со бои, постепено нијансирање и шари). Бојата и проѕирноста на секој пиксел од конечната слика можат да се добијат со меѓусебно придодавање и пресметка на непроѕирни патеки за исечоци (clipping paths) и полупроѕирни маски (постапка наречена алфа-мешање.^[21]

Пример за употреба на матен филтер во SVG-графика.

Филтерски ефекти^[22]

Интерактивност

SVG-сликите се интераквитни за корисниците на повеќе начини. Покрај долуспоменатите хиперврски, сите делови од една SVG-слика можат да се направат чувствителни на потези на корисникот како сосредоточување (истакнување), стисоци со глушецот, лизгање по сликата, нејзино приближување/одделечување и други постапки со стрелка, тастатура и документот. Програмот може да ја пушта, запира и менува анимацијата, како и да повикува сценарија како одговор на тие настани.^[23]

Врски

Сликите можат да содржат хиперврски до други документи, користејќи го XLink. URL-адресите на сликите можат да укажуваат геометриски трансформации во делот за извадоци.^[24]

Сценирање

Сите аспекти на еден SVG-документ можат да се менуваата со сценирање (скрпти) слично како што тоа се прави во HTML. Основно зададениот сценариски јазик е ECMAScript (во блиско сродство со JavaScript) и затоа постојат зададени DOM-објекти за секој SVG-елемент и атрибут. Сценаријата се заградуваат со елементите <script> (т.е. се ставаат на почетокот и на крајот). Тие можат да работат како одговор на нешто направено со стрелката на глушецот, тастатурата или со документот како таков.^[25]

Анимирање

Шематски пример на една анимација во SVG. Истовремено е анимирано исполнувањето со боја и трансформациите на фигурата во период од 5 секунди.

Содржините во SVG можат да се анимираат со вградени елементи како <animate>, <animateMotion> и <animateColor>. Ова може да се прави со менување на DOM користејќи ECMAScript и со вградените времебројачи на сценарискиот јазик. Анимирањето во SVG е предвидено за да биде складно со тековната и идните верзии на SMIL. Анимациите можат да бидат непрекинати, можат да се повторуваат (целите одново или нивни делови) и да реагираат на нешто активност од страна на корисникот според гореспоменатото.^[26]

Фонтови

Како и кај HTML и CSS, текстот во SVG може да се повикува на надворешни фонтовски податотеки, како што се системските фонтови. Ако бараните фонтови не постојат на сметачот кајшто се отвора сликата, текстот може да не се испише како што треба. За да се избегне ова, текстот може да се прикаже во „SVG-фонт“, каде бараните глифови се задаваат во SVG како фонт кој потоа се повикува од елементот <text>.^[27]

Метаподатоци

Во согласност со иницијативата Семантичка пајажина на W3C, корисникот има можност за ставање на метаподатоци за содржината на секоја SVG-слика. Ова се прави преку елементот <metadata>, каде документот се опишува со метаподаточни својства во Dublin Core (на пр. наслов, творец/автор, предметна определница, опис итн). Можат да се користат и други метаподаточни шеми. Покрај сево ова, во SVG се зададени и елементи <title> и <desc>, каде авторите можат да внесат описен материјал за сликата во прост текст за да за да се овозможи индексирање, пребарување и добивање на различни начини.^[28]

Еден SVG-документ може да дава определби на составните делови како облици, постепено нијансирање итн и да ги користи на повторлив начин. Секоја SVG-слика може да содржи и растерска графика како слики во форматите PNG и JPEG, како и други SVG-слики.

Поврзано

• Географски информациски систем
• Векторска графика
• Векторизација
• Преод кон SVG

Наводи

1. „M Media Type registration for image/svg+xml“. W3C. 22 декември 2008. Посетено на 29 август 2010.
2. „XML Media Types, RFC 3023“. Internet Engineering Task Force. јануари 2001. стр. 24. Посетено на 29 август 2010.
3. „Secret Origin of SVG“. W3C. 21 декември 2007. Посетено на 1 јануари 2011.
4. „Scalable Vector Graphics (SVG) 1.2 W3C Working Draft § 4.2-Drawing Order“. W3C. 15 ноември 2002. Посетено на 29 август 2010.
5. Alex, Danilo; Fujisawa, Jun (2002). „SVG as a Page Description LanguageSVG as a Page Description Language“. SVG Open. Посетено на 24 февруари 2010.
6. Alex, Danilo; Craig Northway, Andrew Shellshear, Anthony Grasso, Chris Lilley (21 декември 2007). „SVG Print 1.2, Part 2: Language“. W3C. Посетено на 24 февруари 2010.CS1-одржување: повеќе имиња: список на автори (link)
7. Paul, Festa (9 јануари 2003). „W3C releases scripting standard, caveat“. CNet. Посетено на 24 февруари 2010.
8. Погл. http://www.w3.org/TR/SVG11/conform.html#ConformingSVGViewers which states, "SVG implementations must correctly support gzip-encoded [RFC1952] and deflate-encoded [RFC1951] data streams, for any content type (including SVG, script files, images)."
9. „Saving compressed SVG (SVGZ)“. SVG Zone. Adobe Systems. 14 јули 2009. Посетено на 24 февруари 2010.
10. „Scalable Vector Graphics (SVG) 1.1 Specification“. W3C. 14 јануари 2003. Посетено на 24 февруари 2010.
11. „Уредба на SVG: Патеки“. W3C. 14 јануари 2003. Посетено на 19 октомври 2009.(англиски)
12. „Уредба на SVG: Основни облици“. W3C. 14 јануари 2003. Посетено на 19 октомври 2009. (англиски)
13. „Уредба на SVG: Текст“. W3C. 14 јануари 2003. Посетено на 19 октомври 2009. (англиски)
14. „Уредба на SVG: Сликање: Исполнување, потези и симболи за бележење“. W3C. 14 јануари 2003. Посетено на 19 октомври 2009. (англиски)
15. „Уредба на SVG: Бои“. W3C. 14 јануари 2003. Посетено на 19 октомври 2009. (англиски)
16. „Уредба на SVG: Постепено нијансирање и шари“. W3C. 14 јануари 2003. Посетено на 19 октомври 2009. (англиски)
17. „IRC log of svg on 2008 ноември 17“. W3C. 2008. Посетено на 25 мај 2009. DS: Priorities should be layout, diffusion curves, 2.5D and make sure we work well with CSS on that
18. „Propositions for the next SVG spec“. W3C. 16 мај 2009. Посетено на 25 мај 2009. Indeed, we do plan to add new gradient capabilities to SVG in the next version, and we are looking into diffusion curves, which I think will meet your needs ... *Diffusion curves* seems really a great idea.
19. Rusin, Zack (2008). „SVG in KDE: Freedom of Beauty“. SVG Open. Посетено на 25 мај 2009.
20. Orzan, Alexandrina; Adrien Bousseau, Holger Winnemöller, Pascal Barla, Joëlle Thollot, David Salesin (2008). „Diffusion Curves: A Vector Representation for Smooth-Shaded Images“ (PDF). ACM Transactions on Graphics (Proceedings of SIGGRAPH 2008). 27. Архивирано од изворникот (PDF) на 2009-06-18. Посетено на 25 мај 2009.CS1-одржување: повеќе имиња: список на автори (link)
21. „Уредба на SVG: Исечоци, маскираењ и придодавање“. W3C. 14 јануари 2003. Посетено на 19 октомври 2009. (англиски)
22. „Уредба на SVG: Филтерски ефекти“. W3C. 14 јануари 2003. Посетено на 19 октомври 2009. (англиски)
23. „Уредба на SVG: Интерактивност“. W3C. 14 јануари 2003. Посетено на 19 октомври 2009. (англиски)
24. „Уредба на SVG: Врски“. W3C. 14 јануари 2003. Посетено на 19 октомври 2009. (англиски)
25. „Уредба на SVG: Сценирање“. W3C. 14 јануари 2003. Посетено на 19 октомври 2009. (англиски)
26. „Уредба на SVG: Анимирање“. W3C. 14 јануари 2003. Посетено на 19 октомври 2009. (англиски)
27. „Уредба на SVG: Фонотови“. W3C. 14 јануари 2003. Посетено на 19 октомври 2009. (англиски)
28. „Уредба на SVG: Метаподатоци“. W3C. Посетено на 19 октомври 2009. (англиски)

Надворешни врски

„SVG“ на Ризницата ?

• Уредби за SVG - список на примени од W3C (англиски)
• SVG на Curlie (англиски)
• Примери за SVG Архивирано на 7 јануари 2013 г. - многу примери за SVG-анимации, филтри и поплочувања (англиски)
• SVG Elves Архивирано на 22 јануари 2013 г. - напатствија од заедницата и нивни кодовни творби (англиски)
• Наполно размерливо мрежно место Архивирано на 15 јануари 2013 г. - без HTML и какви било додатоци (англиски)