SVG nima? Vektor format boʻyicha qoʻllanma

SVG piksellardan emas, chizish koʻrsatmalaridan tashkil topgan rasm formatidir. Logotip, ikonka yoki diagramma SVG sifatida saqlanganda faylda "shu nuqtadan u nuqtagacha egri chiziq chiz va uni shu rang bilan toʻldir" kabi buyruqlar boʻladi. Shuning uchun SVG har qanday oʻlchamda aniq qoladi, koʻpincha juda kichik boʻladi va uni matn muharririda ochib tahrirlash mumkin. Bu maqolada SVG ning W3C standartlari orasidagi oʻrni, fayl tuzilishi, brauzer va dasturlarda qoʻllab-quvvatlanishi, xavfsizlik xatarlari va SVG bilan PNG yoki JPG oʻrtasida qanday konvertatsiya qilish koʻrib chiqiladi.

SVG nima?

SVG (Scalable Vector Graphics, masshtablanadigan vektor grafika) ikki oʻlchamli vektor grafikani tavsiflash uchun XML ga asoslangan W3C standartidir. Kengaytmasi .svg, MIME turi image/svg+xml. gzip bilan siqilgan varianti .svgz kengaytmasidan foydalanadi.

Rastrli formatlar (JPG, PNG, WebP) rasmni qatʼiy piksellar toʻri sifatida saqlaydi; uni kattalashtirsangiz, piksellar koʻrinib qoladi. SVG esa shakllarni matematik tavsiflaydi, brauzer yoki dastur ularni ekran qanday aniqlikka ega boʻlsa, shunday aniqlikda qayta chizadi. MDN ning rasm formatlari qoʻllanmasi SVG ni chizish buyruqlari bilan ifodalanadigan rasmlar uchun, ayniqsa koʻrsatish oʻlchami nomaʼlum yoki oʻzgaruvchan boʻlganda, ideal tanlov deb ataydi va u odatda fotosuratlar uchun foydali emasligini qayd etadi.

Tarix: SVG 1.0, 1.1 va SVG 2

• 2001 yil 4 sentabr: SVG 1.0 W3C Tavsiyasi sifatida eʼlon qilindi.
• 2003 yil 14 yanvar: SVG 1.1 Tavsiyaga aylandi. 1.1 tilni modullarga ajratdi, bu esa mobil profillar kabi kichik toʻplamlarni belgilashni osonlashtirdi.
• 2011 yil 16 avgust: SVG 1.1 Second Edition eʼlon qilindi. Bu bugun brauzerlar tayanadigan barqaror versiya.
• SVG 2: W3C nashrlar tarixiga koʻra, ishchi loyihalar 2012 yildan chiqa boshlagan, birinchi Candidate Recommendation Snapshot esa 2016 yil 15 sentabrda eʼlon qilingan. Soʻnggi snapshot 2026 yil 6 oktabr sanasiga ega; hujjat hanuz Candidate Recommendation (nomzod tavsiya) bosqichida.

SVG 2 1.1 Second Edition ustiga quriladi va HTML hamda CSS bilan yaxshiroq integratsiyani maqsad qiladi. Filtrlar, niqoblash va shriftlar kabi baʼzi mavzular alohida CSS va FX modullariga koʻchirilgan. Amalda brauzerlar SVG 2 ning ayrim qismlarini amalga oshiradi, shuning uchun har bir imkoniyat hamma joyda ishlaydi deb hisoblamang.

SVG fayl tuzilishi

Oddiy SVG fayl quyidagicha koʻrinadi:

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

Koordinatalar tizimi: viewBox, width va height

viewBox chizmaning ichki koordinatalar tizimini belgilaydi (bu yerda 0 dan 100 gacha). width va height chizma sahifada qancha joy egallashini belgilaydi. viewBox ga ega SVG CSS da berilgan har qanday oʻlchamga mutanosib ravishda masshtablanadi. viewBox siz fayllar oʻlchami oʻzgartirilganda qirqilib qolishi mumkin, bu logotiplarda eng keng tarqalgan xatolardan biri.

Asosiy elementlar

• Shakllar: rect, circle, ellipse, line, polyline, polygon va istalgan narsani chiza oladigan path.
• Matn: text va tspan. Matn tanlanadigan va qidiriladigan boʻlib qoladi, ammo koʻrish qurilmasida shrift boʻlmasa, zaxira shrift ishlatiladi.
• Guruhlash va qayta foydalanish: g, defs, symbol, use. Ikonka toʻplamlari koʻpincha bitta faylda symbol elementlari sifatida jamlanadi.
• Boʻyash: yaxlit ranglar, chiziqli va radial gradiyentlar, naqshlar, qirqish konturlari, niqoblar va filtrlar (xiralashtirish, soya).
• Uslub va animatsiya: CSS SVG ga uslub bera oladi; CSS animatsiyalari va SMIL animatsiya elementlari harakat qoʻshadi.
• Joylangan mazmun: rastrli rasmlar uchun image, HTML uchun foreignObject va JavaScript uchun script.

