SVG នៅក្នុង HTML5

SVG ពាក្យពេញ Scalable Vector Graphics ហើយវាគឺជាភាសាសម្រាប់រៀបរាប់អំពី 2D ក្រាហ្វិក និងកម្មវិធីក្រាហ្វិកនៅក្នុង XML ។ SVG ភាគច្រើនមានប្រយោជន៍សម្រាប់បង្កើតវ៉ិចទ័រប្រភេទជាដ្យាក្រាម ដូចជា Pie charts, ក្រាហ្វិកដែលមានពីរវិមាត្រ (Two-dimensional graphs) ដែល X , Y ជាប្រព័ន្ធកូអរដោណេ (coordinate system)។

SVG ត្រូវបានកំណត់ស្តង់ដារដោយ W3C នៅឆ្នា១៩៩៩ ហើយអ្នកអាចពិនិត្យមើលកំណែចុងក្រោយបំផុតនៃការបញ្ជាក់របស់ SVG នៅក្នុង SVG Specification

១) ការមើលឯកសារ SVG

ភាគច្រើននៃកម្មវិធីមើលវេបសាយ (web browsers) អាចបង្ហាញ SVG ជាលក្ខណៈរូបភាព PNG, GIF, JPG បាន។ ហើយអ្នកប្រើប្រាស់កម្មវិធីមើលវេបសាយក៏ អាចដំឡើងកម្មវិធី Adobe SVG Viewer ដើម្បីមើល SVG នៅក្នុងកម្មវិធីមើលវេបសាយ (browsers) បានផងដែរ។

២) Embeding SVG នៅក្នុង HTML5

HTML5 អនុញ្ញាតឱ្យ Embeding SVG ដោយប្រើស្លាក <svg> … </ svg> នេះផ្ទាល់ដែលមាន syntax ដូចខាងក្រោមនេះ

svg

 

៣. HTML5 – SVG រង្វង់ (Circle)

ខាងក្រោមនេះគឺជា HTML5 ដែលប្រើ SVG សំរាប់គូររង្វង់ <circle>

html5-svg-circle-coding

បង្ហាញលទ្ធផលដូចខាងក្រោម:

html5-svg-circle-result

៤. HTML5 – SVG ចតុកោណ (Rectangle)

គូរជាចតុកោណដោយប្រើប្រាស់ <rect> tag

html5-svg-rect

បង្ហាញលទ្ធផលដូចខាងក្រោមនៅក្នុង HTML5

html5-svg-rect-result

៥. HTML5 – SVG បន្ទាត់ (line)

គូរជាបន្ទាត់ដោយប្រើប្រាស់ <line> tag

html5-svg-line-coding

បង្ហាញលទ្ធផលដូចខាងក្រោមនៅក្នុង HTML5

html5-svg-line-result

៦. HTML5 – SVG រាងពងក្រពើ (Ellipse)

គូររាងពងក្រពើដោយប្រើប្រាស់ <ellipse> tag

html5-svg-ellipse-coding

បង្ហាញលទ្ធផលដូចខាងក្រោមនៅក្នុង HTML5

html5-svg-ellipse-result

៧. HTML5 – SVG ពហុកោណ (Polygon)

គូរជាពហុកោណដោយប្រើប្រាស់ <polygon > tag

html5-svg-polygon-coding

បង្ហាញលទ្ធផលដូចខាងក្រោមនៅក្នុង HTML5

html5-svg-polygon-result

៨. HTML5 – SVG ពហុបន្ទាត់ (Polyline)

គូរជាពហុបន្ទាត់ដោយប្រើប្រាស់ <polyline> tag

html5-svg-polyline-coding

បង្ហាញលទ្ធផលដូចខាងក្រោមនៅក្នុង HTML5

html5-svg-polyline-result

៩. HTML5 – SVG Gradients
គូររាងពងក្រពើមួយដែលប្រើប្រាស់ <ellipse> tag ហើយនឹងប្រើ <radialGradient> tag ដើម្បីកំណត់ SVG radial gradient  ។ វិធីដែលស្រដៀងគ្នាដែលអ្នកអាចប្រើ <linearGradient> tag ដើម្បីបង្កើត SVG linear gradient ។

html5-svg-gradient-coding

បង្ហាញលទ្ធផលដូចខាងក្រោមនៅក្នុង HTML5

html5-svg-gradient-result

១០. HTML5 – SVG ផ្កាយ (Star)

គូរជារូបផ្កាយដោយប្រើប្រាស់ <polygon> tag

html5-svg-star-coding

បង្ហាញលទ្ធផលដូចខាងក្រោមនៅក្នុង HTML5

html5-svg-star-result