Зашто би требало да користите СВГ на вашем сајту данас

Предности коришћења Сцалабле Вецтор Грапхицс

Сцалабле Вецтор Грапхицс, или СВГ, данас играју важну улогу у дизајну веб сајта. Ако тренутно не користите СВГ у свом веб дизајном раду, ево неких разлога зашто би то требало почети, као и повратне напаке које можете користити за старије прегледаче који не подржавају ове датотеке.

Резолуција

Највећа корист СВГ-а је резолуција независности. Због тога што су СВГ датотеке векторска графика умјесто растерских слика заснованих на пикселима, они се могу мијењати у величини без губитка квалитета слике. Ово је посебно корисно када креирате одговарајуће веб странице које морају изгледати добро и добро функционисати у широком опсегу димензија и уређаја екрана .

СВГ датотеке се могу скалирати горе или доле како би се прилагодили променљивим величинама и поставкама потребних за вашу одзивну веб локацију и не морате да бринете о тим графикама које имају компромитован квалитет било ког корака пута.

Величина фајла

Један од изазова коришћењем растерских слика (ЈПГ, ПНГ, ГИФ) на одзивним веб страницама је величина датотеке тих слика. Пошто растерске слике не умањују начин на који векторски раде, потребно је доставити слике засноване на пикселима у највећој величини на којој ће бити приказане. То је зато што увек можете направити слику мању и задржати његов квалитет, али исто није тачно за прављење слика већим. Крајњи резултат је то што често имате слике које су далеко веће него што се приказују на екрану особе, што значи да су без потребе приморане да преузму веома велику датотеку.

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

ЦСС стил

СВГ код се такође може директно додати ХТМЛ-у странице. Ово је познато као "инлине СВГ". Једна од предности коришћења инлине СВГ-а је то што, с обзиром на то да графика заправо покреће претраживач на основу вашег кода, не постоји потреба да се ХТТП захтев изведе за преузимање датотеке слике. Још једна предност је што се инлине СВГ може стајати с ЦСС-ом.

Треба ли промијенити боју СВГ иконе? Уместо да је требате отворити ту слику у неком софтверу за уређивање и поново извозити и отпремити датотеку, једноставно можете промијенити СВГ датотеку са неколико редова ЦСС-а.

Можете користити и друге стилове ЦСС-а на СВГ графиконима како бисте их промијенили у стању лебдења или у одређеним дизајнерским потребама. Можете чак и анимирати те графике како бисте додали неки покрет и интерактивност на страници.

Анимације

Због тога што се инлине СВГ датотеке могу стилизовати ЦСС-ом, на њима можете користити и ЦСС анимације. ЦСС трансформације и прелази су два једноставна начина додавања живота СВГ датотекама. Можете да набавите богата Фласх искуства на страници без пристајања на недостатке који долазе са коришћењем Фласха на веб страницама данас.

Користи СВГ

Оно што је снажно као СВГ, ове графике не могу заменити сваки други формат слике који користите на вашој веб локацији. Фотографије које захтевају дубоку дубину боје ипак ће морати бити ЈПГ или можда ПНГ датотека, али једноставне слике као што су иконе су савршено погодне за извршавање као СВГ.

СВГ такође може бити прикладан за сложеније илустрације, као што су логотипи компаније или графикони и графикони. Сва графика ће имати користи од тога да буде скалабилна, која се може стилизовати ЦСС-ом, као и друге погодности наведене у овом чланку.

Подршка старијим прегледачима

Тренутна подршка за СВГ је веома добра у модерним веб прегледачима. Једини претраживачи који стварно немају подршку за ове графике су старије верзије Интернет Екплорер-а (Верзија 8 и ниже) и неколико старијих верзија Андроид-а. Све у свему, веома мали проценат популације претраживача и даље користи ове прегледаче и тај број се наставља смањивати. То значи да СВГ може бити прилично сигурно кориштен на веб страницама данас.

Ако желите да обезбедите резервни повратак за СВГ, можете користити алат као Грумпицон из групе Филамент. Овај ресурс ће узети ваше СВГ сликовне датотеке и креирати ПНГ падове за старије прегледаче.

Уредио Јереми Гирард на 1/27/17