SVG HTML ichida: vektor rasmlar, ikonkalar va currentColor

Qisqacha: SVG — shakllar matn bilan tasvirlangan vektor rasm: istalgan o'lchamda tiniq, hajmi kichik. Uni sahifaga img bilan (oddiy va xavfsiz), to'g'ridan-to'g'ri <svg> kodi bilan (CSS rangini oladi) yoki sprite orqali (use bilan qayta ishlatiladi) qo'yish mumkin. Ikonkaga fill="currentColor" bersangiz, u atrofidagi matn rangini oladi. Bezak ikonka ekran o'quvchidan aria-hidden="true" bilan yashiriladi.

Bu darsda

• SVG faylining ichida nima borligini va viewBox vazifasini tushunasiz.
• SVG'ni to'rt xil usulda qo'yasiz va qaysi biri qachon kerakligini bilasiz.
• currentColor bilan ikonkani matn rangiga bog'laysiz.
• Ikonkalarni ekran o'quvchi uchun to'g'ri belgilaysiz.
• SVG'ni SVGO bilan kichraytirasiz va foydalanuvchi SVG'lari xavfini bilasiz.

Oldin bilishingiz kerak: figure va figcaption, XML va uning vorislari.

1. Nega bu kerak?

Choyxona saytiga ikonkalar kerak: telefon, manzil, piyola, Telegram. Ularni PNG qilib qo'ysangiz, retina ekranda xira bo'ladi — Responsive rasmlar darsidagidek har biriga 1x, 2x, 3x fayl kerak. Havola ustiga sichqoncha borganda ikonka rangini o'zgartirmoqchi bo'lsangiz — yana bitta rasm.

Rasm formatlari darsida vektor va raster farqini ko'rgan edik. SVG — vektor: u piksellarni emas, shakllarni saqlaydi. Shuning uchun u har qanday o'lchamda tiniq va ko'pincha bir necha yuz baytdan iborat. Ikonkalar va logotiplar uchun ideal.

2. SVG ichida nima bor

2.1 Bu — matn

SVG faylni VS Code'da oching — ichida rasm emas, matn. XML darsida ko'rgan teglar tili:

<svg viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="orange"/>
</svg>

Bu — to'q sariq doira ("quyosh"):

• circle — doira. cx va cy — markazi, r — radiusi.
• fill="orange" — ichi to'q sariq rangda.
• /> — XML'da bo'sh element shunday yopiladi.

