Starting SVG

SVG  ဆိုတာ Scalable vector Graphics ရဲ႕ အတိုေကာက္ျဖစ္ၿပီး Web ေပၚမွာ Graphical ဒီဇိုင္းေတြနဲ႕ Animation
ေတြပံုေဖာ္ေပးဖို႕အတြက္အသံုးျပဳတဲ့နည္းပညာတစ္ခုျဖစ္ပါတယ္ ။
SVG ဟာ Vectors Picture အေပၚမွာအေျခခံၿပီးဖန္တီးထားတာျဖစ္ၿပီး X Y - coordinates ေတြပါ၀င္ပါတယ္။
သူ႕ကုိ W3C အဖြဲ႕အစည္းက ေထာက္ပံ့ခဲ့တာျဖစ္ၿပီး Modern
web browser အားလံုးနဲ႕ တိုက္ရိုက္အသံုးျပဳႏိုင္ပါတယ္ ။သူက HTML ,HTML 5, CSS ,Javascript , Document
Object Model , AJAX စတဲ့နည္းပညာေတြနဲ႕ ဆင္တူတဲ့အျပင္ေလ့လာရတာပိုလြယ္ကူပါတယ္ ။Mobile Devices
ေပၚမွာလည္းအလုပ္လုပ္တဲ့အတြက္ mobile 1 billion ေလာက္ကလက္ရွိမွာ SVG ကုိအသံုးျပဳေနပါတယ္တဲ့။
အဓိကအားသာခ်က္ကေတာ့ Third Party Application ေတြလို
Loading မွာၾကာေနတာေတြ၊ Install ထပ္သြင္းရမွာေတြ ၊ပံုေတြကုိခ်ဲ႕လို႕ခ်ံဳ႕လို႕အဆင္မေျပတာေတြ မရွိပါဘူး ။
သူ႕အတြက္ Web Server မလိုအပ္သလိုထပ္ေပါင္းျဖည့္စြက္ေပးရတဲ့ Application ေတြလည္းမလိုအပ္ပါဘူး။
SVG ကုိ Support လုပ္တဲ့ Browser ရွိရင္ရပါၿပီ အဲဒါေတြကေတာ့ IE 9 နဲ႕အထက္၊ Firefox 6 နဲ႕အထက္
Opera မွာဆို 8 အထက္ Safari နဲ႕ Chrome မွာဆိုရင္ေတာ့ ဘယ္ Version မဆိုရပါတယ္တဲ့။
Mobile ေပၚမွာဆိုရင္ေတာ့ Opera mobile ကလြဲလို႕ Android IceCream Sandwich OS , iPhione တို႕အျပင္
ဒါဇင္ေက်ာ္တဲ့ SVG-enabled browsers ေတြကေန အသံုးျပဳႏိုင္ပါတယ္။
သူ႔ကုိေရးဖို႕အတြက္ text editor ေလးတစ္ခုရွိယံုနဲ႕ အဆင္ေျပပါတယ္ ။

အခု အေျခခံ ေလးေတြစ ေရးၾကည့္ရေအာင္ ။
Notepad ေလးတစ္ခုယူလိုက္မယ္ ။
သူက <svg > </svg> tag ႏွစ္ခုအတြင္းမွာေရးရပါတယ္ ။
html မွာလိုပဲ www.w3c.org ကို reference ထည့္ေပးရပါမယ္။
ေအာက္ကအတိုင္းေရးလိုက္ပါ ။
<svg xmlns="http://www.w3.org/2000/svg">
<circle r="50"/>
</svg>
radius 50 pixel ရွိတဲ့ စက္၀ိုင္းပံုဆြဲမယ္လို႕ေျပာလိုက္တာပါ။
စက္၀ိုင္းပံုဆြဲဖို႕အတြက္ <circle .../> tag ေလးတစ္ခုပဲလိုပါတယ္ ။
first.svg လို႕နာမည္ေပးၿပီးသိမ္းလိုက္ပါ။ .svg extension မဟုတ္ရင္ Browser ကပံုေဖာ္ေပးႏိုင္စြမ္းမရွိပါဘူး။
ဒါေၾကာင့္ .svg အျဖစ္ သိမ္းေပးဖို႕ သတိျပဳပါ ။
Browser မွာ Run ၾကည့္ပါ။

