SVG'ni CSS bilan stillash: ikonka tizimi va chizilish animatsiyasi

Qisqacha: Inline SVG — sahifaning bir qismi, shuning uchun CSS uni to'liq boshqaradi: fill — ichini bo'yash, stroke — chiziq, stroke-width — qalinlik. fill: currentColor bilan ikonka matn rangini oladi — hover, qorong'i rejim va majburiy ranglarda o'zi almashadi. Ikonkalar bir marta <symbol> qilib yoziladi va <use href="#id"> bilan chaqiriladi (sprite). <use> ichiga selektor yetmaydi — faqat meros va CSS o'zgaruvchilari o'tadi. Chiziq "o'zi chizilayotgandek" animatsiya stroke-dasharray va stroke-dashoffset bilan qilinadi, lekin faqat prefers-reduced-motion: no-preference bo'lsa.

Bu darsda

• SVG'ning CSS xususiyatlarini (fill, stroke, stroke-linecap, vector-effect) va ularning atributlardan farqini bilasiz.
• Eksport qilingan SVG'ni SVGO bilan tozalab, currentColor ga moslaysiz.
• Sprite'dan chaqirilgan ikonkani meros va CSS o'zgaruvchisi bilan ikki rangli qilasiz.
• Ikonka kutubxonasini litsenziyasi bilan tanlaysiz va nega ikonka shriftlari eskirganini tushuntirasiz.
• Chizilish animatsiyasini harakatni kamaytirish sozlamasini hurmat qilib yozasiz.

Oldin bilishingiz kerak: SVG HTML ichida va ikonkalar, Rasm va media elementlari, Transition, prefers-reduced-motion, Figma dasturchi uchun 2.

1. Nega bu kerak?

«Bahor» saytiga dizayner Figma'dan oltita ikonka yubordi: piyola, soat, joylashuv, telefon, yulduz, belgi. Siz ularni img bilan qo'ydingiz. Keyin uch muammo chiqdi:

1. Havola hover'da qizg'ishga o'tadi, ikonka esa yashilligicha qoladi.
2. Qorong'i rejimda to'q yashil ikonka to'q fonda ko'rinmay qoldi.
3. Dilnoza opa majburiy ranglar rejimida ikonkalarni umuman ko'rmadi — ular qora fonda qora bo'lib qoldi.

Uchalasining ildizi bitta: img ichidagi SVG — alohida hujjat, sahifaning CSS'i unga yetmaydi. SVG HTML ichida darsida SVG'ni sahifaga qo'yishning to'rt usulini ko'rgan edik va "inline SVG'ni CSS boshqaradi" degan edik. Bu dars — o'sha "boshqaradi"ning to'liq ma'nosi: bo'yash, chiziq, sprite, ikki rang, animatsiya.

O'xshatish: img ichidagi SVG — do'kondan olingan tayyor ramkali surat, rangini o'zgartirib bo'lmaydi. Inline SVG — trafaret: bo'yoqni siz tanlaysiz va har joyda boshqa bo'yoq bilan bosasiz.

2. SVG'ning CSS xususiyatlari

2.1 fill va stroke

SVG shakllari HTML qutilariga o'xshamaydi: ularda background va border yo'q. O'rniga:

