SVG: bu nima, asosiy tushunchalar va veb-ishlanmasida foydalanish

SVG nima?

SVG — 2001-yilda W3C tavsiyasi sifatida paydo bo‘lgan, XMLga asoslangan vektor grafika formatidir. Rastr formatlaridan farqli o‘laroq, SVG tasvirni geometrik primitivlar orqali tavsiflaydi: nuqtalar, chiziqlar, egri chiziqlar va ko‘pburchaklar. SVG fayli oddiy matnli XML hujjat bo‘lib, uni standart vositalar bilan o‘qish, tahrirlash va siqish mumkin.

SVG arxitekturasi bir necha asosiy konsepsiyalarni o‘z ichiga oladi. viewBox elementning haqiqiy o‘lchamlaridan qat’i nazar virtual koordinatalar tizimini belgilaydi. Masalan, viewBox="0 0 100 100" 100×100 kvadrat to‘r yaratadi, uning ichida barcha koordinatalar barqaror. Konteynerning kengligi yoki balandligi o‘zgarganda, mazmun mutanosib ravishda masshtablanadi.

W3C SVG 2 Specificationga ko‘ra, zamonaviy SVG versiyasi gradientlar, maskalar, filtrlar, ixtiyoriy joylashtiriladigan matn, JavaScript orqali interaktivlik va CSS va SMIL orqali animatsiyani qo‘llab-quvvatlaydi. SVG DOMga to‘liq huquqli HTML elementi sifatida integratsiya qilingan bo‘lib, bu har bir grafik primitivni dasturiy ravishda boshqarish imkonini beradi.

Mobil ishlanmada SVG iOSda UIGraphicsImageRenderer va Androidda VectorDrawable orqali ham qo‘llaniladi — ikkala format SVGga o‘xshash tavsiflarni GPUda apparat tezlashtirilgan rastrlarga aylantiradi.

SVG formatining tarixi va rivojlanishi

SVG 1.0 2001-yilda, SVG 1.1 2003-yilda W3C tavsiyasiga aylandi, SVG 2.0 2012-yildan rivojlanish bosqichida. SVG 2 ning asosiy yangiligi CSS bilan chuqurroq integratsiya, compositing va blending modes qo‘llab-quvvatlashi hamda HTMLda namespace prefikslarisiz SVGdan foydalanish imkoniyatidir.

SVG 2 hali Recommendation maqomiga erishmagan bo‘lsa-da, zamonaviy brauzerlar uning funksionalligining ko‘p qismini allaqachon qo‘llab-quvvatlaydi. Chrome, Safari, Firefox va Edge SVG 1.1ni deyarli to‘liq va SVG 2 ning muhim qismini qo‘llab-quvvatlaydi.

SVGning asosiy elementlari

SVG ikki o‘lchovli grafikani tavsiflash üchun elementlar to‘plamini taqdim etadi. Har bir elementning joylashuvi, o‘lchami va vizual ko‘rinishini belgilaydigan atributlari bor. Atributlar XML atributlari yoki CSS xususiyatlari sifatida belgilanishi mumkin.

• <rect> — x, y, width, height, rx, ry (burchaklarni yumaloqlash) atributlari bilan to‘rtburchak.
• <circle> — cx, cy (markaz) va r (radius) atributlari bilan doira.
• <ellipse> — cx, cy, rx, ry atributlari bilan ellips.
• <line> — x1, y1, x2, y2 atributlari bilan chiziq kesmasi.
• <polyline> — points atributi bilan siniq chiziq (koordinatalar ro‘yxati).
• <polygon> — points atributi bilan yopiq ko‘pburchak.
• <path> — d atributi bilan ixtiyoriy kontur (buyruqlar: M, L, C, Q, A, Z).
• <text> — x, y, font-size, font-family atributlari bilan matn elementi.

Path elementi — SVGning eng kuchli va moslashuvchan elementidir. d atributi buyruqlar ketma-ketligini o‘z ichiga oladi: M (moveTo), L (lineTo), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), Z (close path). Har bir buyruqning mutlaq yoki nisbiy shakli bor (katta yoki kichik harf).

SVG shuningdek elementlarni <g> orqali guruhlashni qo‘llab-quvvatlaydi. Guruh vizual atributlarni (fill, stroke, transform) barcha bola elementlarga meros qoldiradi. Bu butun shakllar to‘plamiga yagona uslubni qo‘llash va ularning joylashuvini bitta transform orqali boshqarish imkonini beradi.

SVG vs rastr grafika: formatlarni taqqoslash

SVG bilan rastr formatlari (JPEG, PNG, WebP) o‘rtasidagi asosiy farq — ma’lumotni saqlash usulidir. Rastr har bir piksel rangini qat’iy o‘lchamli to‘rda saqlaydi. SVG shakllarni qayta tiklash üchun matematik buyruqlarni saqlaydi. Bu farq formatlarning barcha afzalliklari va kamchiliklarini belgilaydi.

HTTP Archive, 2025 ma’lumotlariga ko‘ra, veb-saytlarning 68%i SVGdan ikonkalar, 34%i illyustratsiyalar va 22%i logotiplar üchun foydalanadi. SVG ikonkasining o‘rtacha hajmi 0.5–2 KB ni tashkil qiladi, holbuki o‘xshash sifatdagi rastr ikonka PNG formatida 5–20 KB ni tashkil qiladi.

