HTML SVG

HTML SVG


SVG nima?

  • SVG bu Skalyar Vektor Grafiklari degani
  • SVG veb uchun grafiklarni ko’rsatish uchun ishlatiladi
  • SVG ni KeepGoing tavsiya qiladi

HTML <svg> Elementi

HTML <svg> elementi (HTML5 da tanishtirilgan) bu SVG grafiklari uchun konteyner hisoblanadi.

SVG da to’rtburchak yuzalar, aylanalar tekstlar chizish va rasmlar qo’shish uchun bir necha funksiyalari mavjud.


Brauzerlarning qo’llab quvvatlashi

Jadvaldagi quyidagi brauzerlar <svg> elementlarini to’la qo’llab quvvatlaydi.

Element
<svg> 4.0 9.0 3.0 3.2 10.1


SVG Aylana

Namuna:

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

SVG To’rtburchak

Namuna:

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" >
</svg>

SVG Qirrasi Yumaloq To’rtburchak

Namuna:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

SVG Yulduzcha

Namuna:

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

SVG Logotipi

SVG Afsus, sizning brauzeringiz SVG ni qo’llab quvvatlamaydi.

Namuna:

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
       <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Afsus, sizning brauzeringiz SVG ni qo'llab quvvatlamaydi.
</svg>

SVG va Kanvas(Canvas) o’rtasidagi farqlar

SVG bu XML da 2D (2 o’lchamli) grafiklarni ifodalovchi tildir.

Kanvas bir zumda(JavaScript orqali) 2D grafiklar chizadi.

SVG bu XML ga xos bo’lib ya’ni bu degani har bir element SVG DOM ichida mavjuddir.

Siz element uchun (JavaScript event handlers) ni bo’g’lay olasiz.

SVG da, har bir chizilgan shakl obyekt sifatida eslab qolinadi. Agar SVG obyektining attributlari o’zgartirilsa, brauzer shaklni avtomatik ravishda qayta yasaydi.

Kanvasda esa bu ish pikselma piksel tashkil qilinadi. Kanvasda, grafik bir marta chiziladi va brauzer tomonidan unutiladi. Agar uning joylashgan joyi o’zgarishi kerak bo’lsa, to’liq ko’rinish qayta chizilishi kerak bo’ladi, shu qatori grafik bilan o’ralgan har qanday obyekt ham.


Kanvas va SVG ning farqlanishi

Quyidagi jadval Kanvas va SVG orasidagi bazi muhim farqlarni ko’rsatadi:

Kanvas SVG
  • Ekran o’lchamiga bog’liq
  • Event handlerni qo’llab quvvatlamaydi
  • Natijadagi rasmni .png yoki .jpg qilib saqlab qo’yishingiz mumkin
  • Grafik-intensiv o’yinlar uchun juda mos
  • Ekran o’lchamiga bog’liq emas
  • Event handlerni qo’llab quvvatlaydi
  • Katta renderlash sohalaridagi dasturlar uchun juda mos (Google Maps)
  • Murakkab bo’lsa, sekin renderlanadi (DOM dan foydalanadigan barcha dasturni ancha sekinlashtiradi)
  • O’yin dasturlar uchun moslashmagan

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017