ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การใช้งาน bootstrap Tooltip
โดย abdkode พฤ 17 ม.ค. 2019 7:10 pm บอร์ด Jquery & Ajax Knowledge
0
6
พฤ 17 ม.ค. 2019 7:10 pm โดย abdkode
ว่าด้วยภาษีรถยนต์
โดย abdkode พฤ 17 ม.ค. 2019 6:46 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
พฤ 17 ม.ค. 2019 6:46 pm โดย abdkode
การทำใบเสนอราคา (Quotations) ในโปรแกรม Open ERP
โดย Chidchanok พฤ 17 ม.ค. 2019 6:37 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
5
พฤ 17 ม.ค. 2019 6:37 pm โดย Chidchanok
ความแตกต่างของ get และ post
โดย abdkode พฤ 17 ม.ค. 2019 6:19 pm บอร์ด PHP Knowledge
0
13
พฤ 17 ม.ค. 2019 6:19 pm โดย abdkode
การเพิ่มข้ออมูลลูกค้า ในโปรแกรม Open ERP
โดย Chidchanok พฤ 17 ม.ค. 2019 5:31 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
5
พฤ 17 ม.ค. 2019 5:31 pm โดย Chidchanok
เงื่อนไขในการขนส่งสินค้า
โดย Chidchanok พฤ 17 ม.ค. 2019 4:41 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
7
พฤ 17 ม.ค. 2019 4:41 pm โดย Chidchanok
ภาษีโรงเรือนและที่ดิน ต้องเสียภาษีอย่างไร
โดย Chidchanok พฤ 17 ม.ค. 2019 3:59 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
10
พฤ 17 ม.ค. 2019 3:59 pm โดย Chidchanok
โปรแกรมตัดแต่งรูป ที่ใช้กับ Ubuntu มีโปรแกรมอะไรบ้างค่ะ
โดย ณัฐกฤตา บุญญะฤทธิ์ พฤ 17 ม.ค. 2019 3:34 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
4
พฤ 17 ม.ค. 2019 3:34 pm โดย ณัฐกฤตา บุญญะฤทธิ์
ภาษีป้าย ต้องเสียภาษีอย่างไร
โดย Chidchanok พฤ 17 ม.ค. 2019 3:30 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
5
พฤ 17 ม.ค. 2019 3:30 pm โดย Chidchanok
วิดิโอใน google drive ขึ้น This video format is not supported. แก้ไขยังๆไงคะ
โดย Chidchanok พฤ 17 ม.ค. 2019 2:26 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
15
พฤ 17 ม.ค. 2019 6:10 pm โดย thatsawan
วิธีการลบ แถบหมวดเมนู .MOD(Extension) ใน phpbb
โดย Ittichai_chupol พฤ 17 ม.ค. 2019 1:59 pm บอร์ด PHP Knowledge
0
6
พฤ 17 ม.ค. 2019 1:59 pm โดย Ittichai_chupol
การขีดเส้นใต้ตัวอักษร ในเว็บบอร์ด phpBB โดยใช้เครื่องมือใน BBcode
โดย จันนุสรณ์ ดีแก่ พฤ 17 ม.ค. 2019 1:11 pm บอร์ด phpBB user Guide Knowledge
0
15
พฤ 17 ม.ค. 2019 1:11 pm โดย จันนุสรณ์ ดีแก่
หนี้สูญได้รับคืน ต้องบันทึกบัญชีอย่างไร
โดย Chidchanok พฤ 17 ม.ค. 2019 12:33 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
16
พฤ 17 ม.ค. 2019 12:33 pm โดย Chidchanok
มาทำความรู้จักกับหนี้สูญและหนี้สงสัยจะสูญ
โดย Chidchanok พฤ 17 ม.ค. 2019 11:43 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
19
พฤ 17 ม.ค. 2019 11:43 am โดย Chidchanok
อยากเที่ยวแต่เงินในกระเป๋าไม่เข้าใจ
โดย จันนุสรณ์ ดีแก่ พฤ 17 ม.ค. 2019 11:41 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
20
พฤ 17 ม.ค. 2019 11:41 am โดย จันนุสรณ์ ดีแก่
[Extension phpBB3.1.1] Halloween Extension ไตล์ในรูปแบบของวันฮาโลวีน ชวนคุณขนลุกในวันหลอนๆ
โดย จันนุสรณ์ ดีแก่ พฤ 17 ม.ค. 2019 11:20 am บอร์ด phpBB 3.1 Extension Review
0
19
พฤ 17 ม.ค. 2019 11:20 am โดย จันนุสรณ์ ดีแก่
Python Gui เบื้องต้น part6 MessageBox และ Event
โดย ichimarusoichi พฤ 17 ม.ค. 2019 11:10 am บอร์ด Python Knowledge
0
23
พฤ 17 ม.ค. 2019 11:10 am โดย ichimarusoichi
[Extension phpBB3.1.1] Naruto Shippuuden Extension ไตล์ในรูปแบบของนารูโตะ
โดย จันนุสรณ์ ดีแก่ พฤ 17 ม.ค. 2019 10:41 am บอร์ด phpBB 3.1 Extension Review
0
13
พฤ 17 ม.ค. 2019 10:41 am โดย จันนุสรณ์ ดีแก่
วิธีแปะลิ้งไว้ในส่วนเกิ่นนำของบทความทำอย่างไรค่ะ
โดย ณัฐกฤตา บุญญะฤทธิ์ พฤ 17 ม.ค. 2019 10:29 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
28
พฤ 17 ม.ค. 2019 4:36 pm โดย ณัฐกฤตา บุญญะฤทธิ์
การจัดการเรียนการสอนด้วย Google Classroom ใน Google Apps for education
โดย ณัฐกฤตา บุญญะฤทธิ์ พ 16 ม.ค. 2019 11:35 pm บอร์ด Share Knowledge
0
59
พ 16 ม.ค. 2019 11:35 pm โดย ณัฐกฤตา บุญญะฤทธิ์