Scalable Vector Graphics- ի օգտագործման առավելությունները
Scalable Vector Graphics- ը կամ SVG- ը կարեւոր դերակատարություն ունեն այսօր կայքի դիզայնի վրա: Եթե ներկայումս վեբ-դիզայնի աշխատանքում չեք օգտագործում SVG- ը, այստեղ կան մի քանի պատճառ, թե ինչու պետք է սկսեք այդպես վարվել, ինչպես նաեւ կարող եք օգտագործել այն ավելի հին բրաուզերների համար, որոնք չեն աջակցում այդ ֆայլերը:
Բանաձեւը
SVG- ի ամենամեծ օգուտը անկախության լուծումն է: Քանի որ SVG ֆայլերը վեկտորային գրաֆիկա են, պատկերված պատկերների պատկերների փոխարեն, դրանք կարող են resized, առանց կորցնելու որեւէ պատկերի որակը: Սա հատկապես օգտակար է այն ժամանակ, երբ դուք ստեղծում եք պատասխանող կայքեր, որոնք անհրաժեշտ են լավ տեսք ունենալ եւ լավ աշխատել էկրանի մեծ չափերի եւ սարքերում :
SVG- ի ֆայլերը կարելի է մեծ կամ փոքր չափով հասցնել ձեր պատասխանատու կայքի փոփոխվող չափը եւ դասավորության կարիքները եւ չպետք է անհանգստանաք այն գրաֆիկայի համար, որոնք վտանգի տակ են դնում ճանապարհի ցանկացած քայլ:
Ֆայլի չափ
Ռազմական նկարներ (JPG, PNG, GIF) պատասխանող կայքերում օգտագործելու մարտահրավերներից մեկը այն պատկերների ֆայլի չափն է: Քանի որ ուղղահայաց պատկերները չեն տարածում այն վեկտորների այն ձեւը, դուք պետք է մատուցեք ձեր պիքսելային պատկերները ամենամեծ չափի մեջ, որտեղ դրանք կցուցադրվեն: Դա այն է, որ դուք միշտ կարող եք պատկերացնել ավելի փոքր եւ պահպանել ձեր որակը, բայց նույնը չի համապատասխանում իրական պատկերը: Վերջնական արդյունքը այն է, որ դուք ունեք պատկերներ, որոնք շատ ավելի մեծ են, քան նրանք ցուցադրվում են մարդու էկրանին, ինչը նշանակում է, որ դրանք անպայման ստիպված են ներբեռնել շատ մեծ ֆայլ:
SVG- ն դիմում է այս մարտահրավերին: Քանի որ վեկտորային գրաֆիկան լայնամասշտաբ է, դուք կարող եք ունենալ չափազանց փոքր ֆայլի չափեր, անկախ նրանից, թե որքան մեծ են այդ պատկերները կարող են ցուցադրվել: Դա, ի վերջո, դրական ազդեցություն կունենա կայքի ընդհանուր կատարման եւ ներբեռնման արագության վրա:
CSS ձեւավորում
SVG կոդը կարող է ուղղակիորեն ավելացնել նաեւ էջի HTML- ին: Սա հայտնի է որպես «ներգրավված SVG»: SVG- ի օգտագործման առավելություններից մեկն այն է, որ գրաֆիկան իրականում կազմված է ձեր կոդը հիմնված բրաուզերից, կարիք չկա HTTP- ի խնդրանք ստեղծելու պատկերի ֆայլ: Մեկ այլ օգուտ այն է, որ SVG- ի ներդիրը կարող է ձեւավորված լինել CSS- ով:
Պետք է փոխել SVG պատկերակի գույնը: Փոխարենը անհրաժեշտ է բացել այդ պատկերը որոշ խմբագրում ծրագրերի եւ արտահանման եւ վերբեռնել ֆայլը կրկին, դուք կարող եք պարզապես փոխել SVG ֆայլը մի քանի տող CSS.
Կարող եք նաեւ օգտագործել CSS- ի այլ ոճերը SVG- ի գրաֆիկայի վրա, փոխել դրանք hover պետություններում կամ որոշակի դիզայնի կարիքների համար: Դուք կարող եք նույնիսկ animate այդ գրաֆիկայի մի էջում որոշ շարժումներ եւ ինտերակտիվություն ավելացնել:
Անիմացիաներ
Քանի որ ներածված SVG ֆայլերը կարող են հարդարել CSS- ի միջոցով, կարող եք նաեւ դրանց վրա օգտագործել CSS անիմացիաները: CSS- ը վերափոխում է եւ անցում կատարող երկու հեշտ եղանակներ `SVG- ի ֆայլերին որոշակի կյանք ավելացնելու համար: Դուք կարող եք ձեռք բերել հարուստ Flash- ի նման փորձառություններ, էջում, առանց վրիպազերծելու այն ապատեղեկատվությունները, որոնք գալիս են Flash- ում օգտագործելով այսօր:
SVG- ի օգտագործումը
Որքան ուժեղ է SVG- ը, այդ գրաֆիկան չի կարող փոխարինել ձեր կայքում օգտագործվող ցանկացած այլ կերպար: Լուսանկարները, որոնք պահանջում են խորը գույնի խորություն, դեռ պետք է լինեն JPG կամ, հնարավոր է, PNG ֆայլ, բայց պարզ պատկերներ, ինչպիսիք են պատկերակները, կատարյալ պիտանի են կատարվել որպես SVG:
SVG- ը կարող է նաեւ հարմար լինել ավելի բարդ նկարագրերի համար, ինչպիսիք են ընկերության լոգոները կամ գրաֆիկները եւ գծապատկերները: Բոլոր գրաֆիկայի օգուտները կօգտագործվեն լայնածավալ լինելուց, կարող են լինել CSS- ով հագեցած եւ սույն հոդվածում թվարկված մյուս առավելությունները:
Աջակցություն ավելի հին բրաուզերների համար
SVG- ի ներկայիս աջակցությունը շատ լավ է ժամանակակից վեբ բրաուզերում: Միակ բրաուզերները, որոնք իսկապես չունեն այդ գրաֆիկայի աջակցությունը, Internet Explorer- ի հին տարբերակներն են (Version 8 եւ ներքեւ) եւ Android- ի մի քանի հին տարբերակներ: Ընդհանուր առմամբ, զննարկման բնակչության շատ փոքր տոկոսը դեռեւս օգտագործում է այդ բրաուզերները, եւ այդ թիվը շարունակում է նվազել: Սա նշանակում է, որ SVG- ն այսօր կարող է շատ անվտանգ օգտագործվել վեբկայքերում:
Եթե դուք ցանկանում եք ապահովել SVG- ի փոխհատուցում, կարող եք օգտագործել Filament Group- ի նման Grumpicon գործիքը: Այս ռեսուրսը կվերցնի ձեր SVG- ի պատկերային ֆայլերը եւ ստեղծեք PNG- ի անկումները հին բրաուզերների համար:
Փոփոխված է Ջերեմի Գիրարդը 1/27/17 թ .: