რა არის 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>