Boshqa asosiy shakllar: rect (to'rtburchak), line (chiziq) va path (erkin chiziq). Ikonkalarning deyarli hammasi path bilan chiziladi. Uning d atributidagi harf va raqamlar — "qalamni shu nuqtaga olib bor, shu yerga chiz" buyruqlari. Ularni qo'lda yozish shart emas — SVG'ni dizayn dasturlari yoki ikonka kutubxonalari yaratadi.

2.2 viewBox — ichki koordinatalar

viewBox="0 0 100 100" — SVG'ning ichki o'lchov tizimi: chap yuqori burchak (0, 0), kenglik 100, balandlik 100. Doiraning cx="50" — aynan shu tizimda o'rtada.

width va height esa — sahifada qancha joy egallashi. Ularni o'zgartiring:

<svg viewBox="0 0 100 100" width="300" height="300">
  <circle cx="50" cy="50" r="40" fill="orange"/>
</svg>

Doira uch barobar katta bo'ldi — va baribir tiniq. Brauzer 100×100 lik ichki rasmni 300×300 joyga cho'zib chizdi. Vektor rasmning asosiy afzalligi aynan shu.

viewBox bo'lmasa, bu cho'zilish ishlamaydi: SVG faqat o'z o'lchamida chiziladi va kattalashtirsangiz, rasm kesilib qoladi.

Tekshirib ko'ring: Ikonka viewBox="0 0 24 24", sahifada width="48" height="48". Ekranda u qanday ko'rinadi?

3. SVG'ni sahifaga qo'yishning to'rt usuli

3.1 img bilan

<img src="assets/images/logo.svg" alt="Choyxona «Bahor»"
     width="160" height="40">

Xuddi JPEG kabi — img asoslari darsidagi hamma qoidalar ishlaydi. Oddiy, fayl brauzer keshida saqlanadi. Kamchiligi: SVG'ning ichiga CSS bilan "kirib" bo'lmaydi — masalan, rangini o'zgartirib bo'lmaydi.

Logotiplar va murakkab illyustratsiyalar uchun eng yaxshi usul.

3.2 Inline — kodni to'g'ridan-to'g'ri HTML'ga

SVG kodini HTML ichiga qo'yasiz:

<p>
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <path d="M4 8h13v5a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6ZM17 9h2a2 2
             0 0 1 0 4h-2" fill="none" stroke="currentColor"
          stroke-width="2"/>
  </svg>
  Ichimliklar
</p>

Bu — kichik piyola ikonkasi. Endi SVG sahifaning bir qismi: CSS uning rangi, o'lchami va hatto harakatini boshqara oladi. Qo'shimcha fayl yuklanmaydi.

Kamchiligi: har bir sahifada kod takrorlanadi va HTML kattalashadi. Kichik ikonkalar uchun qulay, katta illyustratsiyalar uchun — yo'q.

3.3 Sprite — bir marta yozib, ko'p marta ishlatish

Bir xil ikonka sahifada o'n marta uchrasa-chi? Uning kodini o'n marta nusxalamaslik uchun sprite usuli bor. Sahifa boshida ikonkalar bir marta, ko'rinmas holda e'lon qilinadi:

<svg style="display: none">
  <symbol id="i-piyola" viewBox="0 0 24 24">
    <path d="M4 8h13v5a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6ZM17 9h2a2 2
             0 0 1 0 4h-2" fill="none" stroke="currentColor"
          stroke-width="2"/>
  </symbol>
</svg>

• symbol — "shablon": o'zi ko'rinmaydi, lekin id bilan chaqiriladi.
• style="display: none" — butun svg blokini ko'rinmas qiladi. Bu — CSS'ning bitta qatori, CSS qismida batafsil o'rganamiz.

Keyin istalgan joyda use bilan chaqirasiz:

<svg width="20" height="20" aria-hidden="true">
  <use href="#i-piyola"/>
</svg>

href="#i-piyola" — sahifa ichidagi havolalar darsidagi fragment kabi: "shu id li shablonni shu yerga chiz". Ikonka kodi bitta joyda — o'zgartirsangiz, hamma joyda o'zgaradi.

3.4 CSS fon rasmi

Faqat bezak uchun SVG (naqsh, fon) — figure darsidagi qoida bo'yicha CSS background-image ga qo'yiladi.

3.5 Qaysi birini tanlash

4. currentColor — matn rangini olish

Oddiy SVG'da rang qat'iy yozilgan: fill="#000000". Havola ichidagi ikonka esa havola matni bilan bir xil rangda bo'lishi kerak — havola rangi o'zgarganda (ustiga sichqoncha kelganda, bosilgandan keyin) ikonka ham o'zgarsin.

Buning uchun rang o'rniga maxsus qiymat — currentColor yoziladi:

<a href="aloqa/">
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor"
            stroke-width="2"/>
  </svg>
  Aloqa
</a>

currentColor — "atrofdagi matnning rangi". Havola ko'k bo'lsa — ikonka ko'k. CSS bilan havolani qizil qilsangiz — ikonka ham qizil. Bitta ikonka, cheksiz rang.

Bu faqat inline va sprite usullarida ishlaydi. img ichidagi SVG sahifa rangini "ko'rmaydi".

Bo'sh joyni to'ldiring: ikonka atrofdagi matn rangini olishi uchun fill qiymati —

5. Ikonka kutubxonalari

Ikonkalarni o'zingiz chizish shart emas. Tayyor bepul kutubxonalar bor:

• Lucide (lucide.dev) — minglab chiziqli ikonkalar.
• Heroicons (heroicons.com) — Tailwind CSS mualliflaridan.
• Iconify (iconify.design) — o'nlab kutubxonalarni bitta qidiruvda birlashtiradi.

Ishlash tartibi oddiy: saytda ikonkani toping, Copy SVG tugmasini bosing va kodni HTML'ga joylang. Ko'pchiligida stroke="currentColor" allaqachon yozilgan bo'ladi.

Diqqat: Har bir kutubxonaning litsenziyasi bor. Yuqoridagilar erkin litsenziyalar bilan tarqatiladi, lekin shartlarini (masalan, mualliflik eslatmasini saqlash) o'qing. Internetdan topilgan tasodifiy ikonkani esa ruxsatsiz ishlatmang.

Eski saytlarda ikonkalar maxsus shriftlar bilan chiqarilgan — Urg'u teglari darsidagi <i class="fa-..."> shu usul. Bugun SVG afzal: tiniqroq, yengilroq va accessibility bilan yaxshi ishlaydi.

6. Ikonkalar va ekran o'quvchi

Ekran o'quvchi SVG'ni qanday o'qiydi? Bu ikonkaning vazifasiga bog'liq — xuddi alt matnlar darsidagidek.

6.1 Bezak ikonka — yashiring

Ikonka yonida matn bor (masalan, telefon ikonkasi va "Telefon" yozuvi) — ikonka yangi ma'lumot bermaydi. Uni ekran o'quvchidan yashiring:

<svg ... aria-hidden="true">...</svg>

aria-hidden="true" — "bu elementni ekran o'quvchi uchun yo'q deb hisobla". Bu — Ko'p sahifali sayt darsidagi aria-current ning "qarindoshi": aria- bilan boshlanadigan accessibility atributlari. Ularni ARIA asoslari darsida batafsil o'rganamiz.

6.2 Mazmunli SVG — nom bering

SVG o'zi ma'lumot bersa (masalan, grafik yoki yolg'iz turgan rasm), unga rasm roli va nom kerak:

<svg viewBox="0 0 100 100" width="100" height="100"
     role="img" aria-labelledby="quyosh-nomi">
  <title id="quyosh-nomi">Quyoshli kun: +32°</title>
  <circle cx="50" cy="50" r="40" fill="orange"/>
</svg>

• role="img" — "bu bir butun rasm", ekran o'quvchi ichidagi shakllarni alohida o'qimaydi.
• title — SVG ichidagi nomi, img dagi alt ning o'rnini bosadi.
• aria-labelledby — nomni title bilan aniq bog'laydi (ba'zi ekran o'quvchilar busiz title ni o'qimaydi).

img bilan qo'yilgan SVG uchun esa oddiy alt yetarli — 3.1-bo'limdagidek.

6.3 Faqat ikonkali tugma

Qidiruv tugmasida faqat lupa ikonkasi, matn yo'q. Tugmaning nomi bo'lishi shart — aks holda ekran o'quvchi shunchaki "tugma" deydi:

<button type="button" aria-label="Qidirish">
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor"
            stroke-width="2"/>
    <path d="m20 20-4-4" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

aria-label="Qidirish" — tugmaning ko'rinmas nomi. Ikonka esa aria-hidden — ekran o'quvchi faqat "Qidirish, tugma" deydi.

7. SVGO — SVG'ni kichraytirish

Figma, Illustrator yoki Inkscape'dan eksport qilingan SVG'da ko'p ortiqcha narsa bor: izohlar, dastur haqida ma'lumot, keraksiz aniqlikdagi raqamlar (4.000 o'rniga 4). SVGO ularni avtomatik tozalaydi:

npx svgo piyola.svg -o piyola.min.svg

-o — natijani qaysi faylga yozish. Buyruq Windows, macOS va Linux'da bir xil. Natija:

Done in 44 ms!
0.509 KiB - 58.5% = 0.211 KiB

Tarjimasi: "44 millisekundda tayyor. 0,509 KiB dan 58,5% kamaydi — 0,211 KiB." Fayl ikki barobardan ko'proq kichraydi, ko'rinishi esa o'zgarmaydi.

8. Hujumchi nigohi: SVG ichidagi kod

SVG — shunchaki rasm emas, hujjat. Uning ichida JavaScript ham bo'lishi mumkin:

<svg xmlns="http://www.w3.org/2000/svg">
  <script>/* hujumchi kodi */</script>
</svg>

Tasavvur qiling: choyxona saytida foydalanuvchilar profil rasmi yuklaydi va siz SVG'ga ham ruxsat berdingiz. Hujumchi ichida skripti bor SVG yuklaydi. Agar sayt bu faylni inline qo'shsa yoki uni to'g'ridan-to'g'ri ochadigan manzil bersa, skript sizning saytingiz nomidan ishga tushadi. U foydalanuvchilarning sessiyasini o'g'irlashi mumkin. Bu — XSS hujumining bir turi.

Qanday himoyalanish:

• img bilan ko'rsatilgan SVG'da skriptlar ishlamaydi. Begona SVG'ni hech qachon inline qo'shmang.
• Foydalanuvchi SVG'lariga umuman ruxsat bermaslik yoki ularni serverda PNG'ga aylantirish.
• Tozalash (sanitize) — maxsus kutubxonalar SVG'dan xavfli qismlarni olib tashlaydi. Ularni xavfsizlik qismida ko'ramiz.

O'zingiz kutubxonalardan olgan yoki o'zingiz chizgan SVG'lar xavfsiz. Xavf — begona fayllarda. Batafsil — HTML darajasidagi xavfsizlik darsida.

9. Ko'p uchraydigan xatolar

9.1 viewBox yo'q

SVG'ni kattalashtirdingiz — ichidagi rasm o'sha-o'sha kichik, qolgan joy bo'sh; yoki kichraytirdingiz — rasm kesilib qoldi. Tuzatish: viewBox qo'shing. Uning qiymatini odatda asl width va height dan olasiz: width="24" height="24" → viewBox="0 0 24 24".

9.2 Ikonka rangi o'zgarmayapti

CSS'da havola rangini o'zgartirdingiz, ikonka esa qora qoldi. Sabab — SVG ichida fill="#000" yoki stroke="black" qat'iy yozilgan. Tuzatish: ularni currentColor ga almashtiring.

9.3 Ikonka ikki marta o'qiladi

<a href="tel:+998900000000">
  <svg role="img" aria-labelledby="t">
    <title id="t">Telefon</title>...
  </svg>
  Telefon
</a>

Ekran o'quvchi "Telefon, Telefon" deydi. Tuzatish: yonida matn bo'lsa, ikonka — aria-hidden="true", title siz.

9.4 O'lchamsiz inline SVG

width va height siz inline SVG ko'pincha butun kenglikni egallab oladi — kichik ikonka ekranni to'ldiradi. Tuzatish: har doim width va height (CSS yozilgach, ular CSS'da boshqariladi).

10. Mashqlar

1-mashq (oson): Qaysi usul?

1. Sayt tepasidagi murakkab rangli logotip →
2. Menyuda 15 marta takrorlanadigan kichik piyola ikonkasi →

2-mashq (o'rta): Ikonkalarni tuzating

<a href="aloqa/">
  <svg width="20" height="20">
    <circle cx="12" cy="12" r="9" fill="none" stroke="#000"
            stroke-width="2"/>
  </svg>
  Aloqa
</a>
<button type="button">
  <svg viewBox="0 0 24 24" width="20" height="20">
    <circle cx="11" cy="11" r="7" fill="none" stroke="black"/>
  </svg>
</button>

<a href="aloqa/">
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor"
            stroke-width="2"/>
  </svg>
  Aloqa
</a>
<button type="button" aria-label="Qidirish">
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor"/>
  </svg>
</button>

3-mashq (qiyin): Choyxona ikonkalari

1. Lucide yoki Heroicons'dan uchta ikonka tanlang: telefon, xarita belgisi, piyola.
2. Ularni sahifa boshida sprite qiling (symbol bilan, id lari i-telefon, i-manzil, i-piyola).
3. aloqa/index.html dagi kontaktlar yoniga use bilan qo'shing — aria-hidden bilan, currentColor bilan.
4. Logotipni img bilan qo'ying. Uni SVGO bilan kichraytiring va hajmini yozib oling.
5. npx html-validate — xato 0.

<li>
  <svg width="20" height="20" aria-hidden="true">
    <use href="#i-telefon"/>
  </svg>
  <a href="tel:+998900000000">
    +998&nbsp;90&nbsp;000&nbsp;00&nbsp;00</a>
</li>

11. Real ishda

• Deyarli har bir zamonaviy saytda ikonkalar — SVG. Dizaynerlar Figma'dan SVG eksport qiladi, dasturchi ularni sprite yoki komponentlarga aylantiradi.
• React'da (kursda o'rganamiz) ikonkalar ko'pincha komponent: <PhoneIcon />. Ichida esa shu darsdagi inline SVG va currentColor.
• Grafiklar va xaritalar — ko'p grafik kutubxonalari natijani SVG qilib chizadi. Uni DevTools'da ochsangiz, path va rect larni ko'rasiz.
• Xavfsizlik auditi — foydalanuvchi yuklaydigan fayllar orasida SVG'ga ruxsat berilganmi — tekshiriladigan standart savol.

Xulosa

• SVG — matn bilan yozilgan vektor rasm: istalgan o'lchamda tiniq, kichik hajmli.
• viewBox — ichki koordinatalar; width/height — sahifadagi joy; viewBox siz masshtab ishlamaydi.
• To'rt usul: img (logotip), inline (bitta ikonka), sprite symbol + use (takroriy), CSS fon (bezak).
• currentColor — ikonka atrofdagi matn rangini oladi (faqat inline va sprite'da).
• Bezak ikonka — aria-hidden="true"; mazmunli SVG — role="img" + title; faqat ikonkali tugma — aria-label.
• SVGO SVG'ni kichraytiradi; begona SVG ichida skript bo'lishi mumkin — uni inline qo'shmang.

Keyingi dars: canvas, image map va boshqa joylash teglari — kam ishlatiladigan, lekin bilish kerak bo'lgan teglar.

Manbalar

• MDN: "SVG: Scalable Vector Graphics", "SVG in HTML", <use>, <symbol> — developer.mozilla.org
• SVGO — github.com/svg/svgo
• OWASP: "File Upload Cheat Sheet" (SVG va XSS) — cheatsheetseries.owasp.org