ပံုမွာျပထားသလိုျမင္ေနရပါလိမ့္မယ္ ။
(ပံုမွာက Browser အမ်ိဳးမ်ိဳးအတြက္ စမ္းသပ္္ထားတဲ့ပံုပါ)
 ဒါက X ၀င္ရိုး Y ၀င္ရိုးမသတ္မွတ္ေပးလိုက္မိတဲ့အတြက္
X=0 , Y=0 အေနနဲ႕ ျပေပးေနတာေၾကာင့္ျဖစ္ပါတယ္ ။ ဒီလိုေလးျပင္လိုက္ရေအာင္
<svg xmlns="http://www.w3.org/2000/svg">
<circle r="50" cx="50%" cy="50%"/>
</svg>

စက္၀ိုင္းတစ္ခုလံုးပံုေပၚလာပါၿပီ ။ X နဲ႕ Y ကုိ % နဲ႕ထားေပးထားလိုက္တာက ပိုၿပီး အဆင္ေျပေစပါတယ္။
Browser ဘယ္ေလာက္အက်ယ္ရွိရွိ သူက % တြက္ၿပီးျပေပးမွာမို႕လို႕ျဖစ္ပါတယ္ ။ Circle radius အတြက္
ကုိလည္း % နဲ႕သတ္မွတ္ေပးလို႕ရပါတယ္ ။ ဘာမွမထည့္ရင္ေတာ့ Pixel နဲ႔ျပေပးမွာပါ ။
<svg xmlns="http://www.w3.org/2000/svg">
<circle r="25%" cx="50%" cy="50%"/>
</svg>

ဒါဆိုရင္ေတာ့ Browser ခ်ဲ႕ရင္ခ်ဲ႕သလို ခ်ံဳ႕ရင္ခ်ံဳ႕ သလိုအဆင္ေျပေအာင္ေဆာင္ရြက္ႏိုင္စြမ္းရွိသြားပါၿပီ ။
ပံုမွာစက္၀ိုင္းရဲ႕အေရာင္က အနက္ေရာက္ျဖစ္ေနတာသတိထားမိပါလိမ့္မယ္ ။ ဒါက Default ေပးထားတဲ့
အေရာင္ပါ။ ကုိယ္ႏွစ္သက္ရာအေရာင္ကုိ Attributes အေနနဲ႕ ထပ္ထည့္ေပးလို႕ရပါတယ္ ။
ဒီလိုေလးျပင္ေရးၾကည့္ရေအာင္
<svg xmlns="http://www.w3.org/2000/svg">
<circle r="25%" cx="50%" cy="50%" fill="darkorange"/>
</svg>
ဒါဆို လိေမၼာ္ရင့္ေရာင္ေလးနဲ႕ရပါၿပီ ။ အေရာင္ကုိ အခုလိုနာမည္သံုးလို႕ရသလို Color Code အေနနဲ႕သံုးမယ္
ဆိုရင္လည္းရပါတယ္ ။ ေနာက္တစ္မ်ိဳးေလးစမ္းၾကည့္ရေအာင္ ။
<svg xmlns="http://www.w3.org/2000/svg">
<circle r="25%" cx="50%" cy="50%" fill="none" stroke="#e60" stroke-width="25"/>
</svg>
Browser မွာ Run ၾကည့္ပါ လိေမၼာ္ေရာင္ စက္ဘီးသံေခြလို ပတ္ပတ္လည္ကြင္းေလးရပါလိမ့္မယ္။


