Scalable Vector Graphics-ը կամ SVG-ն այսօր կարևոր դեր է խաղում վեբ կայքի ձևավորման մեջ: Եթե դուք ներկայումս չեք օգտագործում SVG ձեր վեբ դիզայնի աշխատանքում, ահա մի քանի պատճառ, թե ինչու պետք է սկսեք դա անել, ինչպես նաև այլընտրանքային տարբերակներ, որոնք կարող եք օգտագործել հին բրաուզերների համար, որոնք չեն աջակցում այս ֆայլերը:
Բանաձև
SVG-ի ամենամեծ առավելությունը լուծման անկախությունն է: Քանի որ SVG ֆայլերը վեկտորային գրաֆիկա են (ի տարբերություն պիքսելների վրա հիմնված ռաստերային պատկերների), դուք կարող եք դրանք չափափոխել՝ չկորցնելով պատկերի որակը: Սա հատկապես օգտակար է, երբ դուք ստեղծում եք պատասխանատու կայքեր, որոնք պետք է լավ տեսք ունենան և լավ աշխատեն էկրանների և սարքերի մեծության լայն շրջանակում:Դուք կարող եք մեծացնել SVG ֆայլերը վեր կամ վար՝ ձեր արձագանքող կայքի փոփոխվող չափի և դասավորության կարիքները բավարարելու համար՝ առանց որևէ կերպ խախտելու դրանց որակը:
Ընդհանրապես, SVG-ներն ունեն ավելի հարթ և հստակ տեսք, քան այլ ձևաչափերի պատկերները՝ անկախ չափից:
Ֆայլի չափ
Պատասխանող կայքերում ռաստերային պատկերների (օրինակ՝ JPG, PNG, GIF) օգտագործման հետ կապված մեկ խնդիր ֆայլի չափն է: Քանի որ ռաստերային պատկերները չեն չափվում այնպես, ինչպես վեկտորային պատկերները, դուք պետք է ներկայացնեք ձեր պիքսելների վրա հիմնված պատկերները ամենամեծ չափսով, որով դրանք կցուցադրվեն: Դա պայմանավորված է նրանով, որ դուք միշտ կարող եք փոքրացնել պատկերը և պահպանել դրա որակը, բայց նույնը չի կարող լինել պատկերն ավելի մեծացնելու դեպքում: Արդյունքը պատկերներ են, որոնք շատ ավելի մեծ են, քան դրանք դիտվում են, ինչը բրաուզերներին ստիպում է ներբեռնել մեծ ֆայլեր:
Ի հակադրություն, վեկտորային գրաֆիկան մասշտաբային է, այնպես որ կարող եք օգտագործել շատ փոքր ֆայլերի չափեր՝ անկախ այն բանից, թե որքան մեծ է այդ պատկերները: Սա, ի վերջո, օպտիմալացնում է կայքի ընդհանուր կատարումը և ներբեռնման արագությունը:
CSS ոճավորում
Դուք հեշտությամբ կարող եք SVG ավելացնել ուղղակիորեն էջի HTML-ում: Սա հայտնի է որպես inline SVG: Ներկառուցված SVG-ի օգտագործման առավելություններից մեկն այն է, որ, քանի որ գրաֆիկան իրականում գծված է դիտարկիչի կողմից, պատկերի ֆայլը ստանալու համար HTTP հարցումի կարիք չկա:
Եվս մեկ առավելություն. Դուք կարող եք SVG-ի ներկառուցված ոճը CSS-ով: Պետք է փոխել SVG պատկերակի գույնը: Գրաֆիկական խմբագրման ծրագրերում այդ պատկերը խմբագրելու և այնուհետև ֆայլը նորից արտահանելու և վերբեռնելու փոխարեն, դուք կարող եք փոխել SVG ֆայլը պարզապես մի քանի տող CSS-ով: Դուք կարող եք օգտագործել CSS՝ SVG-ները փոխելու համար սավառնող վիճակների և դիզայնի այլ կարիքների համար նույնպես:
Վերջին գիծ
Քանի որ դուք կարող եք ներկառուցված SVG ֆայլեր ոճավորել CSS-ով, կարող եք նաև օգտագործել CSS անիմացիաներ դրանց վրա: CSS-ի փոխակերպումները և անցումները SVG-ներին կյանք ավելացնելու երկու հեշտ միջոց են: Դուք կարող եք Flash-ի նման հարուստ փորձառություններ ստանալ էջում առանց Flash-ի օգտագործման, որը iPad-ն այլևս չի աջակցում: Փաստորեն, Adobe-ն աստիճանաբար հեռացնում է Flash-ը մինչև 2020 թվականի վերջ:
SVG-ի օգտագործում
Որքան էլ հզոր են SVG-ները, դրանք չեն կարող փոխարինել ցանկացած այլ պատկերի ձևաչափ: Լուսանկարները, որոնք պահանջում են հարուստ գունային խորություն, դեռևս պետք է լինեն-j.webp
SVG-ը նաև հարմար է որոշ բարդ նկարազարդումների համար, ինչպիսիք են գրաֆիկները, գծապատկերները և ընկերության լոգոները: Այս բոլոր գրաֆիկան օգուտ է տալիս մասշտաբային լինելուն և կարող է ոճավորվել CSS-ով:
Աջակցություն ավելի հին դիտարկիչներին
SVG-ի ներկայիս աջակցությունը շատ լավ է ժամանակակից վեբ բրաուզերներում: Միակ բրաուզերները, որոնք չունեն աջակցություն այս գրաֆիկայի համար, Internet Explorer-ի հին տարբերակներն են (որը Microsoft-ն այլևս չի աջակցում) և Android-ի մի քանի հին տարբերակները: Ընդհանուր առմամբ, զննարկող բնակչության շատ փոքր տոկոսը դեռ օգտագործում է այս բրաուզերները, և այդ թիվը շարունակում է կրճատվել: Սա նշանակում է, որ դուք կարող եք օգտագործել SVG ձեր կայքում առանց անհանգստանալու:
Եթե ցանկանում եք SVG-ի հետադարձ կապ տրամադրել, օգտագործեք այնպիսի գործիք, ինչպիսին է Grumpicon-ը Filament Group-ից: Այս ռեսուրսը ստեղծում է PNG-ներ ձեր SVG պատկերային ֆայլերից:
