Зашто бисте требали користити СВГ слике: како анимирати своје СВГ-ове и учинити их брзим

Зашто користимо СВГ?

Сектор веб развоја расте брзим темпом, а СВГ (скалабилне векторске графике) слике постају све популарније. Као векторске слике, СВГ се састоје од математичких једначина које дефинишу позиционирање и боју линија и кривих које чине графичке облике и текст у КСМЛ формату. СВГ се користе за иконе, логотипе, графичке дизајне и фонтове.

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

Хајде да разговарамо о неким предностима СВГ-а сада.

1. Текстуални формат

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

2. Скалабилност

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

Прилагодљивост

3. Високе перформансе

Ако приоритет дајете перформансама, требало би да користите СВГ. Са СВГ-ом није потребан ХТТП захтев за учитавање у датотеку слике. Страница се брже учитава јер нема датотека за преузимање. Брже време учитавања доводи до бољих перформанси веб страница и већег ранга претраживача. Заузврат, побољшава корисничко искуство.

4. Мала величина датотеке

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

Величина СВГ датотеке

5. Бројне могућности уређивања и анимирања

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

6. Интеграција са ХТМЛ, КСХТМЛ и ЦСС

СВГ је дизајниран „како би се интегрисао и проширио друге истакнуте технологије отворене веб платформе, као што су Кс / ХТМЛ, ЦСС и Јавасцрипт“, према В3Ц. Дакле, за разлику од различитих формата слика, овај формат се лако може интегрисати са другим документима и технологијама.

7. Подршка за модел објектног документа В3Ц

Све је већа подршка заједнице за СВГ. Конзорцијум за Ворлд Виде Веб (В3Ц) увек је тврдио да Интернет не може без векторских слика. Ова организација је у основи креирала СВГ формат и они је данас активно подржавају.

Које су непријатности СВГ-а?

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

На пример, ево две СВГ мапе Сједињених Држава. Други је нешто детаљнији од првог. Али виши ниво детаља коштао је готово пет пута већу величину датотеке - 33 КБ у поређењу са 147 КБ. Да ова мапа није једнобојна, повећање би било много веће.

СВГ мапе

Ако је слика линеарна и садржи неколико боја - СВГ је решење. Међутим, ако су детаљи битни и ако их има пуно, ПНГ или ЈПЕГ ће можда бити прикладнији.

Такође имајте на уму да се СВГ не може користити за фотографије. Ако на својој веб локацији користите фотографију, СВГ није најбоља опција. Свакако бисте требали да користите формат растерске слике.

Како оптимизирати СВГ слике

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

Пример СВГ оптимизације помоћу СВГО

Како анимирати СВГ

СВГ графика на Интернету може се анимирати на више начина:

  1. СМИЛ, што је изворна спецификација СВГ анимације
  2. АПИ за веб анимације, који је изворни ЈаваСцрипт АПИ који вам омогућава да креирате сложеније секвенцијалне анимације без учитавања било каквих спољних скрипти
  3. ВебГЛ
  4. ЦСС анимација

Размотримо последњу.

ЦСС анимација се користи како би се избегло преоптерећење ваше услуге великим библиотекама за анимирање икона и учитавача.

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

СВГ гиф

Као што видите овде, за анимацију користим синтаксу Кеифраме Аниматион. Примењује се постављањем почетног положаја елемента помоћу ид (0%), прелаза (50%) и крајњег положаја (100%). Да би се постигла несметана анимација, почетна и коначна вредност су једнаке.

Ево неколико благодати употребе ЦСС приступа СВГ анимацији:

  1. Не треба вам спољна библиотека.
  2. Препроцесори (попут Сасс или Лесс) омогућавају вам да креирате променљиве.
  3. Можете користити онАниматионЕнд и неке друге куке за анимацију са изворним ЈаваСцриптом.
  4. Овај приступ је једноставан за употребу за прилагодљиви развој веб дизајна јер своју анимацију можете да измените помоћу медијских упита.

У мане коришћења ЦСС анимације су следеће:

  1. Не можете произвести неке сложене физичке ефекте, што би анимацију учинило реалистичнијом.
  2. Треба прилагодити пуно времена ако прилагодите време.
  3. ЦСС и СВГ графика на мобилним уређајима понекад захтева необичне хаковања.

На пример

Ипак, можемо направити неке занимљиве пројекте уз помоћ једноставне и тривијалне ЦСС анимације. На пример, направио сам једноставан видео за игру користећи ХТМЛ, ЦСС и мало ЈаваСцрипт-а. Сви СВГ-ови су нацртани у Скици. Циљ ове игре је спасити принцезу. У било којој ситуацији само кликните. Пројекат можете пронаћи на мом ГитХуб-у.

Да ће завршити

СВГ-ови су сјајан формат слике са којим можете ићи. Прилагодљиви су, лагани, засновани на тексту и ефикасни. Лако их је уредити, анимирати и интегрисати. Важно је да их подржава готово сваки прегледач осим Интернет Екплорер 8 и Андроид 2.3.

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

Имате ли идеју за софтверски пројекат?

Моја компанија КеенЕтхицс је тим искусних програмера веб апликација. У случају да вам је потребна бесплатна процена сличног пројекта, слободно нас контактирајте .

Још сличних чланака можете прочитати на мом Кеен блогу. Дозволи ми да ти предложим да прочиташ Вредност корисничког тестирања или 7 случајева када не треба да користиш Доцкер.

ПС

Такође, желео бих да се захвалим Марини Ианул за коауторство овог чланка, као и читаоцима што су га направили до краја!

Оригинални чланак објављен на блогу КеенЕтхицс можете пронаћи овде: Нова перспектива зашто, када и како се користи СВГ.