SVG va ikonka pipeline

Qisqacha: SVG ikonkani uch yo'l bilan ulash mumkin: <img src> (oddiy, lekin CSS rangini o'zgartirib bo'lmaydi), inline <svg> (rang currentColor bilan matn rangidan olinadi) va sprite — bitta fayldagi ko'p <symbol> va <use href="ikonlar.svg#osh">. Dizayn dasturlaridan chiqqan SVG ortiqcha ma'lumotga to'la — SVGO uni xavfsiz kichraytiradi (bizning misolda −72 %). Vite'da ?raw SVG matnini beradi, React'da esa vite-plugin-svgr uni komponentga aylantiradi.

Bu darsda

• SVG'ni <img>, inline va sprite usulida ulaysiz va har birining narxini bilasiz.
• viewBox va currentColor ikonka uchun nega muhimligini tushuntira olasiz.
• SVGO bilan SVG'ni kichraytirasiz va natijasini o'qiysiz.
• O'z sprite yasovchi skriptingizni yozasiz.
• Vite'da SVG import variantlarini va vite-plugin-svgr ni taniysiz.

Oldin bilishingiz kerak: SVG HTML ichida va ikonkalar, SVG'ni CSS bilan stillash va ikonka tizimi, Vite IV: assetlar va maxsus importlar.

1. Nega bu kerak?

