Ինչ է SVG- ը?

SVG (Տարածվող վեկտորային գրաֆիկա) — դա XML-ի վրա հիմնված վեկտորային գրաֆիկայի ձևաչափ է, որը օգտագործվում է երկչափ գրաֆիկա ստեղծելու համար: Բացառությամբ ռաստերային պատկերների, SVG-ն նկարագրում է գրաֆիկան մաթեմատիկական բանաձևերով, ինչը թույլ է տալիս պատկերները մեծացնել կամ փոքրացնել առանց որակի կորուստի:

Հիմնական հատկանիշները SVG-ի:

• Վեկտորային ձևաչափ: Պատկերները նկարագրվում են գեոմետրական սկզբունքներով (նկատներ, գծեր, գծագծեր, ձևեր), ոչ թե պիքսելներով:
• XML հիմք: SVG փաստաթղթի կառուցվածքը հիմնված է XML սինտաքսի վրա, ինչը դարձնում է այն հեշտ ընթեռնելի և խմբագրելի:
• Մեծացման հնարավորություն: Պատկերները կարելի է մեծացնել կամ փոքրացնել առանց որակի կորուստի:
• Ինտերակտիվություն: SVG տարրերը կարող են լինել ինտերակտիվ, արձագանքել իրադարձություններին (կլիկներ, անցում և այլն) JavaScript-ի միջոցով:
• Սթայլավորում: SVG տարրերի ձևավորումը կարող է կատարվել CSS-ի միջոցով:
• Աнимаցիա: SVG-ն աջակցում է տարրերի անիմացիային ներքին միջոցներով կամ CSS/JavaScript-ի միջոցով:

SVG-ի օգտագործման առավելությունները վեբում:

• Իդեալական է նշանների և լոգոտիպների համար: Մեծացման հնարավորությունը ապահովում է հստակ ցուցադրում ցանկացած էկրանային լուծման վրա:
• Փոքր ֆայլի չափ: Շատ տեսակի գրաֆիկայի համար SVG ֆայլերը կարող են լինել փոքր, քան նման ռաստերային ձևաչափերը:
• SEO-բարեկամ: SVG-ի տեքստը ինդեքսավորվում է որոնողական համակարգերով:
• Հասանելիություն: Տեքստային բնույթի շնորհիվ, SVG-ն ավելի հասանելի է օգնական տեխնոլոգիաների համար:
• Հեշտ փոփոխություն: Քանի որ դա XML է, պարունակությունը կարող է դինամիկ փոփոխվել:

Օրինակ՝ պարզ SVG պատկեր (շրջանիկ):

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>