ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 4 HTML5 SVG 
    SVG คือแท็กที่ใช้สำหรับการวาดกราฟิกแบบเวกเตอร์ SVG ย่อมาจาก scalable Vector Graphic เป็นภาษาที่สามารถประมวลผลข้อมูลแบบ Graphic 2 มิติ
ความต่างที่สำคัญของ SVG กับ canvas คือ
1.SVG ได้ผลลัพธ์เป็นเวกเตอร์ ส่วน canvas ได้ผลลัพธ์เป็นราสเตอร์ (ภายในกรอบวัตถุ canvas)
2.SVG สั่งวาดด้วยแท็กแบบ markup (ซับเซ็ตของ XML) ส่วน canvas สั่งวาดด้วย JavaScript
ข้อดีของ SVG
1.สามารถย่อ-ขยายภาพ โดยที่ภาพยังคงความคมชัด
ข้อเสียของ SVG
2.ยังไม่รองรับในบาง Web Browser
ตัวอย่าง

<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
 
</body>
</html>

ผลลัพธ์คือ

นี่เป็นตัวอย่างไฟล์ SVG แบบง่ายๆ ซึ่งจะแสดงผลออกมาเป็นวงกลม โดยมีรายละเอียดต่างๆ ตาม XML data ที่เราใส่เข้าไปดังนี้ครับ
1.cx, cy คือ พิกัด x, y ของจุดศูนย์กลางของวงกลม หากไม่ใส่ จะมีค่าเป็น 0
2.r คือ รัศมีของวงกลม
3.stroke คือ สีของเส้นขอบ
4.stroke-width คือ ความหนาของเส้นขอบ
5.fill คือ สีของกราฟฟิกที่สร้างขึ้น
  
   นอกจากนี้ SVG ยังสามารถสร้างรูปทรง (shape) ต่างๆ ได้มากมาย เช่น
1.Rectangle <rect>
2.Circle <circle>
3.Ellipse <ellipse>
4.Line <line>
5.Polyline <polyline>
6.Polygon <polygon>
7.Path <path>

   ซึ่งแต่ละ shape ก็จะมี attribute ต่างๆ มาให้เรากำหนดค่า เพื่อให้แสดงผลออกมาตามต้องการ


