บทนำ
SVG (Scalable Vector Graphics) เป็นภาษาอธิบายกราฟิกเวกเตอร์ 2 มิติใน XML เหมาะสำหรับแผนภูมิ กราฟ และรูปทรงที่ต้องขยาย-ย่อได้คุณภาพไม่ลด
วิธีฝัง SVG ใน HTML5
1. Inline SVG (แนะนำ)
<svg xmlns="https://www.w3.org/2000/svg"> ... </svg>
2. ผ่านแท็กอื่นๆ
<img src="image.svg">- ใช้เหมือนรูปภาพทั่วไป<object data="image.svg" type="image/svg+xml">- รองรับ fallback<embed src="image.svg" type="image/svg+xml">- แบบเก่า<iframe src="image.svg">- แยกบริบท
องค์ประกอบรูปทรงหลัก
<circle>- วงกลม<rect>- สี่เหลี่ยม<line>- เส้นตรง<ellipse>- วงรี<polygon>- รูปหลายเหลี่ยม<path>- เส้นทางซับซ้อน (ทรงพลังที่สุด)
ตัวอย่างวงกลม
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem { position: relative; left: 10%; transform: translateX(-20%); }
</style>
<title>HTML5 SVG Circle</title>
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
<circle id="greencircle" cx="60" cy="60" r="50" fill="green" />
</svg>
</body>
</html>
ข้อดีของ SVG
- เวกเตอร์ - ขยาย-ย่อไม่เสียคุณภาพ
- แก้ไขได้ด้วย CSS และ JavaScript
- เข้าถึง DOM ได้ (event, animation)
- รองรับ Accessibility (title, desc)
- ขนาดไฟล์เล็กสำหรับกราฟิกเรียบง่าย
