C, PHP, VB, .NET

Векторните изображения най-често се създават чрез дефиниране на точки в декартова координатна система, които се свързват с линии (прави или криви по определена формула) и така формират различни геометрични фигури в различни цветове и запълвания. За разлика от растерните изображения, векторните могат да бъдат увеличавани произволно много, без това да води до загуба на качество (което разговорно наричаме „пикселизация“). Причината за това е, че при всяко увеличение формулите се преизчисляват и изображението се начертава наново. Друго основно тяхно предимство е, че при по-прости изображения – такива, които лесно могат да се опишат с математически формули – файловете са с много малък размер. Обратно – подразбира се, че когато изображението е много сложно (например снимка), тогава описването му чрез векторна графика става изключително тежко и тогава векторната графика става неподходяща.

Може би най-честото приложение, което със сигурност ползвате ежедневно, е свързано с шрифтовете – когато пишете и четете текст на компютър, почти винаги се използва шрифт, който е създаден чрез вектори. Действително буквите са сравнително прости геометрични фигури, могат да се опишат лесно с математически формули и освен това често се налага да ги използваме с различна големина. Ще дам пример какво би се случило ако буквите бяха поставяни на екрана като растерни изображения, вместо векторни – при силно увеличение, ще се наблюдава именно пикселизация (вляво на картинката е показана горната част на буквата А увеличена като векторно изображение, а вдясно е същата буква, която съм съхранил като PNG и после съм увеличил):

* Разбира се въпросната картинка, която съм поставил, сама по себе си е растерно изображение и ако продължите увеличението, ще видите, че и качеството на лявата ще се развали по подобие на дясната. Ако обаче направите теста сами – например напишете буквата в Word и дадете огромно увеличение, ще видите, че линиите ще продължават да са гладки и няма да се „нащърбват“.

А как все пак се прави векторната графика? Има най-различни формати от много софтуерни продукти, но тук ще покажа един от най-широко разпространените: Scalable Vector Graphics (SVG), който се използва често в уеб сайтове. В този формат всичко се описва чрез XML (като обикновен текст). Ще започна с пример за изчертаване на една линия:

<svg width="126" height="126" xmlns="http://www.w3.org/2000/svg">
     <line x1="0" y1="126" x2="63" y2="0" style="stroke:black;stroke-width:8" />
</svg>

Ако запишете този текст с помощта на обикновен текстови редактор във файл с разширение „.svg“, ще може да го отворите с уеб браузър и ще видите резултата – това е една черна линия. Може да го вградите и директно в html (версия 5) документ – ще се получи следното:

 

Нека обясня поотделно всеки компонент от кода:

• С <svg…> и </svg> указваме начало и край на изображението;
  • Параметрите width=“126″ и height=“126″ указват височина и ширина в брой пиксели на работния плот, с който ще работим. В този плот има координатна система, чийто център е горната лява точка, абсцисата (x) расте надясно, а ординатата (y) надолу;
  • С xmlns най-просто казано указваме с коя версия на SVG ще работим (за програмистите – от кой namespace ще се взимат по подразбиране елементите);
• С <line… /> създаваме отсечка;
  • Параметрите x1, y1 и x2, y2 са съответно координати на точките от двата края на отсечката. В случая слагаме едната точка в долен ляв ъгъл на работния плот (0,126), а другата в средата на горния ръб (63,0);
  • В допълнителния параметър „style“ указваме, че линията ще е черна и ще е дебела 8 пиксела.

Ако искаме по този начин да изпишем буквата „A“, ще направим още две линии:

<svg width="126" height="126" xmlns="http://www.w3.org/2000/svg">
     <line x1="0" y1="126" x2="63" y2="0" style="stroke:black;stroke-width:8" />
     <line x1="63" y1="0" x2="126" y2="126" style="stroke:black;stroke-width:8" />
     <line x1="20" y1="83" x2="106" y2="83" style="stroke:black;stroke-width:8" />
</svg>

Избробвайте го! Ще получите следния резултат:

 

Опитайте се да направите максимален zoom на страницата – ще видите, че линиите няма да се „нащърбват“ и ще си остават гладки. Това е така, защото при всяко увеличение, бразузъра ще изчертава линията наново.

Естествено с SVG можем да чертаем не само отсечки, а всякакви сложни фигури, да ги оцветяваме, да им прилагаме ефекти, и т.н. – това се прави чрез поставяне на различни обекти с определени техни характеристики. Едно примерно приложение на тази технология е в уебсайтовете, когато трябва да се изпишат сложни математически формули, например вижте следното:

[math]\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}[/math]

Горното не е обикновена картинка – колкото и да увеличавате страницата няма да забележите загуба на качество, т.е. то е изобразено като векторна графика. Предимствата са значителни, защото подобен подход (пазене на формулата като код вместо като поредица от фиксирани пиксели) позволява шрифта на формулите да се адаптира спрямо шрифта на уебсайта (тип, големина) независимо от екрана и мащабирането, което се използва. Така ако някой ден сменим дизайна на сайта, формулите в старите статии автоматично ще изглеждат добре спрямо нововъведенията. Ако ги бяхме съхранявали като растерни изображения, това нямаше да бъде вярно и щеше да се наложи да правим нови картинки.

Естествено има множество различни формати за различни видове употреба и SVG не е единствен пример. Например с CorelDraw или AutoCAD хората могат да правят професионални чертежи, които бидейки векторни позволяват изключителна прецизност при произволно големи увеличения. Техните файлови формати за много различни от показаното по-горе и не могат да се четат като обикновен текст, но концепцията в крайна сметка е подобна – всички обекти се описват с характеристики и се изчертават по математически формули, а не се записват като поредици от фиксирани пиксели.

Не само това – векторна графика се използва изключително често при триизмерните компютърни игри! Там обикновено обектите се дефинират и изчертават с векторна графика като т.нар. „полигони“ (многоъгълници), а после се запълват чрез растерни изображения с т.нар. „текстури“. Особено видимо е при по-старите игри, които поради по-бавните тогава компютри се налагаше да използват по-малко полигони (изчертаването на повече фигури естествено изисква повече изчисления) и съответно игрите изглеждаха значително по-„ръбати“ спрямо сегашните:

Може да го видите и при съвременна триизмерна компютърна игра – в настройките обикновено винаги присъства възможност за настройка на „качеството“. Там присъстват множество параметри, които са свързани с различни елементи от играта, някои от които са свързани с броя на линиите, които се изчертават. Слагайки някои от параметрите на „low“ ще направи така, че ще има по-малко начупване на линиите и съответно обектите по екрана ще започнат да изглеждат по-начупени и по-груби. Иначе именно от игрите със сигурност знаете, че в последните години реализма на генерираните с векторна графика обекти и растерните текстури, които се покриват получените многоъгълници, доведоха до изключително реалистични виртуални светове.

Е, днешните компютри са много бързи и особено от игрите знаете, че може да изчертават много реалистични изображения. Защо тогава не използваме само векторна графика, а се налага да използваме растерна – например за картинки и снимки? Причините са основно две:

• Заснемането на снимките се случва чрез сензор на фотоапарата, който най-просто казано е съставен от един правоъгълник с множество фотоклетки, всяка една от които улавя характеристиките на отделни лъчи светлина (цвят, интензитет, т.н.). При сканирането на документи се случва по същество подобно нещо – сензорът минава през обекта ред по ред и го „заснема“ пиксел по пиксел в определена резолюция. Тоест по своето същество компютъра приема изображенията от външния свят със сензори, които генерират растерна графика;
• Изображенията на компютърния екран също се показват като една поредица от пиксели, което е растерна графика. Тоест всяка векторна графика тъй или иначе се свежда до растерното изображение, което виждаме с очите си.

След като сме приели растерното изображение – например снимка – теоретично бихме могли да го превърнем във векторно. Това е възможно (обикновено чрез сложни компютърни алторитми, които търсят ръбове с линии и ги интерполират чрез математически формули), но е трудно и изисква много изчисления. Също така трябва да се знае, че това няма как това да повиши качеството на изображението – то ще остане максимум същото, каквото е било в оригинал. При положение, че впоследствие отново ще сведем изображението пак до растерно, за да го видим на екрана, това означава, че просто сме правили безсмислено конвертиране на растера до вектори и последващо обръщане обратно в растер, за което сме хабили много процесорно време (изчисления). При това почти винаги сме намалявали и качеството. Определено няма смисъл, нали?

Това важи не само за снимките, но често и за картинките. Например представете си логото на някоя фирма изобразено на уебсайт. Колко често ви се налага да го видите с огромно увеличение под лупа? Най-вероятно не го правите. Обикновена растерна картинка с прилична резолюция е напълно достатъчна.

Затова в компютърната графика всяка от двете основни технологии си има своето приложение и ниша. Векторната графика е удачна когато изображенията са компютърно-генерирани са съставени основно от ясни контури. Растерните са подходящи когато сме правили сканиране или фотографиране, или когато са картинки, които не се очаква да бъдат увеличавани значително.