fill="none" attribute ေၾကာင့္ ဘာအေရာင္မွမထည့္ေပးေတာ့ပါဘူး။stroke="#e60" က
အနားသတ္ Stroke ရဲ႕ အေရာင္ကုိ Color Code နဲ႕သတ္မွတ္ေပးလုိက္တာပါ။
stroke-width="25" ဆိုတာကေတာ့ Stroke ကို 25 Pixel စာယူမယ္လို႕ေျပာလိုက္တာပါ ။
Code ေတြျပင္ၿပီးထပ္စမ္းၾကည့္ပါဦး ။ စက္၀ိုင္းကုိဒီမွာခဏနားၿပီး ေလးေထာင့္ေလးဆြဲၾကည့္ရေအာင္။
ေလးေထာင့္ပံုအတြက္
<rect .../> ဆိုတဲ့ tag ကုိအသံုးျပဳပါတယ္ rect က rectangle ရဲ႕အတိုေကာက္ပါ။
စက္၀ိုင္းတုန္းက သံုးခဲ့တဲ့ attribute ေတြကုိသံုးလို႕ရပါတယ္ ။ ဘယ္ attribute ကုိေရွ႕မွာထားရမယ္
ဘယ္ attribute ကုိေနာက္မွာထားရမယ္လို႕သတ္မွတ္ထားတာရွိတာေၾကာင့္ ေနရာလြဲလို႕မရပါဘူး။
X Coordinate ကုိအရင္ေရးရပါတယ္ ။ X ၀င္ရိုးရဲ႕ Attribute ေတြကုိ X ၀င္ရိုးေရးၿပီးေနာက္ မွာ
ဆက္ေရးေပးရပါတယ္ ။ ကုန္ၿပီဆိုမွ Y Coordinate ကုိဆက္သြားရပါတယ္ ။
စမ္းၾကည့္ရေအာင္
<rect x="10%" width="80%" y="50%" height="10%"
fill="#8ff" stroke="black" stroke-width="6" />
Browser ဖြင့္ Run ၾကည့္ပါ ။

x="10%" width="80%" ဆိုတာက X 10% နဲ႕ သူ႕အက်ယ္ 80% ယူမယ္လို႕ေျပာတာပါ ။
X နဲ႕ပဲဆိုင္တဲ့ Xရဲ႕အက်ယ္ ျဖစ္လို႕ X ေနာက္မွာပဲေရးေပးရတာပါ ။
Code ကုိ ဒီလိုေလးျပင္ေရးၾကည့္ရေအာင္
<rect x="10%"  y="50%" width="80%" height="10%"
fill="#8ff" stroke="black" stroke-width="6" />
error တတ္လာတာေတြ႕ရပါလိမ့္မယ္ ။ width က X နဲ႕ဆိုင္ပါတယ္ height က Y နဲ႕ဆိုင္ပါတယ္။
X နဲ႔ဆိုင္တဲ့ width ကို X ေနာက္မွာပဲ attribute တစ္ခုအေနဲ႕ထပ္ထည့္ေပးလို႕ရပါတယ္ Yေနာက္မွာ
သြားထည့္ေပးလိုက္တဲ့အခါ Browser ကနားမလည္ေတာ့ပါဘူး ။
မ်ဥ္းေၾကာင္းကုိဆြဲခ်င္ရင္ေတာ့ <line .../> tag ကုိအသံုးျပဳရပါတယ္ ။
ေအာက္က Code ေလးကုိစမ္းၾကည့္လိုက္ပါ ။

<line x2="300" y2="100" stroke="green" stroke-width="10" stroke-linecap="round" />
မ်ဥ္းေၾကာင္းေလးတစ္ေၾကာင္းထြက္လာပါလိမ့္မယ္ ။
သူအလုပ္လုပ္သြားတဲ့ပံုစံက ဒီလိုေလးျဖစ္ပါတယ္ ။

attribute ေရးထားတာေလးကုိနားလည္ေအာင္ျပန္ၾကည့္ၾကည့္ပါ ။
အေျခခံ SVG ကုိ ဒီေလာက္နဲ႕နားလိုက္ပါမယ္ ။ အဆင္ေျပရင္ေျပသလို ထပ္တင္ေပးပါဦးမယ္ ။
စိတ္၀င္စားလို႕ ကုိယ့္ဖာသာကုိယ္ေလ့လာၾကည့္ခ်င္တယ္ဆိုရင္ေတာ့
www.w3c.org/svg မွာ ေလ့လာလို႕ရပါတယ္ ။