บทที่ 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เพิ่มตารางลงในฐานข้อมูลไม่ได้ ใช้ phpmyadmin
โดย pipe01 ส 03 ก.ค. 2010 11:21 am บอร์ด SQL - Database
4
2926
ส 03 ก.ค. 2010 9:46 pm โดย mindphp View Topic เพิ่มตารางลงในฐานข้อมูลไม่ได้ ใช้ phpmyadmin
จะเชื่อม form register ของหน้าหลักไปที่ database ของ phpbb ได้ยังไง...
โดย Anonymous ศ 02 ก.ค. 2010 4:32 pm บอร์ด Programming - PHP
1
1929
ศ 02 ก.ค. 2010 8:06 pm โดย mindphp View Topic จะเชื่อม form register ของหน้าหลักไปที่ database ของ phpbb ได้ยังไง...
ขออถามหน่อยครับ dการเขียนโค้ดแบบไหน ประมวลผลน้อยกว่ากัน
โดย Anonymous พฤ 01 ก.ค. 2010 10:54 pm บอร์ด Programming - PHP
2
1056
ศ 02 ก.ค. 2010 12:13 am โดย imsn View Topic ขออถามหน่อยครับ dการเขียนโค้ดแบบไหน ประมวลผลน้อยกว่ากัน
ภาษ C เขียนออกคำสั้งคอมได้รึเปล่า
โดย mayures พฤ 01 ก.ค. 2010 3:09 pm บอร์ด Programming - C/C++ & java & Python
0
1189
พฤ 01 ก.ค. 2010 3:09 pm โดย mayures View Topic ภาษ C เขียนออกคำสั้งคอมได้รึเปล่า
ช่วยด้วยเว็บไซค์ตกอันดับ
โดย sdbilliant พฤ 01 ก.ค. 2010 2:30 pm บอร์ด Programming - PHP
4
1605
พ 22 มิ.ย. 2011 10:09 am โดย dexjanghan View Topic ช่วยด้วยเว็บไซค์ตกอันดับ
แจกฟรี โปรแกรมป้องกันไวรัส System Defend Total Security2011v2.0ใหม่ล่าสุด ใช้ฟรี
โดย opolmju พ 30 มิ.ย. 2010 4:36 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
6611
พฤ 23 ก.ย. 2010 4:10 pm โดย opolmju View Topic แจกฟรี โปรแกรมป้องกันไวรัส System Defend Total Security2011v2.0ใหม่ล่าสุด ใช้ฟรี
เขียนโปรรแกรมพัสดุ เก็บหมายเลขครุภัณฑ์ รันหมายเลขเอง
โดย hexhexhex พ 30 มิ.ย. 2010 2:08 pm บอร์ด Programming - PHP
0
1738
พ 30 มิ.ย. 2010 2:08 pm โดย hexhexhex View Topic เขียนโปรรแกรมพัสดุ เก็บหมายเลขครุภัณฑ์ รันหมายเลขเอง
อยากทราบ วิธีนับจำนวน ครั้งที่ download
โดย sssai27 พ 30 มิ.ย. 2010 11:33 am บอร์ด Programming - PHP
3
4177
พฤ 01 ก.ค. 2010 2:02 pm โดย mindphp View Topic อยากทราบ วิธีนับจำนวน ครั้งที่ download