HTML SVG Graphics

SVG คืออะไร?

SVG ย่อมาจาก Scalable Vector Graphics เป็นมาตรฐานของ W3C สำหรับสร้างกราฟิกแบบเวกเตอร์ (Vector-based Graphics) โดยใช้ XML เป็นภาษากำหนดรูปทรงต่าง ๆ

กราฟิก SVG สามารถฝัง (embed) ลงในหน้า HTML ได้โดยตรง และสามารถขยายหรือย่อขนาดได้โดย ไม่สูญเสียคุณภาพของภาพ SVG ได้รับการสนับสนุนจากเบราว์เซอร์หลักทั้งหมด (เช่น Chrome, Firefox, Safari, Edge)

SVG ไม่ใช่แท็กของ HTML โดยตรง แต่เป็นภาษามาร์กอัปแบบ XML ที่สามารถฝังลงในเอกสาร HTML5 ได้โดยตรงผ่านแท็ก ซึ่งเบราว์เซอร์สมัยใหม่รองรับเต็มรูปแบบ

คุณสมบัติสำคัญของ SVG

ย่อมาจาก Scalable Vector Graphics
ใช้สำหรับสร้างกราฟิกแบบเวกเตอร์บนเว็บ
เขียนด้วย ภาษา XML
องค์ประกอบ (element) และแอตทริบิวต์ (attribute) สามารถ ใส่แอนิเมชันได้
เป็นมาตรฐานของ W3C Recommendation
สามารถใช้งานร่วมกับ CSS, DOM, XSL, และ JavaScript

แท็ก `<svg>`

แท็ก <svg> เป็น คอนเทนเนอร์ (container) สำหรับเก็บกราฟิก SVG

SVG มีคำสั่งสำหรับวาดรูปร่างหลายแบบ เช่น เส้นทาง (paths), สี่เหลี่ยม (rectangles), วงกลม (circles), รูปหลายเหลี่ยม (polygons), และข้อความ (text)

วงกลม (SVG Circle)

				
					<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

สี่เหลี่ยม (SVG Rectangle)

				
					<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>

สี่เหลี่ยมมีมุมโค้งและโปร่งใส (Opacity + Rounded Corners)

				
					<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>

วงรีพร้อมการไล่สีและข้อความ (Gradient Ellipse + Text)

				
					<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>
</svg>

ความแตกต่างระหว่าง SVG กับ Canvas

รายการเปรียบเทียบ	SVG	Canvas
ประเภทกราฟิก	ใช้ XML กำหนดกราฟิกแบบเวกเตอร์	วาดกราฟิกแบบพิกเซลด้วย JavaScript
ลักษณะการทำงาน	องค์ประกอบทุกชิ้นเป็นวัตถุใน DOM	วาดแล้วถูกลืม ต้องวาดใหม่เมื่อมีการเปลี่ยนแปลง
การจัดการเหตุการณ์ (Events)	รองรับการผูก Event Handler (เช่น onClick)	ไม่รองรับโดยตรง
คุณภาพของภาพ	คมชัดทุกขนาด (Resolution-independent)	ขึ้นอยู่กับความละเอียด (Resolution-dependent)
การแสดงผลข้อความ	คุณภาพสูง	ข้อความแปลงเป็นพิกเซลความชัดลดลง
ความเร็วในการเรนเดอร์	ช้ากว่ากราฟิกซับซ้อน	เร็วกว่าสำหรับงานกราฟิกหนัก ๆ เช่น เกม
การบันทึกภาพ	ไม่สามารถบันทึกโดยตรง	บันทึกเป็น .png หรือ .jpg ได้ง่าย
การใช้งานเหมาะกับ	โลโก้, ไดอะแกรม, แผนภาพ	เกม, กราฟิกเคลื่อนไหวต่อเนื่อง

โดยทั่วไป SVG เหมาะกับกราฟิกเชิงโครงสร้าง ส่วน Canvas เหมาะกับการเรนเดอร์ภาพเคลื่อนไหวหรือกราฟิกเรียลไทม์