• fill — shaklning ichi. Standart qiymati — qora.
• stroke — shakl chegarasi bo'ylab chiziq. Standart — yo'q (none).
• stroke-width — chiziq qalinligi, viewBox birliklarida.
• stroke-linecap — ochiq chiziq uchlari: butt (kesilgan), round (yumaloq), square.
• stroke-linejoin — burchaklar: miter (o'tkir), round, bevel (qirqilgan).

Ikonka ikki uslubda chiziladi. To'ldirilgan (filled) — shakllar fill bilan bo'yaladi. Chiziqli (outline) — fill: none va stroke. Ko'p zamonaviy kutubxonalar (Lucide, Tabler, Heroicons'ning outline to'plami) chiziqli uslubda: 24×24 viewBox, 2 birlik qalinlik, yumaloq uchlar.

Baseline ma'lumotiga ko'ra fill, stroke va ularning barcha qiymatlari — ko'p yillardan beri Baseline.

2.2 Chiziq masshtab bilan o'sadi

viewBox="0 0 24 24" li ikonkani 48 pikselda chizsangiz, hamma narsa ikki barobar kattalashadi — chiziq ham: stroke-width: 2 endi 4 piksel ko'rinadi. Bu ko'pincha to'g'ri. Lekin ba'zan chiziq har o'lchamda bir xil bo'lishi kerak (masalan, grafik chiziqlari). Buning uchun vector-effect: non-scaling-stroke:

<style>
  body {
    display: flex;
    align-items: end;
    gap: 1.5rem;
    padding: 1rem;
    color: #2f6b3a;
    font-family: system-ui, sans-serif;
  }
  figure { margin: 0; text-align: center; }
  figcaption { font-size: 0.8rem; color: #5b6660; }
  svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .qat path { vector-effect: non-scaling-stroke; }
</style>
<figure>
  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
    <path d="M4 9h13v4a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6Z
      M17 10h1.5a2.5 2.5 0 1 1 0 5H17M8 3v3m4-3v3"/></svg>
  <figcaption>24 px</figcaption></figure>
<figure>
  <svg viewBox="0 0 24 24" width="72" height="72" aria-hidden="true">
    <path d="M4 9h13v4a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6Z
      M17 10h1.5a2.5 2.5 0 1 1 0 5H17M8 3v3m4-3v3"/></svg>
  <figcaption>72 px</figcaption></figure>
<figure>
  <svg class="qat" viewBox="0 0 24 24" width="72" height="72"
    aria-hidden="true">
    <path d="M4 9h13v4a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6Z
      M17 10h1.5a2.5 2.5 0 1 1 0 5H17M8 3v3m4-3v3"/></svg>
  <figcaption>72 px, non-scaling</figcaption></figure>

Nimaga qarang: uchala piyola bir xil shakl. Ikkinchisi uch barobar katta va chizig'i ham uch barobar qalin (6 piksel). Uchinchisida chiziq kichik ikonkadagidek ingichka — 2 piksel. Chiziq uchlari yumaloq (round): bug' chiziqlarining tepasiga qarang. Piyola — o'zimiz chizgan ikonka, SVG HTML ichida darsidagi piyolaning biroz o'zgartirilgan varianti (SVGO bilan tozalangan). .qat — namoyish class'i.

2.3 Atribut va CSS: kim yutadi

SVG'da stilni ikki joyda yozish mumkin: atribut (<path fill="#2F6B3A">) va CSS (path { fill: ... }). Atribut — taqdimot atributi (presentation attribute): u CSS qoidasiga aylanadi, lekin eng kuchsiz — og'irligi noldan ham past. Istalgan CSS selektori uni yutadi.

Tuzoq meros bilan bog'liq. svg { fill: currentColor; } — bu qoida svg ning o'ziga. path rangni meros bilan oladi. Lekin path da fill="#000" atributi bo'lsa — bu path ning o'z qiymati, meros esa faqat o'z qiymati yo'q elementga keladi (Meros). Natijada ikonka qora qoladi:

<style>
  body {
    padding: 1rem;
    font-family: system-ui, sans-serif;
  }
  a { color: #2f6b3a; font-size: 1.25rem; }
  a:hover { color: #b4461a; }
  svg {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
    fill: currentColor;
  }
</style>
<p><a href="menyu/">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path fill="#000" fill-rule="evenodd"
      d="M5 3h14v18H5zM8 7h8v2H8zm0 4h8v2H8z"/>
  </svg> Menyu ❌</a></p>
<p><a href="menyu/">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path fill-rule="evenodd"
      d="M5 3h14v18H5zM8 7h8v2H8zm0 4h8v2H8z"/>
  </svg> Menyu ✅</a></p>

Nimaga qarang: ikkala havola matni yashil, sichqoncha ustiga borsa qizg'ish bo'ladi. Birinchisining ikonkasi esa doim qora — fill="#000" atributi merosni to'sdi. Ikkinchisida atribut yo'q — ikonka matn bilan birga rang almashadi. Eksport qilingan SVG'da bunday atributlar deyarli har doim bor. Ikki yechim: atributni olib tashlash (SVGO — keyingi bo'limda) yoki qoidani bolalarga yozish: svg * { fill: currentColor; }. Birinchisi toza.

Tekshirib ko'ring: Nega svg * { fill: currentColor; } atributni yutadi, svg { fill: currentColor; } esa yo'q?

3. Eksportdan sahifagacha

3.1 Figma'dan eksport

Figma dasturchi uchun 1 darsida eksport bo'limini ko'rgan edik. Ikonka uchun ikki qoida:

• Ikonka 24×24 frame ichida chizilsin va aynan shu frame eksport qilinsin. Shunda viewBox="0 0 24 24" chiqadi va hamma ikonka bir xil to'rda bo'ladi.
• Format — SVG. Katta illyustratsiya yoki foto — boshqa gap (Rasm va media elementlari).

3.2 SVGO bilan tozalash

SVGO — SVG faylni kichraytiradigan vosita (SVG HTML ichida darsida tanishgan edik). Endi uni ikonka tizimi uchun sozlaymiz: ranglar currentColor ga aylansin, width/height olib tashlansin (o'lchamni CSS beradi).

Loyiha papkasida svgo.config.mjs fayli:

export default {
  plugins: [
    {
      name: "preset-default",
      params: {
        overrides: { convertColors: { currentColor: true } },
      },
    },
    "removeDimensions",
  ],
};

Bu — JavaScript fayl. Uning sintaksisini 08-qismdan o'rganasiz; hozir aynan ko'chiring. Terminalda (npm — keyingi qismlarda to'liq; hozir buyruqni aynan takrorlang):

npx --yes svgo@4 piyola.svg -o piyola.min.svg

SVGO konfiguratsiyani shu papkadan o'zi topadi. Biz bir ikonka faylida sinadik — tahrirlovchi dasturlar odatda qoldiradigan narsalar bilan: XML sarlavhasi, izoh, ichma-ich g guruhlar, har yo'lda id, 2.000 kabi sonlar, har chiziqda takrorlangan rang. SVGO 4.1.0 natijasi: 904 baytdan 288 baytga (68.1% kichraydi). Uchta path bittaga birlashdi, rang stroke="currentColor" ga aylandi, viewBox va title qoldi.

Diqqat: currentColor ni faqat bir rangli ikonkalarga qo'llang. Ko'p rangli logotip yoki illyustratsiyada SVGO hamma rangni bitta rangga aylantirib yuboradi. Ularni alohida papkada, bu sozlamasiz saqlang.

4. Sprite: bir marta yozib, ko'p joyda ishlatish

4.1 Sprite qanday yashiriladi

SVG HTML ichida darsida sprite'ni <svg style="display: none"> bilan yashirgan edik va "bu CSS'ning bitta qatori" degan edik. Endi to'liq javob:

• display: none — sprite joy egallamaydi, ko'rinmaydi. Ichidagi symbol lar esa use orqali chiziladi. Bitta istisno: Chrome 154 da tekshirdik — oddiy ikonka chiqdi, gradient bilan bo'yalgan ikonka esa ko'rinmadi: display: none ichidagi linearGradient ishlamaydi. Gradientli ikonka kerak bo'lsa, gradientni ko'rinadigan, lekin o'lchamsiz svg ga qo'ying (width="0" height="0" va position: absolute) — shunday variantda ikonka to'g'ri chiqdi.
• style atributi — «Bahor»da ishlamaydi: HTML darajasidagi xavfsizlik darsidagi CSP (Content Security Policy) inline stillarni to'sadi. Yashirish CSS faylga ko'chadi.
• hidden atributi — kutilmagan tuzoq. Chrome 154 da tekshirdik: <svg hidden> yashirinmadi, sahifada 300×150 piksellik bo'sh joy qoldi. hidden — HTML atributi, brauzerning standart stili uni svg ga qo'llamaydi. Lekin «Bahor» va portfolio reset'ida [hidden] qoidasi bor (CSS reset) — u har qanday elementga, svg ga ham ishlaydi. Reset bo'lsa, hidden yetadi.

«Bahor» uchun eng sodda yo'l — hidden + reset. Qoidaning o'zi reset.css da allaqachon turibdi.

4.2 <use> ichiga selektor yetmaydi

<use href="#i-piyola"> shablon nusxasini yopiq daraxtga (shadow tree) chizadi. Uni do'kon vitrinasi deb tasavvur qiling: ichidagini ko'rasiz, lekin qo'lingiz yetmaydi. Tashqaridagi CSS selektorlari unga kira olmaydi: use path { fill: red; } — ishlamaydi. Chrome'da tekshirdik: sahifadagi use rect { fill: yellow } qoidasi birorta nusxaga ham ta'sir qilmadi.

Ichkariga ikki narsa o'tadi:

1. Meros bo'ladigan xususiyatlar — fill, stroke, color, stroke-width. use yoki svg ga yozasiz, ichkaridagi shakllar meros oladi.
2. CSS o'zgaruvchilari — ular ham meros bo'ladi (CSS o'zgaruvchilari 2). Shablon ichida fill="var(--ikonka-ikkinchi, currentColor)" yozsangiz, har nusxa uchun ikkinchi rangni tashqaridan berasiz.

Ikkinchi yo'l ikki rangli ikonkaning kaliti:

<style>
  body {
    padding: 1rem;
    background: #fffaf0;
    font-family: system-ui, sans-serif;
  }
  .sprite { display: none; }
  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: #2f6b3a;
    font-size: 1.125rem;
  }
  a:hover { color: #1a5d1a; }
  .ikonka {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: currentColor;
  }
  .urgu { --ikonka-ikkinchi: #b4461a; }
</style>
<svg class="sprite">
  <symbol id="i-joy" viewBox="0 0 24 24">
    <path d="M12 22s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12Z"/>
    <circle cx="12" cy="10" r="2.5"
      fill="var(--ikonka-ikkinchi, #fffaf0)"/>
  </symbol>
</svg>
<ul role="list">
  <li><a href="aloqa/">
    <svg class="ikonka" aria-hidden="true"><use href="#i-joy"/></svg>
    Manzil</a></li>
  <li><a class="urgu" href="aloqa/">
    <svg class="ikonka" aria-hidden="true"><use href="#i-joy"/></svg>
    Manzil</a></li>
</ul>

Nimaga qarang: ikkala havolada bitta shablon — joylashuv belgisi. Birinchisida ichki nuqta qaymoq rangda (zaxira qiymat). Ikkinchisida .urgu class'i --ikonka-ikkinchi ni g'isht rangiga o'zgartirdi — nuqta qizg'ish, tashqi shakl esa baribir yashil. Sichqonchani olib borsangiz, tashqi shakl matn bilan birga to'qlashadi (meros), nuqta esa o'z rangida qoladi (o'zgaruvchi). .sprite, .ikonka, .urgu — namoyish class'lari; --ikonka-ikkinchi ham faqat shu namoyish uchun.

Tekshirib ko'ring: Hamkasbingiz sprite'dagi joylashuv belgisining ichki nuqtasini bo'yamoqchi: .urgu use circle { fill: #b4461a; }. Nuqta o'zgarmadi. Nega va qanday tuzatiladi?

Maslahat: Sprite'ni alohida faylga ham chiqarsa bo'ladi: <use href="assets/images/ikonkalar.svg#i-joy">. Baseline ma'lumotiga ko'ra tashqi fayldagi use — Baseline. Brauzer faylni bir marta yuklab, keshlaydi. Shart: fayl sahifa bilan bir domenda bo'lsin. Eski qo'llanmalardagi xlink:href o'rniga oddiy href yozing — Baseline ma'lumotida xlink:href tavsiya etilmaydigan (discouraged) deb belgilangan.

4.3 Ikonka va matn

Qator balandligi darsida ikonkani matn yoniga vertical-align: -0.125em bilan qo'ygan edik, Rasm va media darsida — 1.25em o'lchami bilan. Ikonka tizimining to'rt qoidasi:

1. O'lcham — em da. Ikonka matn bilan birga kattalashadi, foydalanuvchi shriftni kattalashtirsa ham.
2. Rang — currentColor. Hover, qorong'i rejim, majburiy ranglar — hammasi o'zi (CSS'da accessibility).
3. Joylashuv — flex yoki vertical-align. Havola ichida inline-flex + gap — eng barqaror; matn ichida — vertical-align.
4. Siqilmasin — flex: none. Uzun matn yonida ikonka kichrayib ketmasin.

Accessibility qoidalari SVG HTML ichida darsidan o'zgarmaydi: yonida so'z bor ikonka — aria-hidden="true"; faqat ikonkadan iborat tugma — tugmaning o'ziga aria-label; mustaqil ma'noli grafika — role="img" va nom.

5. Ikonkalar qayerdan olinadi

5.1 Kutubxonalar

Ikonkani har safar dizayner chizmaydi. Katta, izchil to'plamlar bor. Litsenziyasini npm reyestridan (JavaScript paketlarining ochiq ombori — keyingi qismlarda o'rganasiz) tekshirdik (2026-yil sentabr):

MIT, ISC va Apache 2.0 — ruxsat beruvchi litsenziyalar: tijoriy loyihada ham bepul ishlatasiz, faqat litsenziya matnini loyihada saqlaysiz. Iconify o'zi to'plam emas, katalog — har to'plamning o'z litsenziyasi bor, uni alohida o'qing.

Tanlov qoidasi: bitta loyihada — bitta to'plam. Lucide'ning piyolasi va Heroicons'ning soati yonma-yon qo'yilsa, chiziq qalinligi va burchaklari farq qiladi — sahifa "yamoq" ko'rinadi.

5.2 Ikonka shriftlari nega eskirdi

Bir paytlar ikonkalar shrift bo'lib kelardi: har ikonka — shriftdagi bitta "harf". Bugun ulardan qochiladi:

• Ekran o'quvchi "harf"ni o'qishga urinadi — ma'nosiz belgi yoki jimjitlik.
• Shrift yuklanmasa — ikonka o'rnida bo'sh kvadrat yoki boshqa harf (Web shriftlar).
• Bir rang — ikki rangli ikonka qilib bo'lmaydi.
• Hammasi birga yuklanadi — 5 ta ikonka uchun yuzlab ikonkali fayl.

Istisno bor: Material Symbols o'zgaruvchan (variable) shrift sifatida ham tarqaladi va ba'zi loyihalarda shunday ishlatiladi. Uni ishlatsangiz ham, yuqoridagi to'rt muammoni yodda tuting. Yangi loyiha uchun — SVG.

5.3 React va boshqa freymvorklarda

Kutubxonalarning ko'pi React uchun tayyor komponent paketiga ega (masalan, lucide-react). O'z SVG fayllaringizni komponentga aylantiradigan vosita — SVGR. React'ni kursda keyinroq o'rganamiz — hozir bilish shart emas. G'oya o'sha: SVG inline bo'ladi va currentColor bilan ishlaydi.

5.4 Illyustratsiyalar

Katta rasmlar (bo'sh holat, xato sahifasi, "Biz haqimizda") uchun tayyor SVG illyustratsiya manbalari bor. Litsenziyasi har xil — o'qimasdan olmang:

• unDraw — litsenziya sahifasiga ko'ra tijoriy loyihada ham bepul, muallifni ko'rsatish shart emas. Lekin cheklovlar bor: to'plam qilib qayta tarqatish, o'xshash xizmat yasash va AI o'qitish uchun ishlatish taqiqlangan.
• Storyset (Freepik) — bepul variantda muallifni ko'rsatish (havola bilan) majburiy; pullik obuna bu talabni olib tashlaydi.
• Haikei — to'lqin, "blob" kabi fon shakllarini generatsiya qiladigan vosita. Shartlarini saytidan o'qing.

Illyustratsiyada ko'p rang bor — unga currentColor qilinmaydi. Lekin ko'p to'plamlarda asosiy rangni tanlash imkoni bor: «Bahor» yashilini (#2f6b3a) kiriting.

6. Chizilish animatsiyasi

6.1 G'oya: punktir chiziq

stroke-dasharray — chiziqni punktirga aylantiradi: "shuncha chiziq, shuncha bo'shliq". stroke-dashoffset — punktirning boshlanish nuqtasini suradi. Hiyla shunda: punktirning bitta bo'lagi butun chiziq uzunligiga teng bo'lsa, uni surib, chiziqni to'liq yashirish va asta-sekin ochish mumkin.

Muammo — uzunlikni bilish. Chrome'da o'lchadik: belgi (galochka) M4 12l5 5L20 6 ning uzunligi 22.63, piyolaning tanasi — 40.85. Har ikonka uchun alohida son — noqulay. Yechim — pathLength="1" atributi: brauzerga "bu chiziqning uzunligini 1 deb hisobla" deydi. Endi har qanday chiziq uchun bir xil qiymatlar:

stroke-dasharray: 1   → bitta bo'lak = butun chiziq
stroke-dashoffset: 1  → bo'lak to'liq surilgan, chiziq ko'rinmaydi
stroke-dashoffset: 0  → chiziq to'liq chizilgan

Baseline ma'lumotiga ko'ra pathLength va stroke-dasharray, stroke-dashoffset — ko'p yillardan beri Baseline.

6.2 Harakatsiz holat — birinchi

prefers-reduced-motion darsidagi "no-motion-first" yondashuvi: avval harakatsiz, to'liq holat yoziladi. Harakat — faqat foydalanuvchi qarshi bo'lmasa:

<style>
  body {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: #fffaf0;
    color: #2f6b3a;
    font-family: system-ui, sans-serif;
  }
  svg {
    width: 4rem;
    height: 4rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Harakatsiz holat: belgi to'liq ko'rinadi */
  .belgi { stroke-dasharray: 1; stroke-dashoffset: 0; }

  @media (prefers-reduced-motion: no-preference) {
    .belgi { animation: chiz 0.8s ease-out 0.3s both; }
  }

  @keyframes chiz {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }
</style>
<svg viewBox="0 0 24 24" aria-hidden="true">
  <circle cx="12" cy="12" r="10"/>
  <path class="belgi" pathLength="1" d="M7 12.5l3.5 3.5L17 9"/>
</svg>
<p><strong>Bron qabul qilindi.</strong><br>
  Stol 19:00 ga tayyor.</p>

Nimaga qarang: doira darhol ko'rinadi, ichidagi belgi esa 0.3 soniya kutib, keyin chapdan o'ngga 0.8 soniyada "chiziladi" — xuddi qo'l bilan chizilgandek. Oxirida to'liq belgi qoladi. Skrinshotda bitta kadr ko'rinadi; harakatni ko'rish uchun "Tahrirlab ko'rish" ni oching yoki natijani qayta yuklang. Kompyuteringizda harakatni kamaytirish yoqilgan bo'lsa (prefers-reduced-motion darsidagi sozlamalar), belgi darhol to'liq chiqadi — lekin xabar baribir so'z bilan aytiladi.

Uch detal:

• both — animatsiya boshlanishidan oldin from holatini (chiziq yashirin) ushlaydi. Usiz belgi 0.3 soniya ko'rinib turib, keyin yo'qolib, qayta chizilardi (keyframes).
• Harakatsiz holatda ham stroke-dasharray: 1 — bu ko'rinishga ta'sir qilmaydi (bo'lak butun chiziqqa teng), lekin animatsiya boshlanganda qiymatlar "sakramaydi".
• stroke-dashoffset — kompozitor xususiyati emas: har kadrda brauzer chiziqni qayta chizadi (Rendering pipeline). Kichik ikonkada bu sezilmaydi. Butun sahifali illyustratsiyada — ehtiyot bo'ling.

6.3 Qachon ishlatish kerak

Chizilish — "bir marta, ma'no bilan" harakat. Yaxshi joylar: muvaffaqiyat belgisi (yuqoridagi kabi), logotipning birinchi ochilishi, jarayon qadamlari. Yomon joylar: har hover'da, cheksiz takrorda, matnni o'qishga xalaqit beradigan joyda. prefers-reduced-motion darsidagi uch savolni eslang: bu harakat ma'lumot beradimi, qisqami, o'chirsa nima yo'qoladi?

Tekshirib ko'ring: pathLength="1" va stroke-dasharray: 1 berilgan. Chiziq butunlay yashirin bo'lishi uchun stroke-dashoffset: bo'ladi. Nega harakatsiz holatda aynan 0 yoziladi?

7. Ko'p uchraydigan xatolar

7.1 Ikonka rangi o'zgarmayapti

path da fill="#000" qolgan. Tuzatish: SVGO bilan currentColor ga yoki atributni o'chiring.

7.2 use path { ... } ishlamayapti

Yopiq daraxt. Tuzatish: meros (fill, color) yoki CSS o'zgaruvchisi.

7.3 Sprite joy egallayapti

<svg hidden> reset'siz sahifada 300×150 bo'sh joy. Tuzatish: CSS faylda display: none yoki reset'dagi [hidden] qoidasi.

7.4 Ikonka tekislanmagan

Matndan yuqorida yoki pastda. Tuzatish: havolada inline-flex + align-items: center; matnda vertical-align: -0.125em.

7.5 Animatsiya harakatni kamaytirishda ham ishlayapti

Tuzatish: animation faqat @media (prefers-reduced-motion: no-preference) ichida.

7.6 Ikki to'plam aralash

Chiziq qalinligi turli. Tuzatish: bitta kutubxona; yetmasa — o'sha uslubda o'zingiz chizing (24×24, 2 birlik).

8. Mashqlar

1-mashq (oson): chiziqli ikonka

Soat ikonkasini chiziqli uslubda yozing: doira (markaz 12, 12, radius 9) va strelkalar M12 7v5l3 2. Rang — matn rangidan, uchlar yumaloq. O'lchami 1.25em.

Ishora: "fill va stroke" bo'limidagi xususiyatlar; fill: none — ichi bo'yalmasin.

<svg class="ikonka" viewBox="0 0 24 24" aria-hidden="true">
  <circle cx="12" cy="12" r="9"/>
  <path d="M12 7v5l3 2"/>
</svg>

.ikonka {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

2-mashq (o'rta): ikki holatli yulduz

«Bahor» menyusida "Mashhur" taomlar yonida yulduz bor. Oddiy kartada yulduz faqat chiziq (ichi bo'sh), .taom-karta.mashhur da esa ichi g'isht rangida to'ldirilsin. Yulduz — sprite'dagi symbol, shakli: <path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9Z"/>.

Ishora: "<use> ichiga selektor yetmaydi" bo'limi — ichkariga faqat meros va o'zgaruvchi o'tadi. fill ham meros bo'ladi.

.taom-karta svg {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.taom-karta.mashhur svg {
  fill: var(--rang-urgu);
  stroke: var(--rang-urgu);
}

3-mashq (qiyin): piyola bug'i chiziladi

«Bahor» bosh sahifasidagi katta piyola illyustratsiyasida (piyola tanasi va ikki bug' chizig'i) faqat bug' chizilsin: piyola darhol ko'rinadi, bug' chiziqlari biri ketidan biri 0.6 soniyada paydo bo'ladi. Harakatni kamaytirishda — hammasi darhol.

Ishora: har bug' chizig'i — alohida path, pathLength="1" bilan; ikkinchisiga animation-delay. "Harakatsiz holat — birinchi" bo'limidagi naqsh.

<svg class="piyola" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M4 9h13v4a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6Z
    M17 10h1.5a2.5 2.5 0 1 1 0 5H17"/>
  <path class="bug" pathLength="1" d="M8 3v3"/>
  <path class="bug" pathLength="1" d="M12 3v3"/>
</svg>

.piyola .bug {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .piyola .bug {
    animation: chiz 0.6s ease-out both;
  }

  .piyola .bug + .bug {
    animation-delay: 0.6s;
  }
}

@keyframes chiz {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

4-mashq: Portfolio qadami — aloqa havolalariga ikonkalar

Portfolio'ning "Aloqa" sahifasida Telegram va email havolalari bor. Ularga o'zingiz chizgan ikonkalar qo'shing:

1. Sahifa body sining boshiga sprite qo'ying: ikki symbol — xat (i-xat) va qog'oz samolyot (i-samolyot). Shakllar pastda.
2. Har havolada matndan oldin <svg aria-hidden="true"><use href="#…"/></svg>.
3. CSS: ikonka matn o'lchamida, matn rangida, chiziqli uslubda; hover va qorong'i rejimda o'zi almashsin.
4. Majburiy ranglarda tekshiring.

Shakllar (24×24): xat — <rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/>; samolyot — <path d="M21 3 3 10.5l7 2.5 2.5 7Z"/><path d="m10 13 11-10"/>.

Ishora: portfolio'da yangi class qo'shmaymiz — selektor a > svg. Sprite'ni yashirish — hidden atributi va reset'dagi [hidden] qoidasi. href^="https://" li havolaga " ↗" strelka qo'shilishini eslang (Pseudo-elementlar).

<svg hidden>
  <symbol id="i-xat" viewBox="0 0 24 24">
    <rect x="3" y="5" width="18" height="14" rx="2"/>
    <path d="m3 7 9 6 9-6"/>
  </symbol>
  <symbol id="i-samolyot" viewBox="0 0 24 24">
    <path d="M21 3 3 10.5l7 2.5 2.5 7Z"/>
    <path d="m10 13 11-10"/>
  </symbol>
</svg>

<a href="https://t.me/sizning_kanal"><svg aria-hidden="true"><use
  href="#i-samolyot"/></svg>Telegram</a>

/* Havola ichidagi ikonka: matn o'lchamida va rangida
   (SVG'ni CSS bilan stillash darsi) */
a > svg {
  width: 1em;
  height: 1em;
  margin-inline-end: 0.3em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

9. Real ishda

• Dizayn tizimlari ikonkalarni bitta paket qilib chiqaradi: SVG fayllar, sprite va React komponentlari birga. Masalan, GitHub'ning Octicons to'plami SVG fayllar va React komponentlari sifatida tarqaladi.
• Loyiha tuzilmasi. Ikonkalar assets/images/ikonkalar/ da xom holda, SVGO'dan o'tgani sprite'da. Yangi ikonka qo'shish — SVGO + sprite'ga bitta symbol.
• Animatsiya. Chizilish effekti landing sahifalarda va onboarding'da tez-tez uchraydi. Murakkab animatsiyalar uchun Lottie kabi formatlar bor (JSON'dagi vektor animatsiya) — ular JavaScript talab qiladi, kursda keyinroq.
• Intervyuda so'raladi: "Ikonka rangini qanday o'zgartirasiz?", "Sprite nima?", "Nega icon font emas?", "currentColor nima?", "SVG'ni qanday optimallashtirasiz?".

Xulosa

• SVG shakllari fill va stroke bilan bo'yaladi; stroke-width masshtab bilan o'sadi, vector-effect: non-scaling-stroke — o'smaydi.
• Taqdimot atributi eng kuchsiz qoida, lekin merosni to'sadi: ikonkada fill="#000" qolsa, currentColor ishlamaydi — SVGO bilan tozalang.
• Sprite: symbol + use href; ichkariga faqat meros va CSS o'zgaruvchilari o'tadi — ikki rang shular bilan.
• <svg hidden> reset'siz yashirinmaydi; bitta loyihada bitta ikonka to'plami, litsenziyasi bilan.
• Chizilish: pathLength="1", stroke-dasharray: 1, stroke-dashoffset 1 → 0; animatsiya faqat no-preference da.

Keyingi dars: Tugmalar tizimi — variantlar, o'lchamlar, barcha holatlar va ikonkali tugma bilan izchil tugma komponentini quramiz.

Manbalar

• MDN: "fill", "stroke", "stroke-dasharray", "stroke-dashoffset", "pathLength", "vector-effect", "", "Presentation attributes" — developer.mozilla.org
• SVGO: "Preset Default", "convertColors", "removeDimensions" — svgo.dev
• web-features (Baseline ma'lumotlari): "svg", "masks"
• unDraw: "License" — undraw.co/license; Storyset: "FAQ" — storyset.com/faqs
• Lucide, Heroicons, Phosphor, Tabler Icons, Material Symbols, Iconify — npm reyestridagi litsenziya maydoni