SVG nədir? Vektor formatı üzrə bələdçi

SVG piksellərdən deyil, çəkmə göstərişlərindən ibarət şəkil formatıdır. Loqo, ikon və ya diaqram SVG kimi saxlananda faylda "bu nöqtədən o nöqtəyə əyri çək və onu bu rənglə doldur" kimi əmrlər olur. Buna görə SVG istənilən ölçüdə kəskin qalır, çox vaxt çox kiçik olur və mətn redaktorunda açılıb redaktə edilə bilir. Bu məqalədə SVG-nin W3C standartları arasındakı yeri, faylın quruluşu, brauzer və proqram dəstəyi, təhlükəsizlik riskləri və SVG ilə PNG və ya JPG arasında çevirmə izah edilir.

SVG nədir?

SVG (Scalable Vector Graphics) iki ölçülü vektor qrafikasını təsvir etmək üçün XML əsaslı W3C standartıdır. Genişlənməsi .svg, MIME tipi isə image/svg+xml-dir. gzip ilə sıxılmış variant .svgz genişlənməsindən istifadə edir.

Rastr formatlar (JPG, PNG, WebP) şəkli sabit piksel şəbəkəsi kimi saxlayır; böyüdəndə piksellər görünür. SVG isə formaları riyazi olaraq təsvir edir və brauzer və ya proqram onları ekranın ayırdetməsi nə olursa olsun yenidən çəkir. MDN-in şəkil formatları bələdçisi SVG-ni çəkmə əmrləri ilə ifadə oluna bilən şəkillər üçün, xüsusilə göstərmə ölçüsü məlum olmadıqda və ya dəyişdikdə ideal seçim adlandırır və qeyd edir ki, fotoşəkillər üçün ümumiyyətlə faydalı deyil.

Tarixçə: SVG 1.0, 1.1 və SVG 2

• 4 sentyabr 2001: SVG 1.0 W3C Tövsiyəsi kimi dərc olundu.
• 14 yanvar 2003: SVG 1.1 Tövsiyə oldu. 1.1 dili modullara böldü və bu, mobil profillər kimi alt dəstləri müəyyən etməyi asanlaşdırdı.
• 16 avqust 2011: SVG 1.1 İkinci Nəşri dərc olundu. Bu gün brauzerlərin əsaslandığı sabit versiya budur.
• SVG 2: W3C-nin nəşr tarixçəsinə görə işçi layihələr 2012-ci ildən çıxmağa başladı, ilk Candidate Recommendation Snapshot isə 15 sentyabr 2016-cı ildə dərc olundu. Ən son snapshot 6 oktyabr 2026-cı il tarixlidir; sənəd hələ də Candidate Recommendation (namizəd tövsiyə) mərhələsindədir.

SVG 2 1.1 İkinci Nəşri üzərində qurulub və HTML və CSS ilə daha yaxşı inteqrasiyanı hədəfləyir. Filtrlər, maskalama və şriftlər kimi bəzi mövzular ayrı CSS və FX modullarına köçürülüb. Praktikada brauzerlər SVG 2-nin hissələrini tətbiq edir, ona görə də hər imkanın hər yerdə işlədiyini fərz etməyin.

SVG faylının quruluşu

Sadə SVG faylı belə görünür:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

Koordinat sistemi: viewBox, width və height

viewBox çəkilişin daxili koordinat sistemini müəyyən edir (burada 0-dan 100-ə qədər). width və height çəkilişin səhifədə nə qədər yer tutduğunu təyin edir. viewBox-u olan SVG CSS-də verdiyiniz istənilən ölçüyə mütənasib miqyaslanır. viewBox-u olmayan fayllar ölçüsü dəyişdiriləndə kəsilə bilər; bu, ən geniş yayılmış loqo səhvlərindən biridir.

Əsas elementlər

• Formalar: rect, circle, ellipse, line, polyline, polygon və istənilən şeyi çəkə bilən path.
• Mətn: text və tspan. Mətn seçilə və axtarıla bilən qalır, lakin baxış cihazında şrift yoxdursa, ehtiyat şrift istifadə olunur.
• Qruplaşdırma və təkrar istifadə: g, defs, symbol, use. İkon dəstləri çox vaxt bir faylda symbol elementləri kimi birləşdirilir.
• Rəngləmə: bərk rənglər, xətti və radial qradiyentlər, naxışlar, kəsmə konturları, maskalar və filtrlər (bulanıqlıq, kölgə).
• Üslub və animasiya: CSS SVG-yə üslub verə bilər; CSS animasiyaları və SMIL animasiya elementləri hərəkət əlavə edir.
• Daxil edilmiş məzmun: rastr şəkillər üçün image, HTML üçün foreignObject və JavaScript üçün script.

