YouTube  Qo'shilish
Bosh sahifa Wiki SVG

SVG

SVG — ikki o‘lchamli vector grafika, shakl, matn va animatsiyani XML asosida ifodalovchi format. To‘liq nomi Scalable Vector Graphics. SVG rasm pixel to‘plami emas, geometrik elementlar va style qoidalaridan tashkil topadi.

Vector bo‘lgani sabab SVG turli ekran o‘lchamida sifatni yo‘qotmasdan masshtablanadi. Icon, diagramma, logo, chart, map va illustrationlarda keng ishlatiladi.

SVG elementi

Inline SVG HTML ichida yozilishi mumkin:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" />
</svg>

svg root viewport va koordinata tizimini belgilaydi.

Child elementlar shakllarni ifodalaydi.

ViewBox

viewBox to‘rtta qiymatga ega:

min-x min-y width height

Masalan:

0 0 100 100

Bu ichki koordinata tizimini beradi.

SVG elementining CSS o‘lchami o‘zgarsa viewBox contentni mos scale qiladi.

PreserveAspectRatio

Viewport va viewBox nisbatlari farq qilganda content qanday joylashishini boshqaradi.

Variantlar:

  • contain’ga o‘xshash meet;
  • cover’ga o‘xshash slice;
  • alignment;
  • nisbatni saqlamaslik.

Logo va responsive diagrammada muhim.

Asosiy shakllar

SVG elementlari:

  • rect;
  • circle;
  • ellipse;
  • line;
  • polyline;
  • polygon;
  • path;
  • text;
  • image.

Har biri atributlar bilan geometriyani belgilaydi.

Path

path eng moslashuvchan shakl elementidir.

d atributida commandlar yoziladi:

<path d="M10 10 L90 10 L50 90 Z" />

Commandlar move, line, curve, arc va close operationlarini ifodalaydi.

Absolute va relative variantlar mavjud.

Fill va stroke

Shakl ichki rangi:

fill

konturi:

stroke

bilan boshqariladi.

Qo‘shimcha style:

  • stroke-width;
  • linecap;
  • linejoin;
  • opacity;
  • dash array.

CSS property sifatida ham ishlatilishi mumkin.

CSS

Inline SVG elementlari HTML DOMning bir qismi bo‘lib, class va CSS selector bilan style qilinadi.

Masalan:

.icon {
  fill: currentColor;
}

currentColor iconni parent text rangiga moslashtiradi.

External image sifatida yuklangan SVG ichki elementlariga parent CSS bevosita kira olmasligi mumkin.

DOM

Har SVG shakl DOM elementidir.

JavaScript:

  • atributni o‘zgartiradi;
  • event listener qo‘shadi;
  • yangi element yaratadi;
  • class almashtiradi;
  • animation boshqaradi.

Ko‘p ming element DOM performance’iga ta’sir qilishi mumkin.

Gradient

SVG linear va radial gradientni defs ichida belgilaydi:

<defs>
  <linearGradient id="g">
    <stop offset="0%" stop-color="black" />
    <stop offset="100%" stop-color="white" />
  </linearGradient>
</defs>

Shakl fill="url(#g)" orqali foydalanadi.

Pattern va clip

pattern takroriy grafika bilan fill yaratadi.

clipPath shaklning ko‘rinadigan qismini cheklaydi.

mask alpha yoki luminance orqali yumshoq mask beradi.

Bu vector compositing imkoniyatlarini kengaytiradi.

Text

SVG text elementi koordinata bilan matn chizadi.

U DOM text bo‘lgani sabab select va ayrim accessibility imkoniyatlariga ega.

Font mavjudligi, text wrapping va layout HTMLdan farq qiladi.

Murakkab paragraph uchun HTML ko‘proq mos.

Symbol va use

Takroriy icon symbol ichida aniqlanib, use bilan chaqirilishi mumkin:

<use href="#icon-search" />

Bu sprite va reusable elementlar uchun qulay.

External reference security va browser policy’ga bog‘liq.

Animation

SVG animation:

orqali bajarilishi mumkin.

Transform animation ko‘pincha performance uchun qulay.

Motion preference hisobga olinadi.

Accessibility

Meaningful SVG:

  • accessible name;
  • title;
  • desc;
  • ARIA;
  • focus;
  • keyboard interaction

bilan ta’minlanishi mumkin.

Decorative icon screen readerdan yashiriladi.

Faqat rang orqali ma’no berilmaydi.

Inline va image

Inline:

<svg>...</svg>

DOM va CSS bilan ishlaydi.

External:

<img src="icon.svg" alt="...">

oddiy image sifatida ishlaydi.

External SVG ichidagi script va interaction embedding contextga qarab cheklanishi mumkin.

SVG file

SVG XML text fayl.

U oddiy editor bilan ochiladi, gzip bilan yaxshi siqiladi.

Metadata, comment va keraksiz editor ma’lumotlari optimizationda olib tashlanishi mumkin.

ViewBoxni noto‘g‘ri olib tashlash responsive behaviorni buzadi.

Security

Untrusted SVG faqat “rasm” emas.

U quyidagilarni saqlashi mumkin:

  • script;
  • event handler;
  • external reference;
  • foreignObject;
  • link;
  • animation;
  • XML entityga oid xavf.

Upload qilingan SVG sanitize qilinadi yoki xavfsiz raster formatga qayta render qilinadi.

SVG va Canvas

SVG retained-mode: shakllar DOMda saqlanadi.

Canvas immediate-mode: pixel yuzasi yangilanadi.

SVG interactive icon va diagramma uchun, Canvas ko‘p obyektli real-time scene uchun qulay bo‘lishi mumkin.

Marker

Line va path boshiga yoki oxiriga arrow kabi marker qo‘shish mumkin. marker-start, marker-mid va marker-end diagramma hamda grafiklar uchun ishlatiladi. Marker viewBox va stroke bilan birga scale qilinishi mumkin.

Filter

SVG filter blur, color matrix, shadow va compositing effektlarini yaratadi. Murakkab filter katta yuzada rendering xarajatini oshiradi. Filter region noto‘g‘ri bo‘lsa shadow yoki blur kesilib qolishi mumkin.

Responsive SVG

width="100%" va to‘g‘ri viewBox SVGni containerga moslashtiradi. Fixed width va height olib tashlanganda aspect ratio saqlanishi tekshiriladi. Icon uchun stroke scale behaviori design talabiga bog‘liq.

Optimallashtirish

Editor yaratgan metadata, yashirin group va ortiqcha decimal qiymatlar fayl hajmini oshiradi. Optimizer visual natijani saqlab keraksiz qismlarni olib tashlaydi. ID va accessibility elementlari kerak bo‘lsa saqlanadi.

Bog‘liq tushunchalar

Scalable Vector Graphics, Vector graphics, XML, viewBox, Path, Fill, Stroke, CSS, DOM, Canvas, Accessibility