HTML SVG เบื้องต้น

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการใช้ HTML Canvas เพื่อสร้างกราฟิกแบบไดนามิกบนเว็บไซต์ คราวนี้เราจะมาทำความรู้จักกับอีกหนึ่งเทคโนโลยีที่สำคัญสำหรับการสร้างกราฟิก นั่นคือ SVG (Scalable Vector Graphics) ซึ่งเป็นวิธีการสร้างกราฟิกแบบเวกเตอร์ที่สามารถปรับขนาดได้อย่างไม่จำกัดโดยไม่สูญเสียคุณภาพ

ความแตกต่างระหว่าง Raster Graphics และ Vector Graphics

ก่อนที่เราจะเจาะลึกเรื่อง SVG เรามาทำความเข้าใจความแตกต่างพื้นฐานระหว่าง Raster Graphics และ Vector Graphics กันก่อน:

• Raster Graphics (หรือ Bitmap Graphics): ประกอบด้วยพิกเซล (pixels) จำนวนมากที่เรียงตัวกันเป็นภาพ ตัวอย่างของ Raster Graphics ได้แก่ รูปภาพ JPEG, PNG, และ GIF เมื่อเราขยายภาพ Raster Graphics มากเกินไป เราจะเห็นเป็นพิกเซลที่แตก ทำให้ภาพดูไม่คมชัด
• Vector Graphics: สร้างขึ้นจากสมการทางคณิตศาสตร์ที่อธิบายรูปร่าง, เส้น, และสี ตัวอย่างของ Vector Graphics ได้แก่ รูปภาพ SVG เมื่อเราขยายภาพ Vector Graphics ภาพจะยังคงคมชัดอยู่เสมอ เพราะโปรแกรมจะคำนวณรูปร่างใหม่ตามขนาดที่ขยาย

ข้อดีของ Vector Graphics (SVG) เมื่อเทียบกับ Raster Graphics:

• Scalability: สามารถปรับขนาดได้อย่างไม่จำกัดโดยไม่สูญเสียคุณภาพ
• Small File Size: มักจะมีขนาดไฟล์เล็กกว่า Raster Graphics โดยเฉพาะอย่างยิ่งสำหรับภาพที่มีสีและรายละเอียดไม่ซับซ้อน
• Interactivity: สามารถควบคุมและแก้ไขแต่ละส่วนประกอบของภาพได้ง่ายด้วย JavaScript
• Accessibility: สามารถเข้าถึงและแก้ไขโค้ด SVG ได้โดยตรง ทำให้ง่ายต่อการปรับแต่งและเพิ่มประสิทธิภาพในการเข้าถึง (Accessibility)

ข้อเสียของ Vector Graphics (SVG):

• Complexity: อาจไม่เหมาะสมสำหรับภาพถ่ายที่มีรายละเอียดซับซ้อนมากๆ เพราะไฟล์อาจมีขนาดใหญ่ได้
• Rendering Performance: อาจใช้ทรัพยากรในการประมวลผลมากกว่า Raster Graphics สำหรับภาพที่ซับซ้อนมาก

การสร้าง SVG Element

ในการสร้าง SVG บนหน้าเว็บ เราจะใช้ <svg> element ซึ่งเป็น container สำหรับกราฟิกเวกเตอร์ทั้งหมด

<svg width="200" height="100">
  <!-- SVG content goes here -->
</svg>

ในตัวอย่างนี้ เรากำหนดความกว้าง (width) เป็น 200 พิกเซล และความสูง (height) เป็น 100 พิกเซล ให้กับ SVG canvas ของเรา

การวาดรูปทรงพื้นฐานใน SVG

SVG มี element สำหรับวาดรูปทรงพื้นฐานต่างๆ มากมาย เราจะมาดูตัวอย่างการวาดรูปทรงที่พบบ่อย:

1. สี่เหลี่ยม (Rectangle)

ใช้ <rect> element เพื่อวาดสี่เหลี่ยม

<svg width="200" height="100">
  <rect width="100" height="50" x="20" y="20" style="fill:red;stroke:black;stroke-width:2" />
</svg>

Attributes ที่สำคัญ:

• width: ความกว้างของสี่เหลี่ยม
• height: ความสูงของสี่เหลี่ยม
• x: ตำแหน่งของมุมบนซ้ายของสี่เหลี่ยมบนแกน X
• y: ตำแหน่งของมุมบนซ้ายของสี่เหลี่ยมบนแกน Y
• style: กำหนดสไตล์ของสี่เหลี่ยม (สีพื้น, สีเส้นขอบ, ความหนาของเส้นขอบ)

อธิบายเพิ่มเติม:

• fill: กำหนดสีพื้นของรูปทรง (ในตัวอย่างคือสีแดง)
• stroke: กำหนดสีของเส้นขอบ (ในตัวอย่างคือสีดำ)
• stroke-width: กำหนดความหนาของเส้นขอบ (ในตัวอย่างคือ 2 พิกเซล)

2. วงกลม (Circle)

ใช้ <circle> element เพื่อวาดวงกลม

<svg width="200" height="100">
  <circle cx="100" cy="50" r="40" style="fill:blue;stroke:black;stroke-width:2" />
</svg>

Attributes ที่สำคัญ:

• cx: ตำแหน่งของจุดศูนย์กลางของวงกลมบนแกน X
• cy: ตำแหน่งของจุดศูนย์กลางของวงกลมบนแกน Y
• r: รัศมีของวงกลม
• style: กำหนดสไตล์ของวงกลม (สีพื้น, สีเส้นขอบ, ความหนาของเส้นขอบ)

