Поглед у Сцалабле Вецтор Грапхицс (СВГ)
Векторска графика је широко примењена у штампаним медијима. На веб сајту можемо додати векторску графику са СВГ или Сцалабле Вецтор Грапхиц. Позивајући се на званичне спецификације на В3.орг, СВГ је описан као:
Језик за описивање дводимензионалне графике у КСМЛ-у. СВГ дозвољава три типа ßграфских објеката: векторске графичке облике (нпр. Путање које се састоје од правих линија и кривих), слике и текст.
То је заправо било од 1999. године, а од 16. августа 2011. године постало је В3Ц препорука. Ипак, СВГ је још увек прилично недовољно искоришћен, док има много предности у коришћењу вектора, а не Битмапа за приказивање графике или слике на веб локацији..
СВГ Адвантагес
У смислу послуживања графике на веб страницама, СВГ нуди неколико предности у односу на Битмап, од којих неке укључују:
Ресолутион Индепендент
Битмап / растер графика је резолуција зависна - она је изграђена на пикселима. Сликане графике ће изгледати пикселиране када се промене на одређеном нивоу зумирања. То се не дешава векторској графици, која је по својој природи резолуција независна, јер се графика изражава математичком једначином која га чини могућност скалирања на било којем нивоу зумирања уз задржавање квалитета, чак и на Ретина Дисплаи.
Смањење ХТТП захтева
СВГ може бити уграђен директно у ХТМЛ документ са свг тако да прегледач не мора да поднесе захтев за послуживање графике. Ово такође резултира бољим перформансама учитавања за веб сајт.
Стилинг и Сцриптинг
Уграђивање директно са свг таг ће нам такође омогућити да лако стилизујемо графику преко ЦСС-а. Ми Можемо промени својства објекта као што су боја позадине, непрозирност, границе, итд. Слично томе, можемо и манипулисати графиком преко ЈаваСцрипт-а.
Може бити анимирана и уређена
СВГ објект може бити анимиран када користи елемент анимације или кроз ЈаваСцрипт библиотеку као јКуери. СВГ објекат се такође може уређивати било којим уређивачем текстуалног кода или графичким софтвером као што је Инксцапе (који је бесплатан) или Адобе Иллустратор.
Мања величина датотеке
СВГ има мању величину датотеке у односу на Битмап, која има сличан графички приказ.
Цртање основних облика са СВГ-ом
Према спецификацијама, можемо нацртати неке основне облике као што је правоугаоник, круг, линија, елипса, полилинија и полигон са СВГ-ом и да би претраживач могао да прикаже СВГ графику, сви ти графички елементи треба да буду уметнути у таг. Да видимо примере испод за више детаља:
Линија
Цртати а лине у СВГ можемо користити
Као што можете видети горе, координата почетне тачке линије се изражава са прва два атрибута к1 и к2, док је координата тачке линије изражена са и1 и и2.
Постоје и два друга атрибута удар и ширина хода који се користе за дефинисање боје границе и ширине границе. Алтернативно, можемо такође да дефинишемо ове атрибуте унутар инлине стила, на пример:
на крају само ради исто.
- Виев Демо “Линија”
Полилине
Скоро је сличан
бодова атрибуте који чувају све координате које формирају линије.
- Виев Демо “Полилине”
Правоугаоник
И цртање правоугаоника је једноставно
- Виев Демо “Правоугаоник”
Круг
Можемо такође нацртати круг са 100 радијус који је дефинисан са р атрибут:
Прва два атрибута, цк и ци дефинишу средишњу координату круга. У горњем примеру смо поставили 102 и за Икс и и координате, ако ти атрибути нису специфицирани, 0 ће се узети као подразумевана вредност.
- Виев Демо “Круг”
Еллипсе
Можемо да нацртамо елипсу Икс радијус линије и и радијус линије са рк и ри аттрибуте;
- Виев Демо “Еллипсе”
Полигон
Са
- Виев Демо “Полигон”
Користећи Вецтор Грапхиц Едитор
Као што можете видети, цртање једноставних објеката са СВГ-ом у ХТМЛ-у је прилично једноставно. Међутим, када објекат постане сложенији, та пракса више није идеална и пружиће вам главобољу.
На срећу, као што смо већ споменули, можемо користити едитор векторских графика Адобе Иллустратор или Инксцапе да уради посао. Ако сте упознати са овим софтвером, сигурно је много лакше цртати објекте са њиховим графичким корисничким интерфејсом, а не сами кодирати графику у ХТМЛ ознаци.
Ако радите са Инксцапе-ом, можете сачувати вашу векторску графику као обичан СВГ, а затим је отворити у уређивачу текстуалног кода. Сада би требали пронаћи СВГ кодове у датотеци. Копирајте све кодове и залијепите их у ХТМЛ документ.
Или, можете уградити .свг проследити преко једног од ових елемената; уграђивање, ифраме и објекат, на пример;
Резултати ће на крају бити исти.
У овом примеру користим овај Аппле иПод са ОпенЦлипАрт.орг.
- Виев Демо “иПод”
Бровсер Суппорт
Што се тиче подршке за прегледач, СВГ је веома добро подржан у свим већим претраживачима, осим у ИЕ8 и раније. Али ово питање може бити решено помоћу ове ЈаваСцрипт библиотеке, назване Рапхаел.јс. Да бисмо олакшали ствари, користићемо овај алат, РеадиСетРапхаел.цом за конверзију СВГ кода у Рапхаел-подржан формат. Ево како.
Прво, преузмите и укључите Рапхаел.јс библиотеку у ХТМЛ документ. Затим пренесите .свг фајл на сајт, копирајте и налепите генерисани код унутар следећег оптерећења функције;
виндов.онлоад = фунцтион () // овде долази Рапхаелов код
Унутар тело таг, ставите следеће див са рср ид аттрибуте;
То је то, готови сте. Погледајте пример са доње везе.
- Виев Демо “Рапхаел”
Последње мисли
То је основа СВГ-а. Надамо се да сада имате поштено разумевање ове теме. То је најбољи начин да оптимизујете ваш сајт за било коју резолуцију екрана, чак и за коришћење на Ретина дисплеју.
Као и увек, ако сте авантуристичка особа, овде смо ставили још неколико референци и дискусије да дубље проучимо ову тему..
- Увод у СВГ - В3 школе
- Резолуција Независна са СВГ - Смасхинг Магазине
- Зашто не користите СВГ? - НетТутс
Хвала за читање и надамо се да сте уживали у овом посту.
- Виев Демо
- Довнлоад Соурце