Rang, shaffoflik, qatlamlar va sahifalar

SVG da shaffoflik tabiiy: chizilmagan hamma narsa boʻsh, opacity va fill-opacity esa yarim shaffoflikni belgilaydi. Qatlamlar g guruhlari bilan ifodalanadi; Inkscape va Illustrator oʻz qatlamlarini shu tarzda saqlaydi. Ranglar sukut boʻyicha sRGB, odatiy maʼnodagi bit chuqurligi cheklovi esa yoʻq, chunki ranglar raqamlar sifatida yoziladi. SVG koʻp sahifali hujjat formati emas; koʻp sahifali chizmalar uchun PDF yaxshiroq mos keladi.

Brauzerlar, tizimlar va dasturlarda qoʻllab-quvvatlash

MDN ga koʻra, Chrome, Edge, Firefox, Opera va Safari SVG ni qoʻllab-quvvatlaydi. Uni <img> orqali, CSS background-image sifatida, HTML ichida bevosita yoki <object> va <iframe> bilan ishlatishingiz mumkin. Inkscape, Adobe Illustrator, Affinity Designer va Figma kabi vektor vositalari SVG ni oʻqiydi va yozadi, Microsoft Office ning amaldagi versiyalari esa SVG grafikasini qoʻyish imkonini beradi.

Boshqa joylarda qoʻllab-quvvatlash zaif: koʻplab ijtimoiy tarmoqlar, pochta dasturlari, messenjerlar va yuklash shakllari SVG ni rad etadi yoki oldindan koʻrinishini koʻrsatmaydi. Buning sabablaridan biri quyida tasvirlangan xavfsizlik xatari.

Xavfsizlik: SVG ga hujjat kabi munosabatda boʻling

SVG XML hujjat boʻlib, unda script elementi, hodisa atributlari (masalan, onload) va tashqi havolalar boʻlishi mumkin. MDN ning "SVG as an image" sahifasida tushuntirilishicha, SVG <img> yoki CSS foni orqali ishlatilganda brauzerlar JavaScript ni oʻchiradi va rasmlar yoki uslublar jadvallari kabi tashqi resurslarni yuklamaydi. Fayl toʻgʻridan-toʻgʻri ochilganda yoki <iframe>, <object> yoki <embed> bilan joylanganda bu cheklovlar amal qilmaydi.

Amaliy oqibat: agar sayt foydalanuvchilarga SVG fayl yuklashga ruxsat bersa va ularni toʻgʻridan-toʻgʻri oʻz domenidan bersa, faylga joylangan skript shu sayt kontekstida ishga tushishi mumkin (saqlangan XSS). Odatiy himoya choralari:

• Yuklangan SVG ni script, hodisa atributlari, foreignObject va tashqi havolalarni olib tashlaydigan tozalovchi (sanitizer) orqali oʻtkazing.
• Foydalanuvchi fayllarini alohida domendan, qatʼiy Content-Security-Policy bilan yoki yuklab olinadigan fayl sifatida (Content-Disposition: attachment) bering.
• Agar vektor kerak boʻlmasa, yuklangan SVG ni serverda PNG ga aylantiring va faqat rastrli versiyasini eʼlon qiling.

Odatiy qoʻllanish sohalari

• Logotiplar va brend materiallari: bitta fayl vizit kartochkadan bilbordgacha aniq qoladi.
• Interfeys ikonkalari: CSS bilan rang berish mumkin va yuqori zichlikdagi ekranlarda hech qachon xiralashmaydi.
• Diagrammalar, xaritalar va sxemalar: D3.js kabi kutubxonalar maʼlumotlarni toʻgʻridan-toʻgʻri SVG elementlariga chizadi.
• Faviconlar: zamonaviy brauzerlar SVG faviconlarni <link rel="icon" type="image/svg+xml"> orqali qabul qiladi.
• Kesish va chop etish: lazerli kesish, vinil kesish va kashta tikish mashinalari vektor konturlar bilan ishlaydi.

Kuchli va zaif tomonlari

Keng tarqalgan muammolar va ularni hal qilish

Sayt yoki ilova SVG ni qabul qilmaydi

Eng oson yechim PNG nusxa. Bizning SVG dan PNG ga konvertorimiz chizmani brauzeringizda, siz tanlagan piksel kengligida shaffof PNG ga renderlaydi. Faylingiz yuklanmaydi va hech qachon qurilmangizdan chiqmaydi.

Matn boshqa shriftda koʻrinadi

