SVG: bu nədir, əsas anlayışlar və veb inkişafında istifadəsi

SVG nədir?

SVG — 2001-ci ildə W3C tövsiyəsi kimi ortaya çıxmış, XML əsaslı vektor qrafika formatıdır. Rastr formatlarından fərqli olaraq, SVG təsviri həndəsi primitivlər vasitəsilə təsvir edir: nöqtələr, xətlər, əyrilər və çoxbucaqlılar. SVG faylı adi mətn XML sənədidir, onu standart alətlərlə oxumaq, redaktə etmək və sıxışdırmaq olar.

SVG arxitekturası bir neçə əsas konsepsiyanı əhatə edir. viewBox elementin faktiki ölçülərindən asılı olmayan virtual koordinat sistemini təyin edir. Məsələn, viewBox="0 0 100 100" 100×100 kvadrat şəbəkəsi yaradır, onun daxilində bütün koordinatlar sabitdir. Konteynerin genişliyi və ya hündürlüyü dəyişdikdə, məzmun mütənasib olaraq miqyaslanır.

W3C SVG 2 Specification-a görə, müasir SVG versiyası qradiyentləri, maskaları, filtrləri, ixtiyari yerləşdirilən mətni, JavaScript vasitəsilə interaktivliyi və CSS və SMIL vasitəsilə animasiyanı dəstəkləyir. SVG DOM-a tam hüquqlu HTML elementi kimi inteqrasiya olunub ki, bu da hər bir qrafik primitivi proqram vasitəsilə idarə etməyə imkan verir.

Mobil inkişafda SVG iOS-da UIGraphicsImageRenderer və Android-də VectorDrawable vasitəsilə də istifadə olunur — hər iki format SVG bənzəri təsvirləri GPU-da aparat sürətləndirilmiş rastrlara çevirir.

SVG formatının tarixi və inkişafı

SVG 1.0 2001-ci ildə, SVG 1.1 2003-cü ildə W3C tövsiyəsi oldu, SVG 2.0 2012-ci ildən inkişaf mərhələsindədir. SVG 2-nin əsas yeniliyi CSS ilə daha dərin inteqrasiya, compositing və blending modes dəstəyi və HTML-də namespace prefiksləri olmadan SVG istifadəsi imkanıdır.

SVG 2 hələ Recommendation statusuna çatmasa da, müasir brauzerlər onun funksionallığının çoxunu artıq dəstəkləyir. Chrome, Safari, Firefox və Edge SVG 1.1-i demək olar ki, tam və SVG 2-nin əhəmiyyətli hissəsini dəstəkləyir.

SVG-nin əsas elementləri

SVG ikiölçülü qrafikanı təsvir etmək üçün elementlər dəsti təqdim edir. Hər bir elementin mövqeyini, ölçüsünü və vizual görünüşünü təyin edən atributları var. Atributlar XML atributları və ya CSS xüsusiyyətləri kimi təyin edilə bilər.

• <rect> — x, y, width, height, rx, ry (künclərin yumrulanması) atributları ilə dördbucaqlı.
• <circle> — cx, cy (mərkəz) və r (radius) atributları ilə dairə.
• <ellipse> — cx, cy, rx, ry atributları ilə ellips.
• <line> — x1, y1, x2, y2 atributları ilə xətt parçası.
• <polyline> — points atributu ilə sınıq xətt (koordinat siyahısı).
• <polygon> — points atributu ilə qapalı çoxbucaqlı.
• <path> — d atributu ilə ixtiyari kontur (əmrlər: M, L, C, Q, A, Z).
• <text> — x, y, font-size, font-family atributları ilə mətn elementi.

Path elementi — SVG-nin ən güclü və çevik elementidir. d atributu əmrlər ardıcıllığını ehtiva edir: M (moveTo), L (lineTo), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), Z (close path). Hər əmrin mütləq və ya nisbi forması var (böyük və ya kiçik hərf).

SVG həmçinin elementlərin <g> vasitəsilə qruplaşdırılmasını dəstəkləyir. Qrup vizual atributları (fill, stroke, transform) bütün övlad elementlərə ötürür. Bu, bütün formalar dəstinə vahid stil tətbiq etməyə və onların mövqeyini bir transform vasitəsilə idarə etməyə imkan verir.

SVG vs rastr qrafikası: formatların müqayisəsi

SVG ilə rastr formatları (JPEG, PNG, WebP) arasındakı əsas fərq — məlumatın saxlanma üsuludur. Rastr sabit ölçülü şəbəkədə hər pikselin rəngini saxlayır. SVG formaların bərpası üçün riyazi əmrləri saxlayır. Bu fərq formatların bütün üstünlük və çatışmazlıqlarını müyyənləşdirir.

HTTP Archive, 2025-in məlumatlarına görə, veb-saytların 68%-i SVG-dən ikonlar, 34%-i illüstrasiyalar və 22%-i loqolar üçün istifadə edir. SVG ikonasının orta ölçüsü 0.5–2 KB təşkil edir, halbuki eyni keyfiyyətdəki rastr ikona PNG formatında 5–20 KB-dır.

