Придобивките од користење на скалабилни векторска графика
Скалабилни векторска графика, или SVG, играат важна улога во дизајнирањето на веб-сајтови денес. Ако во моментов не користите SVG во вашата веб-дизајнирана работа, тука се и некои причини зошто треба да почнете да го правите тоа, како и дефекти што можете да ги користите за постари прелистувачи кои не ги поддржуваат овие датотеки.
Резолуција
Најголемата корист на SVG е независноста на резолуцијата. Бидејќи SVG-датотеките се векторска графика, наместо растерски слики врз основа на пиксели, тие можат да бидат променети без да се загуби квалитетот на сликата. Ова е особено корисно кога креирате одговорени веб-страници кои треба да изгледаат добро и да работат добро во широк спектар на големини и уреди на екранот .
SVG-датотеките може да се зголемат или намалат за да се приспособат на променливите потреби за големина и распоред на вашиот одговорен веб-сајт и не треба да се грижите за оние графики кои имаат компромитиран квалитет на било кој чекор од патот.
Големина на Фајлот
Еден од предизвиците со користење на растерски слики (JPG, PNG, GIF) на одзив веб-страниците е големината на датотеката на тие слики. Бидејќи растројните слики не го намалуваат начинот на кој прават векторните, треба да ги испорачате вашите слики врз основа на пиксели со најголема големина на која ќе бидат прикажани. Ова е затоа што секогаш може да се направи помала слика и да се задржи нејзиниот квалитет, но истото не е точно за правење на слики поголеми. Крајниот резултат е дека често имате слики кои се многу поголеми отколку што се прикажани на екранот на лицето, што значи дека тие непотребно се принудени да преземат многу голема датотека.
SVG го адресира овој предизвик. Бидејќи векторската графика е скалабилна, може да имате многу мали димензии на датотеки, без оглед на тоа колку големи слики можеби ќе треба да бидат прикажани. Ова на крајот ќе има позитивно влијание врз вкупните перформанси на страницата и брзината на преземање.
CSS стил
SVG кодот исто така може да се додаде директно во HTML на страницата. Ова е познато како "inline SVG". Една од придобивките од користењето на inline SVG е дека со оглед на тоа што графика всушност се нацрта од прелистувачот врз основа на вашиот код, нема потреба да се направи HTTP-барање за добивање на датотека со слика. Друга придобивка е тоа што вградениот SVG може да биде стилизиран со CSS.
Треба да ја промените бојата на иконата SVG? Наместо потреба да ја отворите таа слика во некој вид софтвер за уредување и да извезувате и да ја вчитате датотеката повторно, едноставно можете да ја смените SVG-датотеката со неколку линии на CSS.
Можете исто така да користите други стилови на CSS на SVG-графики за да ги промените во услови на лебди или за одредени потреби за дизајн. Можете дури да ги анимирате овие графики за да додадете некое движење и интерактивност на страната.
Анимации
Бидејќи вградените SVG-датотеки можат да бидат стилизирани со CSS, можете да ги користите CSS-анимациите исто така. CSS трансформира и транзиции се два лесни начини за додавање на одреден живот во SVG-датотеки. Можете да добиете богати искуства на Флеш на страница без да ги подржувате недостатоците што доаѓаат со користење на Flash на веб-страниците денес.
Употреба на SVG
Како моќен како и SVG, овие графики не можат да го заменат секој друг формат на слика што го користите на вашата веб-страница. Фотографиите за кои е потребна длабока длабочина на боја, сепак, ќе треба да бидат JPG или можеби PNG-датотека, но едноставните слики како икони се совршено прилагодени за да се извршат како SVG.
SVG, исто така, може да биде соодветен за посложени илустрации, како логоа на компании или графикони и графикони. Сите графики ќе имаат корист од тоа да бидат приспособливи, да можат да бидат стилизирани со CSS, како и другите предности наведени во овој напис.
Поддршка за по-стари прелистувачи
Тековната поддршка за SVG е многу добра во модерните веб прелистувачи. Единствените прелистувачи кои навистина немаат поддршка за овие графики се постарите верзии на Internet Explorer (верзија 8 и подолу) и неколку постари верзии на Android. Сè на сè, многу мал процент од популацијата на прелистување сè уште ги користи овие прелистувачи, и тој број продолжува да се намалува. Ова значи дека SVG може да се користи прилично безбедно на веб-сајтовите денес.
Ако не сакате да обезбедите резервна копија за SVG, можете да користите алатка како Grumpicon од Filament Group. Овој ресурс ќе ги преземе вашите SVG датотеки со слики и ќе создаде падови за PNG за постари прелистувачи.
Уредено од Џереми Жирар на 1/27/17