Jasur aka menyuga har taom yoniga kichik ikonka qo'ymoqchi: osh, choy, manti. Dizayner Figma'dan (yoki Inkscape'dan) SVG fayllarni yubordi. Sardor ularni <img> bilan qo'ydi. Uch muammo chiqdi:

1. Qorong'i mavzuda ikonkalar ko'rinmay qoldi — ular yashil chiziqli, fon ham to'q. CSS bilan rangini o'zgartirib bo'lmadi.
2. Har ikonka — alohida HTTP so'rov. Menyuda 20 ta taom — 20 ta so'rov.
3. Bir fayl 1.2 KB, ichidagi rasm esa ikkita chiziq. Qolgani — dizayn dasturining "izlari".

SVG'ni (SVG HTML ichida va ikonka tizimi darslarida) HTML va CSS tomonidan bilasiz. Bu dars — pipeline (quvur): dizaynerdan kelgan fayl brauzerga qanday yo'l bilan, qanday tozalanib yetib boradi. Sxema:

flowchart LR
  A["Figma / Inkscape<br/>eksport"] --> B["SVGO<br/>tozalash"]
  B --> C["rang →<br/>currentColor"]
  C --> D{"qanday<br/>ulash?"}
  D --> E["img"]
  D --> F["inline svg"]
  D --> G["sprite + use"]

Chapdan o'ngga: avval tozalaymiz, keyin rangni "moslashuvchan" qilamiz, oxirida ulash usulini tanlaymiz.

2. Ulashning uch usuli

2.1 Jonli taqqoslash

Quyidagi natijada bitta "osh" ikonkasi uch xil ulangan. Birinchi ikkitasi — sprite'dagi <symbol> va <use>, rangi ota elementning color xususiyatidan. Uchinchisi — <img>.

<style>
  .qator { display: flex; gap: 1.5rem; font: 15px system-ui; }
  .qator span { display: grid; justify-items: center; gap: 4px; }
  .ikon { width: 48px; height: 48px; }
  .yashil { color: #1f6f4a; }
  .qizil { color: #b3261e; }
</style>
<svg width="0" height="0" style="position: absolute"
     aria-hidden="true">
  <symbol id="osh" viewBox="0 0 24 24">
    <path d="M3 14c0 4.4 4 8 9 8s9-3.6 9-8Z" fill="none"
          stroke="currentColor" stroke-width="2"/>
    <path d="M8 10c0-2 2-2 2-4m3 4c0-2 2-2 2-4" fill="none"
          stroke="currentColor" stroke-width="2"/>
  </symbol>
</svg>
<div class="qator">
  <span class="yashil">
    <svg class="ikon" aria-hidden="true"><use href="#osh"/></svg>
    yashil
  </span>
  <span class="qizil">
    <svg class="ikon" aria-hidden="true"><use href="#osh"/></svg>
    qizil
  </span>
  <span class="qizil">
    <img class="ikon" alt=""
         src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M3%2014c0%204.4%204%208%209%208s9-3.6%209-8Z'%20fill='none'%20stroke='currentColor'%20stroke-width='2'/%3E%3C/svg%3E">
    img
  </span>
</div>

Qarang: birinchi ikki ikonka — bitta <symbol>, lekin turli rang. Uchinchisi ham currentColor bilan yozilgan, lekin qora: <img> ichidagi SVG — alohida hujjat, u sahifaning CSS'ini va color ini ko'rmaydi. "Tahrirlab ko'rish" bilan .qizil rangini o'zgartiring — birinchi ikki usul darhol kuzatadi.

2.2 Qaysi biri qachon

Qoida: logotip va katta rasm — <img>. Interfeysdagi ko'p kichik ikonka — sprite. Bitta-ikkita, animatsiyali yoki murakkab boshqariladigan — inline.

2.3 viewBox va currentColor — ikonkaning ikki sharti

viewBox="0 0 24 24" — SVG ichidagi koordinatalar tizimi: "chizma 24×24 birlikda". U bo'lsa, ikonka istalgan o'lchamga (width: 48px) chiroyli cho'ziladi. width/height atributlari bo'lsa-yu viewBox bo'lmasa — ikonka o'lchamini o'zgartirganda kesiladi yoki kichik qoladi. Sprite skriptimiz viewBox siz faylni rad etadi (pastda).

currentColor — "ota elementdagi color qiymati". Ikonka faylida stroke="#1f6f4a" emas, stroke="currentColor" bo'lsa, rangni CSS boshqaradi: tugma ustiga kelganda (:hover), qorong'i mavzuda, xato holatida. Bu — Sardorning birinchi muammosining yechimi.

2.4 Ikonka shriftlari — eski usul

Eski loyihalarda (2012–2018) ikonkalar ko'pincha shrift sifatida ulangan: Font Awesome, Glyphicons. Har ikonka — shriftdagi bitta "harf", HTML'da <i class="fa fa-coffee"></i>. Rangi color dan, o'lchami font-size dan — qulay tuyulgan. Muammolari:

• Butun shrift yuklanadi: 5 ta ikonka uchun 600 ta ikonkali fayl.
• Shrift yuklanmasa (sekin internet, bloklovchi) — o'rnida kvadrat yoki boshqa harf.
• Ekran o'quvchi "harf"ni o'qib yuborishi mumkin; chiziqlar matn kabi silliqlanadi va xira chiqadi.

SVG sprite xuddi shu qulayliklarni (currentColor, bitta fayl) beradi, lekin bu muammolarsiz. Eski loyihada fa- klasslarini ko'rsangiz — bu o'sha davr; yangi kodda SVG ishlating.

Tekshirib ko'ring: Sprite'dagi <symbol> sahifada nega o'z-o'zidan ko'rinmaydi, lekin <use> uni chizadi?

2.5 Kirish imkoniyati

• Bezak ikonka (yonida matn bor: " Osh") — aria-hidden="true": ekran o'quvchi (Malika ishlatadigan NVDA) uni o'qimaydi.
• Ma'noli ikonka (faqat ikonka, matnsiz tugma) — tugmaga aria-label="Savatga qo'shish", ikonkaga esa aria-hidden.
• <img> — alt majburiy: bezak bo'lsa alt="".

Tekshirib ko'ring: Qorong'i mavzu uchun ikonkalarni oq qilish kerak. <img src="osh.svg"> bilan buni qanday qilasiz?

3. SVGO: kichraytirish

3.1 Dizayn dasturining izlari

Dizayn dasturlari SVG'ga o'zlari uchun ma'lumot yozadi: tahrirlovchi nomi, qatlamlar, masshtab, yashirin elementlar. Mana Inkscape uslubidagi eksport (namuna uchun biz yozdik — haqiqiy eksportlar shunday ko'rinadi), 1.2 KB:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
   version="1.1"
   id="svg1"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview1"
     pagecolor="#ffffff"
     inkscape:zoom="22.627417" />
  …

Brauzerga sodipodi:namedview, inkscape:zoom, izoh, version, id lar kerak emas. Koordinatalar esa 3.0000000,14.000000 — keraksiz nollar bilan.

3.2 SVGO ishga tushiramiz

SVGO (SVG Optimizer, 2026-10 holatiga 4.1.0) — SVG'ni ko'rinishini o'zgartirmasdan kichraytiradigan Node vositasi:

npm i -D -E svgo@4.1.0
npx svgo osh-eksport.svg -o osh.svg

Chiqishda oxirgi qatorga qarang: "oldingi hajm − tejalgan foiz = yangi hajm".

osh-eksport.svg:
Done in 47 ms!
1.208 KiB - 72.3% = 0.335 KiB

Fayl 1.2 KiB dan 0.3 KiB ga tushdi — deyarli to'rtdan biri qoldi. Natija — bitta qator (o'qish uchun biz bo'ldik):

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
  viewBox="0 0 24 24"><path d="M3 14c0 4.418 4.03 8 9 8s9-3.582 9-8Z"
  style="fill:none;stroke:#1f6f4a;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round"/><path d="M8 10c0-2 2-2 2-4m3 4c0-2 2-2 2-4"
  style="fill:none;stroke:#1f6f4a;stroke-width:2;
  stroke-linecap:round"/></svg>

Nima o'zgardi: izoh, <?xml …?>, Inkscape nomlar fazosi, namedview, bo'sh <defs>, guruh (<g>), id lar — o'chdi. M 3.0000000,14.000000 C … → M3 14c…: koordinatalar qisqardi va nisbiy buyruqlarga (c — kichik harf) o'tdi. viewBox — saqlandi (SVGO 4 sukut bo'yicha uni olib tashlamaydi).

3.3 Allaqachon toza fayllar

Hamma SVG ham bunday "semiz" emas. Sinab ko'rdik:

vazifalar ikonkasini biz qo'lda yozganmiz — u allaqachon ixcham. Vite shablonining fayllari ham oldindan optimallashtirilgan. Saboq: SVGO eng ko'p dizayn dasturidan to'g'ridan-to'g'ri kelgan fayllarga yordam beradi. Shuning uchun uni pipeline'ga — fayl loyihaga kirgan joyga qo'yamiz, bir martalik qo'l ishi qilib emas.

3.4 Xavfli optimallashtirishlar

SVGO ba'zan ko'rinishga ta'sir qiladi: id larni o'chirsa, CSS yoki <use href="#…"> ularni topmaydi; juda kam aniqlik (--precision) egri chiziqlarni buzadi. Sozlama fayli svgo.config.mjs da plaginlarni o'chirish mumkin. Qoida: optimallashtirgandan keyin ikonkani ko'z bilan tekshiring.

Tekshirib ko'ring: SVGO ikonkadan id="osh-chizigi" ni o'chirib yubordi. Qachon bu muammo?

4. Sprite: o'z skriptimiz

4.1 Sprite nima

Sprite — ko'p ikonka bitta faylda. SVG'da har ikonka — <symbol id="…" viewBox="…">, o'zi ko'rinmaydi. Ishlatish — <use href="ikonlar.svg#osh">: "ikonlar.svg faylidagi osh belgisini shu yerga chiz". Brauzer faylni bir marta yuklaydi va keshlaydi.

Vite shablonining o'zida ham sprite bor — public/icons.svg (5 KB, ichida <symbol id="github-icon">, discord-icon va boshqalar), main.ts da <use href="/icons.svg#documentation-icon">.

4.2 sprite.mjs

ikonlar/ papkadagi har SVG'dan <symbol> yasab, public/ikonlar.svg ga yozadigan skript:

// sprite.mjs — ikonlar/*.svg → public/ikonlar.svg (<symbol> lar)
import { mkdirSync, readdirSync, readFileSync } from "node:fs";
import { writeFileSync } from "node:fs";

function toSymbol(name) {
  const svg = readFileSync(`ikonlar/${name}`, "utf8");
  const viewBox = svg.match(/viewBox="([^"]+)"/)?.[1];
  const body = svg.match(/<svg[^>]*>([\s\S]*)<\/svg>/)?.[1];
  if (!viewBox || body === undefined) {
    throw new Error(`${name}: viewBox yoki <svg> topilmadi`);
  }
  const id = name.replace(".svg", "");
  const open = `<symbol id="${id}" viewBox="${viewBox}">`;
  return open + body.trim() + "</symbol>";
}

const symbols = readdirSync("ikonlar")
  .filter((name) => name.endsWith(".svg"))
  .toSorted()
  .map(toSymbol);
const svgNs = "http://www.w3.org/2000/svg";
const lines = [`<svg xmlns="${svgNs}">`, ...symbols, "</svg>"];
mkdirSync("public", { recursive: true });
writeFileSync("public/ikonlar.svg", lines.join("\n") + "\n");
console.log(`public/ikonlar.svg: ${symbols.length} ta ikon`);

• match(/viewBox="([^"]+)"/)?.[1] — RegExp guruhi: qo'shtirnoq ichidagi qiymat. ?. — topilmasa undefined (xato emas).
• <svg[^>]*>([\s\S]*)<\/svg> — ochuvchi tegdan yopuvchigacha hamma narsa ([\s\S] — yangi qatorlar ham).
• viewBox yo'q bo'lsa — xato: ikonka sprite'da noto'g'ri cho'zilardi.
• .toSorted() — natija har kompyuterda bir xil tartibda (git diff toza).

ikonlar/ da osh.svg (SVGO'dan keyin, rang currentColor ga almashtirilgan) va choy.svg:

node sprite.mjs

public/ikonlar.svg: 2 ta ikon

HTML'da: <svg class="ikon" aria-hidden="true"><use href="/ikonlar.svg#osh" /></svg>. Vite build'da public/ikonlar.svg dist/ ga o'zgarishsiz ko'chdi, <use href> ham o'zgarmadi (Vite IV dagi public/ qoidasi). Sayt pastki papkada bo'lsa (base: "./"), href ni nisbiy yozing: ikonlar.svg#osh.

Bunday skriptni package.json ga qo'shish mumkin ("ikonlar": "svgo -f ikonlar && node sprite.mjs") yoki Vite plaginiga aylantirish — build boshida (buildStart) yasaydi.

4.3 Sprite va CSP, boshqa domen

<use href="https://cdn.example.com/ikonlar.svg#osh"> — ishlamaydi: brauzerlar <use> uchun boshqa origin'dan faylni yuklamaydi. Sprite sayt bilan bir domenda bo'lsin. vazifalar dagi CSP (img-src 'self') bilan ham mos: o'z faylimiz.

5. Vite'da SVG import variantlari

Vite IV da SVG importining asosiy shakllarini ko'rdik. Ikonka nuqtai nazaridan:

?raw + inline. Sinadik: import oshSvg from "./osh.svg?raw" va box.innerHTML = oshSvg. Build ichida SVG matni satr bo'lib qoldi (stroke:currentColor bilan). innerHTML bu yerda xavfsiz: matn — o'z faylimiz, foydalanuvchidan emas (XSS va DOM xavfsizligi). Trusted Types yoqilgan sahifada (vazifalar kabi) esa innerHTML siyosatsiz ishlamaydi — u yerda sprite qulayroq.

vite-plugin-svgr (5.2.0) — ?react importini React komponentiga aylantiradi: <Osh className="ikon" />. Ichida SVGR (@svgr/core 8.1). React — 17-qismda; hozir faqat ulanishini biling:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";

export default defineConfig({
  plugins: [react(), svgr()],
});

Bu config'ni 17-qismda ishlatamiz. Muqobil yondashuv — ikonka kutubxonalari (Lucide, Heroicons): ular har ikonkani tayyor komponent sifatida beradi va tree shaking bilan faqat ishlatilganlari bundle'ga tushadi.

6. vazifalar dagi ikonka

vazifalar ning ikonkasi — public/assets/ikonlar/ikon.svg, 275 bayt, qo'lda yozilgan:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="7" fill="#1f6f4a"/>
  <path d="M9.3 16.6 13.9 21.2 22.7 11.4" fill="none" stroke="#fff"
        stroke-width="3.2" stroke-linecap="round"
        stroke-linejoin="round"/>
</svg>

Uning pipeline'i:

• Favicon — index.html da <link rel="icon" href="assets/ikonlar/ikon.svg" type="image/svg+xml"> (Favicon va web manifest). SVG favicon har o'lchamda tiniq.
• PNG'lar — iOS va manifest uchun (ikon-180.png, ikon-192.png, ikon-512.png, maskable) — npm run ikonlar (skriptlar/ikonlar.js) yasaydi: tashqi paketsiz, piksellarni o'zi chizib, PNG'ni node:zlib bilan siqadi.
• public/ da — chunki manifest ichidagi yo'llarni Vite qayta yozmaydi (Vite IV dagi saboq).

SVGO uni 0.241 KiB ga tushirardi (−10 %), lekin fayl allaqachon kichik va o'qiladigan — vazifalar da kod o'zgarmaydi. Bu darsda kanon loyiha o'zgarmaydi.

7. Ko'p uchraydigan xatolar

7.1 viewBox yo'q

Ikonka width="24" height="24" bilan, viewBox siz. CSS'da width: 48px — rasm o'sha 24 birlikda, burchakda kichik qoladi. Yechim — viewBox="0 0 24 24" qo'shish.

7.2 Rang qotirilgan

fill="#1f6f4a" — currentColor emas. <use> bilan ham rang o'zgarmaydi: ichki atribut CSS'dan kuchli. Sprite'ga qo'shishdan oldin rangni almashtiring.

7.3 <use> boshqa domendan

Ko'rinmaydi, konsolda ham ko'pincha xato yo'q. Sprite — o'z domeningizda.

7.4 SVG'ni foydalanuvchidan qabul qilish

SVG — XML, ichida <script> bo'lishi mumkin. Foydalanuvchi yuklagan SVG'ni inline qo'yish — XSS. Foydalanuvchi SVG'si faqat <img> orqali (u yerda skript ishlamaydi) yoki serverda tozalab (Fayl yuklash xavfsizligi — backend qismida).

8. Mashqlar

Mashqlar kurs/mashqlar/16/35-svg/ da.

1-mashq (oson): Qaysi usul?

1. Sayt logotipi, sahifa boshida, bir marta —
2. Menyudagi 20 ta taom ikonkasi, qorong'i mavzuda rang o'zgaradi —
3. Bitta animatsiyali ikonka (chiziq chiziladi) —

2-mashq (o'rta): SVGO va currentColor

Darsdagi osh-eksport.svg ni yarating (yoki o'z dizayn dasturingizdan eksport qiling). npx svgo bilan kichraytiring va natija foizini yozing. Keyin rangni (#1f6f4a) currentColor ga almashtiring va natijani sahifada color: red ota element ichida inline qo'yib tekshiring.

osh-eksport.svg:
Done in 69 ms!
1.208 KiB - 72.3% = 0.335 KiB

3-mashq (qiyin): Sprite skripti

ikonlar/ papkasiga ikki ikonka qo'ying (osh.svg, choy.svg, ikkalasida viewBox va currentColor). Darsdagi sprite.mjs ni yozing va ishga tushiring. Keyin uchinchi, viewBox siz fayl qo'shing — skript nima deydi?

public/ikonlar.svg: 2 ta ikon

9. Real ishda

• Dizayn tizimlari (kompaniyaning ikonka to'plami) odatda sprite yoki komponentlar paketi sifatida tarqatiladi; pipeline — Figma → eksport → SVGO → sprite/komponent → npm paket.
• React loyihalarda — vite-plugin-svgr yoki ikonka kutubxonasi (Lucide, Heroicons).
• Kod tekshiruvida (code review) SVG fayllarga ham qaraladi: yangi ikonka SVGO'dan o'tganmi, rangi currentColor mi, viewBox bormi, bezak ikonkada aria-hidden bormi. Bu kichik narsalar yuzlab ikonkali loyihada sezilarli hajm va kirish imkoniyati farqini beradi.
• Performans byudjeti — ba'zi jamoalar CI'da "ikonka fayli 2 KB dan oshmasin" kabi chegara qo'yadi: dizayn dasturidan to'g'ridan-to'g'ri tushgan "semiz" SVG darhol ushlanadi.
• Intervyu savollari: "Ikonkalar uchun <img> mi, inline mi, sprite mi?", "currentColor nima?", "SVG'ni optimallashtirish qanday qilinadi?".

Xulosa

• <img> — oddiy, lekin CSS rangi yo'q; inline — to'liq boshqaruv, keshlanmaydi; sprite + <use> — bitta fayl va CSS rangi.
• Ikonka sharti: viewBox (o'lchamga moslashish) va currentColor (rang CSS'dan).
• SVGO dizayn eksportini sezilarli kichraytiradi (bizda −72 %), toza fayllarga deyarli ta'sir qilmaydi; id va aniqlikka ehtiyot bo'ling.
• Sprite'ni skript yasaydi (<symbol> lar), u public/ da va o'z domeningizda turadi.
• Vite: ?raw — inline uchun matn; React'da vite-plugin-svgr — ?react komponent.

Keyingi dars: Prettier konfiguratsiyasi: .prettierrc, plaginlar va --check — kod sifati asboblari bloki: formatlash qoidalari va ularni loyihada sozlash.

Manbalar

• SVGO — github.com/svg/svgo (4.1.0)
• MDN: <use>, <symbol>, viewBox, currentColor — developer.mozilla.org
• vite-plugin-svgr — github.com/pd4d10/vite-plugin-svgr (5.2.0)
• Vite hujjatlari: "Static Asset Handling" (?raw) — vite.dev/guide/assets