Rəng, şəffaflıq, laylar və səhifələr

SVG-də şəffaflıq təbii xüsusiyyətdir: çəkilməyən hər şey boşdur, opacity və fill-opacity isə yarımşəffaflığı təyin edir. Laylar g qrupları ilə ifadə olunur; Inkscape və Illustrator laylarını belə saxlayır. Rənglər standart olaraq sRGB-dir və rənglər rəqəm kimi yazıldığı üçün adi mənada bit dərinliyi məhdudiyyəti yoxdur. SVG çoxsəhifəli sənəd formatı deyil; çoxsəhifəli çertyojlar üçün PDF daha uyğundur.

Brauzerlərdə, sistemlərdə və proqramlarda dəstək

MDN-ə görə Chrome, Edge, Firefox, Opera və Safari-nin hamısı SVG-ni dəstəkləyir. Onu <img> vasitəsilə, CSS background-image kimi, HTML-in içində birbaşa və ya <object> və <iframe> ilə istifadə edə bilərsiniz. Inkscape, Adobe Illustrator, Affinity Designer və Figma kimi vektor alətləri SVG-ni oxuyur və yazır, Microsoft Office-in hazırkı versiyaları isə SVG qrafikası daxil etməyə imkan verir.

Başqa yerlərdə dəstək zəifdir: bir çox sosial şəbəkə, e-poçt proqramı, mesajlaşma tətbiqi və yükləmə forması SVG-ni rədd edir və ya önizləmə göstərmir. Bunun səbəblərindən biri aşağıda təsvir olunan təhlükəsizlik riskidir.

Təhlükəsizlik: SVG-yə sənəd kimi yanaşın

SVG XML sənədidir və script elementi, hadisə atributları (məsələn, onload) və xarici istinadlar ehtiva edə bilər. MDN-in "SVG as an image" səhifəsi izah edir ki, SVG <img> və ya CSS fonu vasitəsilə istifadə olunanda brauzerlər JavaScript-i söndürür və şəkillər və ya üslub cədvəlləri kimi xarici resursları yükləmir. Fayl birbaşa açılanda və ya <iframe>, <object> və ya <embed> ilə yerləşdiriləndə bu məhdudiyyətlər tətbiq olunmur.

Praktik nəticə: sayt istifadəçilərə SVG faylları yükləməyə icazə verirsə və onları birbaşa öz domenindən təqdim edirsə, fayla yerləşdirilmiş skript həmin saytın kontekstində işləyə bilər (saxlanılan XSS). Tipik qoruma tədbirləri:

• Yüklənən SVG-ni script-i, hadisə atributlarını, foreignObject-i və xarici keçidləri silən təmizləyicidən keçirin.
• İstifadəçi fayllarını ayrı domendən, sərt Content-Security-Policy ilə və ya yükləmə kimi (Content-Disposition: attachment) təqdim edin.
• Vektora ehtiyacınız yoxdursa, yüklənən SVG-ni serverdə PNG-yə çevirin və yalnız rastr versiyanı dərc edin.

Tipik istifadə sahələri

• Loqolar və brend materialları: bir fayl vizit kartlarından reklam lövhələrinə qədər kəskin qalır.
• İnterfeys ikonları: CSS ilə rənglənir və yüksək sıxlıqlı ekranlarda heç vaxt bulanıqlaşmır.
• Diaqramlar, xəritələr və sxemlər: D3.js kimi kitabxanalar məlumatları birbaşa SVG elementlərinə çəkir.
• Favikonlar: hazırkı brauzerlər SVG favikonlarını <link rel="icon" type="image/svg+xml"> vasitəsilə qəbul edir.
• Kəsmə və çap: lazer kəsiciləri, vinil kəsiciləri və tikmə maşınları vektor konturları ilə işləyir.

Güclü və zəif tərəfləri

Tez-tez rast gəlinən problemlər və həlləri

Sayt və ya tətbiq SVG-ni qəbul etmir

Ən asan həll PNG surətidir. SVG-dən PNG-yə çeviricimiz çəkilişi brauzerinizdə, seçdiyiniz piksel enində şəffaf PNG-yə çevirir. Faylınız yüklənmir və heç vaxt cihazınızdan çıxmır.

Mətn fərqli şriftlə görünür