ข้อมูลอ้างอิง
http://www.w3schools.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ประกาศปิดหมวด ยกเลิกอัพเดดเนื้อหา และ งดตอบคำถามต่างๆ เกี่ยวกับ Magento
โดย mindphp ส 14 ก.ย. 2019 5:31 pm บอร์ด Magento user Guide Knowledge
0
21
ส 14 ก.ย. 2019 5:31 pm โดย mindphp
แนะนำ และสอนการใช้งาน Google Chrome Remote Desktop โปรแกรมรีโหมทหน้าจอ
โดย zend_framework ส 14 ก.ย. 2019 5:28 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
22
ส 14 ก.ย. 2019 5:28 pm โดย zend_framework
อยากทราบวิธีสร้างรูปภาพในไลน์กลุ่มแล้ว กดที่รูปเด้งเข้าไลน์@ของเราเอง
โดย Anonymous ส 14 ก.ย. 2019 4:38 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
1
31
ส 14 ก.ย. 2019 4:52 pm โดย mindphp
อยากทราบวิธีที่จะให้ อาเรย์วนลูปอย่างไรครับ
โดย Patipat ส 14 ก.ย. 2019 3:46 pm บอร์ด Joomla Development
3
34
ส 14 ก.ย. 2019 5:25 pm โดย mindphp
สร้างแถบเมนู
โดย alonglot ส 14 ก.ย. 2019 12:35 pm บอร์ด Joomla Development
0
18
ส 14 ก.ย. 2019 12:35 pm โดย alonglot
งานประจำวันที่ 14 กันยายน 2562
โดย Patipat ส 14 ก.ย. 2019 10:39 am บอร์ด M088 - ปฏิภัทร สารธรรม
1
6
ส 14 ก.ย. 2019 7:03 pm โดย Patipat
งานประจำวันที่ 14 กันยายน 2562
โดย aninthana ส 14 ก.ย. 2019 10:22 am บอร์ด M092 - อนินธนา บุญยัง
2
12
ส 14 ก.ย. 2019 8:39 pm โดย thatsawan
งานประจำวันที่ 14 กันยายน 2562
โดย jamepiyawat ส 14 ก.ย. 2019 10:05 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
1
4
ส 14 ก.ย. 2019 7:05 pm โดย jamepiyawat
งาน RML Purchase Requisition (PR)&APPLICATION FORM
โดย chatee supasand ศ 13 ก.ย. 2019 7:45 pm บอร์ด MT33 - นายชาตรี สุภาแสน
0
2
ศ 13 ก.ย. 2019 7:45 pm โดย chatee supasand
google photos เพิ่มฟีเจอร์ Memories นำภาพถ่ายหรือวิดีโอเก่า ๆ ของเรามาแสดง
โดย jamepiyawat ศ 13 ก.ย. 2019 6:08 pm บอร์ด Share Knowledge
0
18
ศ 13 ก.ย. 2019 6:08 pm โดย jamepiyawat
Microsoft เปลี่ยนชื่อ Microsoft To-Do เป็น To Do หวังให้ใช้งานแทน Wunderlis
โดย chatee supasand ศ 13 ก.ย. 2019 6:05 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
19
ศ 13 ก.ย. 2019 6:05 pm โดย chatee supasand
วิธีการ Export ข้อมูลมาเป็นไฟล์ Excel โดย phpbb
โดย Ittichai_chupol ศ 13 ก.ย. 2019 4:24 pm บอร์ด PHP Knowledge
0
24
ศ 13 ก.ย. 2019 4:24 pm โดย Ittichai_chupol
ข้อแตกต่างระหว่างสัญญาเช่าทางการเงินกับสัญญาเช่าดำเนินงาน
โดย EyePornnipa ศ 13 ก.ย. 2019 4:23 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
4
ศ 13 ก.ย. 2019 4:23 pm โดย EyePornnipa
อยากทราบวิธีการแก้ไข Undefined index ใน phpbb
โดย Ittichai_chupol ศ 13 ก.ย. 2019 3:26 pm บอร์ด Programming - PHP
1
35
ศ 13 ก.ย. 2019 3:36 pm โดย บุคคลทั่วไป
สินทรัพย์ถาวร (Fixed Assets) คือ
โดย EyePornnipa ศ 13 ก.ย. 2019 2:54 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
7
ศ 13 ก.ย. 2019 2:54 pm โดย EyePornnipa
อยากทราบวิธีทำให้ path way มีลูกศรชี ครับ
โดย jamepiyawat ศ 13 ก.ย. 2019 2:53 pm บอร์ด Joomla Development
1
30
ศ 13 ก.ย. 2019 2:55 pm โดย tsukasaz
R - ปรับ URL สำหรับ โหลดไฟล์ Joomla Core มาไว้ที่ jupdate.mindphp.com
โดย mindphp ศ 13 ก.ย. 2019 12:15 pm บอร์ด MDUpgrade
0
1
ศ 13 ก.ย. 2019 12:15 pm โดย mindphp
B - Allowed memory size of 134217728 bytes exhausted
โดย mindphp ศ 13 ก.ย. 2019 12:08 pm บอร์ด MDUpgrade
2
2
ศ 13 ก.ย. 2019 12:30 pm โดย mindphp
สอบถามครับ RML สร้างเส้นตาราง แบบนี้ยังไงอะครับ
โดย chatee supasand ศ 13 ก.ย. 2019 10:28 am บอร์ด Programming - C/C++ & java & Python
2
50
ศ 13 ก.ย. 2019 11:03 am โดย chatee supasand
งานประจำวันที่ 13 กันยายน 2562
โดย aninthana ศ 13 ก.ย. 2019 9:36 am บอร์ด M092 - อนินธนา บุญยัง
1
10
ศ 13 ก.ย. 2019 6:00 pm โดย aninthana