HTML SVG

SVG (masshtablanuvchi vektor grafikasi)

SVG XML formatida vektor grafikasini belgilaydi, uni HTML sahifalarga to‘g‘ridan-to‘g‘ri joylashtirish mumkin.

SVG grafikalari masshtablanadigan bo‘lib, kattalashtirilganda yoki o‘lchami o‘zgartirilganda sifatini yo‘qotmaydi:

SVG barcha asosiy brauzerlar tomonidan qo‘llab-quvvatlanadi.

SVG nima?

• SVG — Scalable Vector Graphics (masshtablanadigan vektor grafikasi) so‘zlarining qisqartmasi
• SVG veb uchun vektor grafikasini belgilashda ishlatiladi
• SVG grafikalarni XML formatida belgilaydi
• SVG fayllaridagi har bir element va atribut animatsiya qilinishi mumkin
• SVG — W3C tavsiyasi (recommendation)
• SVG boshqa standartlar, masalan CSS, DOM, XSL va JavaScript bilan integratsiya qilinadi

<svg> elementi

HTML <svg> elementi SVG grafikalari uchun konteyner hisoblanadi.

SVG da yo‘llar (paths), to‘rtburchaklar, doiralar, ko‘pburchaklar, matn va yana ko‘p narsalarni chizishning bir nechta usullari mavjud.

SVG doira

SVG to‘rtburchak

Shaffoflik va yumaloq burchakli SVG to‘rtburchak

SVG yulduz

SVG gradient ellips va matn

SVG va Canvas o‘rtasidagi farqlar

SVG — XML da 2D grafikalarni tasvirlash tili, Canvas esa 2D grafikalarni (JavaScript yordamida) real vaqtda chizadi.

SVG XML asosidagandir, ya’ni har bir element SVG DOM ichida mavjud. SVG grafikalariga JavaScript hodisa ishlovchilarini (event handlers) bog‘lashingiz mumkin.

SVG da har bir chizilgan shakl obyekt sifatida esda qoladi. Agar SVG obyektining atributlari o‘zgartirilsa, brauzer shaklni avtomatik qayta chizishi mumkin.

Canvas piksel piksel chiziladi. Canvas da grafika chizilgandan so‘ng, brauzer uni eslab qolmaydi. Agar uning joylashuvi o‘zgartirilishi kerak bo‘lsa, butun sahna qaytadan chizilishi kerak, grafika tomonidan yopilgan bo‘lishi mumkin bo‘lgan obyektlar bilan birga.

SVG va Canvas taqqoslash

Quyidagi jadval Canvas va SVG o‘rtasidagi ba’zi muhim farqlarni ko‘rsatadi:

SVG darsligimizni

SVG haqida ko‘proq o‘qish uchun bizning SVG darsligimizni o‘qiganingiz.