SVG standart olaraq şriftləri daxil etmir; baxış sistemində şrift yoxdursa, ehtiyat şrift istifadə olunur. Şəkil kontekstində xarici şriftlər də yüklənmir. Dizayn alətinizdə mətni konturlara çevirin və ya şrifti daxil edin.

SVG səhifədə səhv ölçüdədir və ya kəsilib

viewBox olmadıqda və ya sabit width/height olduqda miqyaslama gözlənildiyi kimi işləmir. Kök svg elementinə çəkilişi əhatə edən viewBox əlavə edin və ölçünü CSS-də təyin edin.

Fayl gözləniləndən böyükdür

Dizayn alətləri SVG-yə redaktor metaməlumatlarını, həddindən artıq onluq rəqəmləri və gizli layları yazır. SVGO kimi optimallaşdırıcı onları silir. Serverdə gzip və ya Brotli sıxılması mətn əsaslı SVG-ni daha da kiçildir.

PNG loqomu SVG kimi lazımdır

Rastr şəkli həqiqətən vektora "çevirmək" mümkün deyil; alətlərin etdiyi izləmədir (tracing): formalar aşkar edilir və konturlar kimi yenidən çəkilir. PNG-dən SVG-yə və JPG-dən SVG-yə alətlərimiz 2-dən 8-ə qədər rənglə izləmə aparır. Nəticələr sadə loqolar və çəkilişlər üçün yaxşı, fotolar üçün isə kobud olur. Bu alətlərdə fayl təhlükəsiz bağlantı ilə serverlərimizə yüklənir, orada izlənir və ən geci 30 dəqiqə ərzində silinir.

Çevirmə tövsiyələri

• Hədəf ölçünü bilin: SVG-ni PNG-yə çevirəndə şəklin göstəriləcəyi ən böyük ölçünü seçin və yüksək sıxlıqlı ekranlar üçün onu iki dəfə artırın. Alətimizdə ən uzun tərəf 4096 piksələ qədər ola bilər; eni boş buraxsanız, kiçik çəkilişlər ən uzun tərəfi 1024 piksel olacaq şəkildə miqyaslanır.
• Foto məzmunu üçün JPG: SVG-yə foto daxil edilibsə və şəffaflığa ehtiyacınız yoxdursa, JPG və ya WebP PNG-dən kiçik olur; PNG-ni sonradan şəkil konvertorunda çevirə bilərsiniz.
• Favikonlar: Loqonuz SVG-dirsə, favikon yaradıcısı onu qəbul edir və paketə icon.svg əlavə edir.
• İzləmə üçün təmiz mənbə: PNG-dən SVG yaradarkən yüksək ayırdetməli, düz rəngli, küysüz şəkildən başlayın.

Tez-tez verilən suallar

SVG ilə PNG arasında fərq nədir?

PNG sabit sayda pikseldir və böyüdüləndə bulanıqlaşır. SVG formaları təsvir edir və istənilən ölçüdə kəskin şəkildə yenidən çəkilir. SVG loqolar və ikonlar, PNG və ya JPG isə fotolar və ekran görüntüləri üçün uyğundur.

SVG faylında virus ola bilərmi?

SVG icra olunan proqram deyil, lakin JavaScript ehtiva edə bilər. SVG şəkil kimi (<img>) göstəriləndə skriptlər işləmir, lakin fayl brauzerdə birbaşa açılanda işləyə bilər. Naməlum mənbədən gələn SVG-ni birbaşa açmaq əvəzinə baxış proqramında yoxlayın və ya PNG-yə çevirin.

SVG-ni Word-ə və ya PowerPoint-ə daxil edə bilərəmmi?

Microsoft Office-in hazırkı versiyaları SVG daxil etməyi dəstəkləyir. Köhnə versiyalar üçün və ya faylı başqa proqramlarla paylaşacaqsınızsa, PNG surəti daha etibarlıdır.

SVG-ni PNG-yə çevirmək keyfiyyəti azaldırmı?

PNG itkisizdir, lakin çəkiliş müəyyən piksel ölçüsünə sabitlənir. Kifayət qədər böyük en seçsəniz, heç bir itki hiss etməyəcəksiniz; PNG-ni sonradan böyütmək isə onu bulanıqlaşdıracaq.

SVG animasiyanı dəstəkləyirmi?

Bəli. Hərəkət CSS animasiyalarından, SMIL animasiya elementlərindən və JavaScript-dən gələ bilər. PNG-yə çevirmə sizə tək kadr verir.

Mənbələr

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: SVG 2 nəşr tarixçəsi
• MDN: SVG as an image
• MDN: Image file type and format guide