Fotosuratlar va murakkab rastr tasvirlar üchun SVG mos kelmaydi — XML tavsifining hajmi ekvivalent JPEG hajmidan oshib ketadi. SVGning tavsiya etilgan qo‘llanish sohasi: ikonkalar, logotiplar, illyustratsiyalar, sxemalar, grafiklar, adaptiv dizaynli interfeys elementlari.

Qachon SVGni, qachon rastr formatini tanlash kerak

SVG — Retina ekranlarda va brauzerning istalgan masshtabida aniq ko‘rinishi kerak bo‘lgan interfeys elementlari üchun optimal tanlovdir. Rastr — fotosuratlar, murakkab teksturalar va millionlab ranglarga ega tasvirlar üchun, bu yerda vektor tavsifi asossiz murakkab bo‘lardi.

Gibrid yondashuv — interfeys elementlari üchun SVG va foto mazmun üchun WebP/AVIF kombinatsiyasi — sifat va sahifa yuklash samaradorligi o‘rtasida eng yaxshi muvozanatni beradi.

Inline SVG va CSS orqali stillashtirish

Inline SVG — SVG belgilashini to‘g‘ridan-to‘g‘ri HTML hujjatiga joylashtirish, alohida fayl sifatida <img> yoki background-image orqali emas. Inline SVGning afzalligi shundaki, SVG elementlari DOMning bir qismiga aylanadi va CSS orqali stillashtirilishi, JavaScript orqali boshqarilishi va qo‘shimcha server so‘rovlarisiz animatsiya qilinishi mumkin.

SVG shadow DOMda izolyatsiya qilingan <img src="icon.svg"> dan farqli o‘laroq, inline SVG ota-ona hujjatning ranglari va shriftlarini meros qilib oladi. Bu, masalan, har bir holat üchun alohida fayl yuklamasdan CSS :hover psevdosinifi orqali ikonka ustiga kursorni olib borganda rangini o‘zgartirish imkonini beradi.

CSS-Tricks ma’lumotlariga ko‘ra, inline SVG zamonaviy veb-ilovalarda ikonkalardan foydalanishning tavsiya etilgan usulidir. fill, stroke, stroke-width CSS xususiyatlari to‘g‘ridan-to‘g‘ri SVG elementlariga qo‘llaniladi. CSS orqali moslashtirish üchun, asl SVGda fill va stroke inline atributlari sifatida belgilanmagan bo‘lishi muhim — aks holda CSS ularni bekor qila olmaydi.

• Afzalliklari: CSS orqali stillashtirish, JS orqali boshqarish, HTTP so‘rovlarining yo‘qligi, viewBox moslashuvchanligi.
• Kamchiliklari: HTML sahifasining hajmini oshirish, HTMLdan alohida keshlashning mumkin emasligi.
• Alternativa: SVG-spritlar — bir necha SVGni bitta faylda birlashtirish va <use href="#id"> dan foydalanish.

SVG-spritlar keshlash muammosini hal qiladi: barcha ikonkalar bitta faylda yig‘iladi, brauzer uni bir marta yuklaydi, alohida ikonkalar sprite ichidagi kerakli elementning id-sini ko‘rsatuvchi <use> orqali ulanadi.

SVG animatsiyasi: CSS va SMIL

CSS SVG animatsiyasi — brauzerda vektor grafikasini animatsiya qilishning eng keng tarqalgan va samarali usulidir. transform, opacity va fill kabi CSS xususiyatlari SVG elementlariga HTML elementlari kabi qo‘llaniladi. Ixtiyoriy yo‘l bo‘ylab animatsiya üchun CSS offset-path xususiyati ishlatiladi.

SMIL (Synchronized Multimedia Integration Language) — CSSdan mustaqil, SVG-ichki animatsiya mexanizmidir. <animate>, <animateTransform> va <animateMotion> elementlari JavaScript va CSSsiz istalgan SVG atributini animatsiya qilish imkonini beradi. SMIL animatsiyasi brauzerning kadr chastotasi bilan sinxronlashtiriladi.

MDN Web Docsga ko‘ra, SMIL barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi, ammo CSS animatsiyasi oldindan bashorat qilish mumkin bo‘lgan va samaraliroq hisoblanadi. SMIL üchun asosiy stsenariy — CSS orqali erishib bo‘lmaydigan atributlarning animatsiyasi, masalan <path> elementining d (path) atributi.

JavaScript + requestAnimationFrame SVG animatsiyasi üstidan maksimal nazorat beradi. Veb-ishlab chiquvchilar murakkab animatsiya ketma-ketliklari, vaqt jadvallari va toza CSS bilan amalga oshirish qiyin bo‘lgan easing funksiyalari üchun GSAP va Anime.js kutubxonalaridan foydalanadilar.

Kod namunalari: SVG grafikasini yaratish

Birinchi namuna — asosiy SVG elementlaridan foydalanib oddiy uy ikonkasi. Barcha shakllar rect va polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Ikkinchi namuna — CSS orqali loaderning aylanish animatsiyasi. Uzluksiz kontur yaratish üchun stroke-dasharray atributi bilan <circle> ishlatilgan:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Uchinchi namuna — GSAP kutubxonasi orqali konturni silliq chizish üchun path animatsiyasi. GSAP stroke-dashoffset atributi bilan ishlab, chiziqning paydo bo‘lish effektini yaratadi:

// GSAP bilan yo‘lni chizish
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});