SVG sukut boʻyicha shriftlarni joylamaydi; koʻrish tizimida shrift boʻlmasa, zaxira shrift ishlatiladi. Rasm kontekstida tashqi shriftlar ham yuklanmaydi. Dizayn vositangizda matnni konturlarga aylantiring yoki shriftni joylang.

SVG sahifada notoʻgʻri oʻlchamda yoki qirqilgan

viewBox boʻlmasa yoki width/height qatʼiy belgilangan boʻlsa, masshtablash kutilganidek ishlamaydi. Ildiz svg elementiga chizmani qamrab oladigan viewBox qoʻshing va oʻlchamni CSS da belgilang.

Fayl kutilganidan katta

Dizayn vositalari SVG ga muharrir metamaʼlumotlari, ortiqcha kasr xonalari va yashirin qatlamlarni yozadi. SVGO kabi optimallashtiruvchi ularni olib tashlaydi. Serverdagi gzip yoki Brotli siqish matnga asoslangan SVG ni yanada kichraytiradi.

PNG logotipim SVG koʻrinishida kerak

Rastrli rasmni haqiqatan vektorga "aylantirib" boʻlmaydi; vositalar bajaradigan ish trassirovka: shakllar aniqlanadi va konturlar sifatida qayta chiziladi. Bizning PNG dan SVG ga va JPG dan SVG ga vositalarimiz 2 dan 8 gacha rang bilan trassirovka qiladi. Natijalar oddiy logotiplar va chizmalar uchun yaxshi, fotosuratlar uchun esa dagʻal. Bu vositalarda fayl xavfsiz ulanish orqali serverlarimizga yuklanadi, u yerda trassirovka qilinadi va eng koʻpi bilan 30 daqiqa ichida oʻchiriladi.

Konvertatsiya boʻyicha maslahatlar

• Maqsadli oʻlchamni biling: SVG ni PNG ga renderlaganda rasm koʻrsatiladigan eng katta oʻlchamni tanlang, yuqori zichlikdagi ekranlar uchun uni ikki barobar qiling. Bizning vositamizda eng uzun tomon 4096 pikselgacha boʻlishi mumkin; kenglikni boʻsh qoldirsangiz, kichik chizmalar eng uzun tomoni 1024 piksel boʻladigan qilib masshtablanadi.
• Foto mazmun uchun JPG: agar SVG ichida fotosurat joylangan boʻlsa va shaffoflik kerak boʻlmasa, JPG yoki WebP PNG dan kichikroq; PNG ni keyin rasm konvertorida aylantirishingiz mumkin.
• Faviconlar: agar logotipingiz SVG boʻlsa, favicon yaratish vositasi uni qabul qiladi va paketga icon.svg ni qoʻshadi.
• Trassirovka uchun toza manba: PNG dan SVG yaratganda yuqori aniqlikdagi, tekis rangli, shovqinsiz rasmdan boshlang.

Koʻp beriladigan savollar

SVG va PNG oʻrtasida qanday farq bor?

PNG qatʼiy sondagi piksellardan iborat va kattalashtirilganda xiralashadi. SVG shakllarni tavsiflaydi va har qanday oʻlchamda aniq qayta chiziladi. SVG logotiplar va ikonkalar uchun, PNG yoki JPG esa fotosuratlar va skrinshotlar uchun mos.

SVG faylda virus boʻlishi mumkinmi?

SVG bajariladigan dastur emas, lekin unga JavaScript joylash mumkin. SVG rasm sifatida (<img>) koʻrsatilganda skriptlar ishlamaydi, biroq fayl brauzerda toʻgʻridan-toʻgʻri ochilganda ishlashi mumkin. Nomaʼlum manbadan kelgan SVG ni toʻgʻridan-toʻgʻri ochish oʻrniga koʻruvchida tekshiring yoki PNG ga aylantiring.

SVG ni Word yoki PowerPoint ga qoʻysa boʻladimi?

Microsoft Office ning amaldagi versiyalari SVG qoʻyishni qoʻllab-quvvatlaydi. Eski versiyalar uchun yoki faylni boshqa dasturlar bilan ulashsangiz, PNG nusxa xavfsizroq.

SVG ni PNG ga aylantirish sifatni yoʻqotadimi?

PNG yoʻqotishsiz, lekin chizma piksel oʻlchamiga qotiriladi. Yetarlicha katta kenglikni tanlasangiz, hech qanday yoʻqotishni sezmaysiz; PNG ni keyinroq kattalashtirish uni xiralashtiradi.

SVG animatsiyani qoʻllab-quvvatlaydimi?

Ha. Harakat CSS animatsiyalari, SMIL animatsiya elementlari va JavaScript orqali boʻlishi mumkin. PNG ga aylantirish sizga bitta kadr beradi.

Manbalar

• 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 nashrlar tarixi
• MDN: SVG as an image
• MDN: Image file type and format guide