กราฟิก HTML SVG
SVG กำหนดกราฟิกแบบเวกเตอร์ในรูปแบบ XML
SVG คืออะไร?
- SVG ย่อมาจาก Scalable Vector Graphics
- SVG ใช้เพื่อกำหนดกราฟิกสำหรับ Web
- SVG เป็นคำแนะนำของ W3C
HTML <svg> องค์ประกอบ
องค์ประกอบ HTML <svg>เป็นคอนเทนเนอร์สำหรับกราฟิก SVG
SVG มีหลายวิธีในการวาดเส้นทาง กล่อง วงกลม ข้อความ และภาพกราฟิก
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุน
<svg>องค์ประกอบอย่างสมบูรณ์
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG Circle
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<svg
width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green"
stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
SVG สี่เหลี่ยมผืนผ้า
ตัวอย่าง
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
/>
</svg>
SVG สี่เหลี่ยมผืนผ้าโค้งมน
ตัวอย่าง
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20"
width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
SVG Star
ตัวอย่าง
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
โลโก้ SVG
ตัวอย่าง
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%"
y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"
/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
<text fill="#ffffff" font-size="45"
font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not
support inline SVG.
</svg>
ความแตกต่างระหว่าง SVG และ Canvas
SVG เป็นภาษาสำหรับอธิบายกราฟิก 2 มิติในรูปแบบ XML
Canvas วาดกราฟิก 2D ได้ทันที (ด้วย JavaScript)
SVG เป็นแบบ XML ซึ่งหมายความว่าทุกองค์ประกอบมีอยู่ใน SVG DOM คุณสามารถแนบตัวจัดการเหตุการณ์ JavaScript สำหรับองค์ประกอบ
ใน SVG รูปร่างที่วาดแต่ละรูปจะถูกจดจำเป็นวัตถุ ถ้าแอตทริบิวต์ของวัตถุ SVG มีการเปลี่ยนแปลง เบราว์เซอร์สามารถแสดงรูปร่างใหม่ได้โดยอัตโนมัติ
แคนวาสแสดงผลแบบพิกเซลต่อพิกเซล ในแคนวาส เมื่อวาดกราฟิกแล้ว เบราว์เซอร์จะลืมมัน หากควรเปลี่ยนตำแหน่งของฉาก ฉากทั้งฉากจะต้องได้รับการวาดใหม่ รวมถึงวัตถุใดๆ ที่กราฟิกอาจบังอยู่
การเปรียบเทียบผ้าใบและ SVG
ตารางด้านล่างแสดงความแตกต่างที่สำคัญระหว่าง Canvas และ SVG:
| Canvas | SVG |
|---|---|
|
|
กวดวิชา SVG
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ SVG โปรดอ่าน บทช่วย สอน SVGของ เรา