3. เส้น (Line)

ใช้ <line> element เพื่อวาดเส้น

<svg width="200" height="100">
  <line x1="20" y1="20" x2="180" y2="80" style="stroke:green;stroke-width:3" />
</svg>

Attributes ที่สำคัญ:

• x1: ตำแหน่งเริ่มต้นของเส้นบนแกน X
• y1: ตำแหน่งเริ่มต้นของเส้นบนแกน Y
• x2: ตำแหน่งสิ้นสุดของเส้นบนแกน X
• y2: ตำแหน่งสิ้นสุดของเส้นบนแกน Y
• style: กำหนดสไตล์ของเส้น (สีเส้น, ความหนาของเส้น)

4. วงรี (Ellipse)

ใช้ <ellipse> element เพื่อวาดวงรี

<svg width="200" height="100">
  <ellipse cx="100" cy="50" rx="80" ry="30" style="fill:yellow;stroke:black;stroke-width:2" />
</svg>

Attributes ที่สำคัญ:

• cx: ตำแหน่งของจุดศูนย์กลางของวงรีบนแกน X
• cy: ตำแหน่งของจุดศูนย์กลางของวงรีบนแกน Y
• rx: รัศมีของวงรีบนแกน X
• ry: รัศมีของวงรีบนแกน Y
• style: กำหนดสไตล์ของวงรี (สีพื้น, สีเส้นขอบ, ความหนาของเส้นขอบ)

5. รูปหลายเหลี่ยม (Polygon)

ใช้ <polygon> element เพื่อวาดรูปหลายเหลี่ยม

<svg width="200" height="100">
  <polygon points="20,20 40,80 160,80 180,20" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>

Attributes ที่สำคัญ:

• points: กำหนดจุดยอดของรูปหลายเหลี่ยม แต่ละจุดจะถูกคั่นด้วยช่องว่าง และแต่ละ coordinate จะถูกคั่นด้วยเครื่องหมาย comma (,)
• style: กำหนดสไตล์ของรูปหลายเหลี่ยม (สีพื้น, สีเส้นขอบ, ความหนาของเส้นขอบ)

6. เส้นโค้ง (Path)

ใช้ <path> element เพื่อวาดเส้นโค้งและรูปทรงที่ซับซ้อนกว่า

<svg width="200" height="100">
  <path d="M20,20 C20,100 180,100 180,20" style="fill:none;stroke:orange;stroke-width:3" />
</svg>

Attributes ที่สำคัญ:

• d: กำหนดชุดคำสั่งในการวาดเส้นโค้ง (Path Data) ซึ่งมีความซับซ้อนกว่ารูปทรงอื่นๆ
• style: กำหนดสไตล์ของเส้นโค้ง (สีเส้น, ความหนาของเส้น)

อธิบาย Path Data (d attribute):

• M x y: Move to (ย้ายไปยังจุดเริ่มต้น)
• L x y: Line to (วาดเส้นตรงไปยังจุด)
• C x1 y1, x2 y2, x y: Cubic Bézier curve (วาดเส้นโค้งแบบ Cubic Bézier)
• Q x1 y1, x y: Quadratic Bézier curve (วาดเส้นโค้งแบบ Quadratic Bézier)
• A rx ry x-axis-rotation large-arc-flag sweep-flag x y: Elliptical Arc (วาดส่วนโค้งของวงรี)
• Z: Close path (ปิด path โดยวาดเส้นตรงกลับไปยังจุดเริ่มต้น)

การใช้ <path> element อาจดูซับซ้อนในตอนแรก แต่เป็นเครื่องมือที่ทรงพลังอย่างมากในการสร้างกราฟิกเวกเตอร์ที่ซับซ้อน

การใช้ Attributes ต่างๆ ของ SVG

นอกจาก attributes ที่เราได้กล่าวถึงไปแล้ว SVG ยังมี attributes อื่นๆ อีกมากมายที่ใช้ในการปรับแต่งรูปลักษณ์และพฤติกรรมของกราฟิกของเรา

• fill-opacity: กำหนดความโปร่งใสของสีพื้น
• stroke-opacity: กำหนดความโปร่งใสของสีเส้นขอบ
• stroke-linecap: กำหนดลักษณะของปลายเส้น (butt, round, square)
• stroke-linejoin: กำหนดลักษณะของการเชื่อมต่อระหว่างเส้น (miter, round, bevel)
• transform: ใช้ในการแปลงรูปทรง (เช่น rotate, translate, scale, skewX, skewY)

ตัวอย่างการใช้ transform attribute:

<svg width="200" height="100">
  <rect width="50" height="50" x="20" y="20" style="fill:red;" transform="rotate(45 45 45)" />
</svg>

ในตัวอย่างนี้ เราหมุนสี่เหลี่ยม 45 องศา โดยมีจุดหมุนอยู่ที่ (45, 45)

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับพื้นฐานของ HTML SVG ซึ่งเป็นเทคโนโลยีที่สำคัญสำหรับการสร้างกราฟิกแบบเวกเตอร์บนเว็บไซต์ เราได้ทำความเข้าใจความแตกต่างระหว่าง Raster Graphics และ Vector Graphics, วิธีการสร้าง SVG element, และวิธีการวาดรูปทรงพื้นฐานต่างๆ รวมถึงการใช้ attributes ต่างๆ ในการปรับแต่งกราฟิกของเรา

ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการใช้ HTML5 Geolocation API เพื่อเข้าถึงข้อมูลตำแหน่งที่ตั้งทางภูมิศาสตร์ของผู้ใช้