Fotoşəkillər və mürəkkəb rastr təsvirlər üçün SVG uyğun deyil — XML təsvirinin ölçüsü ekvivalent JPEG-in ölçüsünü keçəcək. SVG-nin tövsiyə olunan tətbiq sahəsi: ikonlar, loqolar, illüstrasiyalar, sxemlər, qrafiklər, adaptiv dizayn interfeys elementləri.

Nə zaman SVG, nə zaman rastr formatı seçməli

SVG — Retina ekranlarda və brauzerin istənilən miqyasında aydın görünməli olan interfeys elementləri üçün optimal seçimdir. Rastr — fotoşğəkillər, mürəkkəb teksturlar və milyonlarla rəngə malik təsvirlər üçün, burada vektor təsviri əsassız mürəkkəb olardı.

Hibrid yanaşma — interfeys elementləri üçün SVG və foto məzmun üçün WebP/AVIF kombinasiyası — keyfiyyət və səhifə yüklənmə performansı arasında ən yaxşı balansı verir.

Inline SVG və CSS vasitəsilə stilləşdirmə

Inline SVG — SVG işaretləməsinin birbaşa HTML sənədinə yerləşdirilməsi, ayrıca fayl şəklində <img> və ya background-image vasitəsilə deyil. Inline SVG-nin üstünlüyü ondadır ki, SVG elementləri DOM-un bir hissəsi olur və CSS vasitəsilə stilləşdirilə, JavaScript vasitəsilə idarə edilə və əlavə server sorğuları olmadan animasiya edilə bilər.

SVG-nin shadow DOM-da izolə edildiyi <img src="icon.svg">-dən fərqli olaraq, inline SVG valideyn sənədin rənglərini və şriftlərini miras alır. Bu, məsələn, hər bir vəziyyət üçün ayrıca fayl yükləmədən CSS :hover psevdosinifi vasitəsilə ikona üzərində gəzdikdə rəngini dəyişməyə imkan verir.

CSS-Tricks-in məlumatlarına görə, inline SVG müasir veb tətbiqlərdə ikonlardan istifadənin tövsiyə olunan üsuludur. fill, stroke, stroke-width CSS xüsusiyyətləri birbaşa SVG elementlərinə tətbiq olunur. CSS vasitəsilə fərdiləşdirmə üçün, orijinal SVG-də fill və stroke inline atributları kimi təyin edilməməlidir — əks halda CSS onları ləğv edə bilməz.

• Üstünlüklər: CSS vasitəsilə stilləşdirmə, JS vasitəsilə idarəetmə, HTTP sorğularının olmaması, viewBox adaptivliyi.
• Çatışmazlıqlar: HTML səhifəsinin ölçüsünün artması, HTML-dən ayrı keşləmənin mümkün olmaması.
• Alternativ: SVG-spritelar — bir neçə SVG-nin bir faylda birləşdirilməsi və <use href="#id"> istifadəsi.

SVG-spritelar keşləmə problemini həll edir: bütün ikonlar bir faylda toplanır, brauzer onu bir dəfə yükləyir, ayrıca ikonlar sprite daxilində lazımi elementin id-sini göstərən <use> vasitəsilə qoşulur.

SVG animasiyası: CSS və SMIL

CSS SVG animasiyası — brauzerdə vektor qrafikasının animasiyasının ən geniş yayılmış və məhsuldar üsuludur. transform, opacity və fill kimi CSS xüsusiyyətləri SVG elementlərinə HTML elementləri kimi tətbiq olunur. İxtiyari yol boyunca animasiya üçün CSS offset-path xüsusiyyəti istifadə olunur.

SMIL (Synchronized Multimedia Integration Language) — CSS-dən asılı olmayan, SVG-daxili animasiya mexanizmidir. <animate>, <animateTransform> və <animateMotion> elementləri JavaScript və CSS olmadan istənilən SVG atributunu animasiya etməyə imkan verir. SMIL animasiyası brauzerin kadr tezliyi ilə sinxronlaşdırılır.

MDN Web Docs-a görə, SMIL bütün müasir brauzerlərdə dəstəklənir, lakin CSS animasiyası daha proqnozlaşdırıla bilən və məhsuldar hesab olunur. SMIL üçün əsas ssenari — CSS vasitəsilə əlçatan olmayan atributların animasiyası, məsələn <path> elementinin d (path) atributu.

JavaScript + requestAnimationFrame SVG animasiyası üzərində maksimum nəzarət verir. Veb inkişafçıları mürəkkəb animasiya ardıcıllıqları, zaman xətləri və təmiz CSS ilə həyata keçirilməsi çətin olan easing funksiyaları üçün GSAP və Anime.js kitabxanalarından istifadə edir.

Kod nümunələri: SVG qrafikasının yaradılması

Birinci nümunə — əsas SVG elementlərindən istifadə edərək sadə bir ev ikonu. Bütün formalar rect və polyline-dir:

<!-- 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>

Ikinci nümunə — CSS vasitəsilə loaderin fırlanma animasiyası. Kəsilən kontur yaratmaq üçün stroke-dasharray atributu ilə <circle> istifadə olunub:

<!-- 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>

Üçüncü nümunə — GSAP kitabxanası vasitəsilə konturun hamar çəkilməsi üçün path animasiyası. GSAP stroke-dashoffset atributu ilə işləyərək xəttin görünmə effektini yaradır:

// GSAP ilə yolu çəkin
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"
});