HTML SVG ဂရပ်ဖစ်
SVG သည် Vector-based ဂရပ်ဖစ်ကို XML ဖော်မတ်တွင် သတ်မှတ်သည်။
SVG ဆိုတာဘာလဲ။
- SVG သည် Scalable Vector Graphics ကို ကိုယ်စားပြုသည်။
- ဝဘ်အတွက် ဂရပ်ဖစ်ကို သတ်မှတ်ရန် SVG ကို အသုံးပြုသည်။
- SVG သည် W3C အကြံပြုချက်ဖြစ်သည်။
HTML <svg> Element
HTML <svg>အစိတ်အပိုင်းသည် SVG ဂရပ်ဖစ်အတွက် ကွန်တိန်နာတစ်ခုဖြစ်သည်။
SVG တွင် လမ်းကြောင်းများ၊ အကွက်များ၊ စက်ဝိုင်းများ၊ စာသားနှင့် ဂရပ်ဖစ်ပုံများကို ရေးဆွဲရန်အတွက် နည်းလမ်းများစွာရှိသည်။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည်
<svg>ဒြပ်စင်ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG စက်ဝိုင်း
ဥပမာ
<!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 စတုဂံ
ဥပမာ
<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 Rounded Rectangle
ဥပမာ
<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 ကြယ်ပွင့်
ဥပမာ
<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 လိုဂို
ဥပမာ
<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>
Sorry, your browser does not
support inline SVG.
</svg>
SVG နှင့် Canvas ကွာခြားချက်များ
SVG သည် XML တွင် 2D ဂရပ်ဖစ်များကို ဖော်ပြရန်အတွက် ဘာသာစကားတစ်ခုဖြစ်သည်။
Canvas သည် 2D ဂရပ်ဖစ်ကို အလျင်အမြန် ( JavaScript ဖြင့်) ဆွဲသည်။
SVG သည် XML ကိုအခြေခံသည်၊ ဆိုလိုသည်မှာ SVG DOM အတွင်း ဒြပ်စင်တိုင်းကို ရရှိနိုင်သည်။ အစိတ်အပိုင်းတစ်ခုအတွက် JavaScript ဖြစ်ရပ်ကို ကိုင်တွယ်ဖြေရှင်းသူများကို သင် ပူးတွဲလုပ်ဆောင်နိုင်သည်။
SVG တွင် ရေးဆွဲထားသော ပုံသဏ္ဍာန်တစ်ခုစီကို အရာဝတ္ထုတစ်ခုအဖြစ် မှတ်သားထားသည်။ SVG အရာဝတ္ထုတစ်ခု၏ အရည်အချင်းများကို ပြောင်းလဲပါက၊ ဘရောက်ဆာသည် ပုံသဏ္ဍာန်ကို အလိုအလျောက် ပြန်လည်ဖော်ပြနိုင်သည်။
Canvas ကို pixel ဖြင့် pixel ပြန်ဆိုသည်။ ကင်းဗတ်တွင် ဂရပ်ဖစ်ရေးဆွဲပြီးသည်နှင့် ၎င်းကို ဘရောက်ဆာမှ မေ့သွားပါသည်။ ၎င်း၏ အနေအထားကို ပြောင်းလဲရမည်ဆိုပါက ဂရပ်ဖစ်ဖြင့် ဖုံးအုပ်ထားနိုင်သည့် အရာများအပါအဝင် မြင်ကွင်းတစ်ခုလုံးကို ပြန်လည်ရေးဆွဲရန် လိုအပ်ပါသည်။
Canvas နှင့် SVG နှိုင်းယှဉ်
အောက်ဖော်ပြပါဇယားသည် Canvas နှင့် SVG အကြား အရေးကြီးသော ခြားနားချက်အချို့ကို ပြသသည်-
| Canvas | SVG |
|---|---|
|
|
SVG ကျူတိုရီရယ်
SVG အကြောင်းပိုမိုလေ့လာရန်၊ ကျွန်ုပ်တို့၏ SVG Tutorial ကိုဖတ်ပါ ။