พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน SVG Graphic

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

ข้อดีของ SVG

  • ขยายได้ไม่จำกัด: ไม่สูญเสียคุณภาพเมื่อต้องการขยายขนาดภาพ
  • ขนาดไฟล์เล็ก: เพราะเป็นภาพกราฟิกที่ถูกวาดด้วยโค้ด ไม่ใช่ไฟล์รูปภาพที่ต้องเก็บข้อมูลของพิกเซลแต่ละจุด
  • ปรับแต่งได้ง่าย: สามารถเปลี่ยนแปลงสี ขนาด และการวางตำแหน่งของกราฟิกได้ง่ายผ่าน CSS และ JavaScript
  • รองรับแอนิเมชัน: SVG รองรับการสร้างแอนิเมชันผ่าน animate หรือการใช้ JavaScript และ CSS ในการควบคุม

การใช้งาน SVG ใน HTML5

การใช้งานโดยตรงใน HTML เราสามารถใส่โค้ด SVG ลงใน HTML โดยตรงได้

HTML
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
  • <svg> เป็นตัวกำหนดพื้นที่สำหรับกราฟิกเวกเตอร์
  • <circle> เป็นการสร้างวงกลมที่มีตำแหน่งกึ่งกลาง (cx, cy) และรัศมี r นอกจากนี้ยังสามารถกำหนดสีเติม (fill) และสีเส้นขอบ (stroke)

การฝัง SVG ผ่านไฟล์แยก อีกวิธีหนึ่งในการใช้งาน SVG คือการฝังผ่านไฟล์ .svg แยก

HTML
<img src="image.svg" alt="SVG image">

ข้อดีของวิธีนี้คือเราสามารถใช้ไฟล์ภาพ SVG ที่สร้างไว้แล้วในโปรแกรมออกแบบกราฟิก เช่น Adobe Illustrator และนำมาใช้ในเว็บเพจได้ง่าย ๆ

การใช้ SVG เป็น Background Image ใน CSS สามารถใช้ SVG เป็นภาพพื้นหลังได้เช่นกัน

CSS
div {
  width: 200px;
  height: 200px;
  background-image: url('image.svg');
}

การใช้งาน SVG ร่วมกับ CSS เพื่อการตกแต่ง สามารถนำ CSS มาใช้ตกแต่งหรือควบคุม SVG ได้ เช่นการเปลี่ยนสี

CSS
<svg width="100" height="100" class="my-circle">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

<style>
  .my-circle:hover circle {
    fill: green;
  }
</style>

เมื่อเลื่อนเมาส์ไปบนวงกลม สีก็จะเปลี่ยนจากน้ำเงินเป็นเขียว

การใช้งาน SVG ร่วมกับ JavaScript เพื่อการโต้ตอบ SVG สามารถใช้ JavaScript เพื่อการโต้ตอบกับผู้ใช้งานได้

HTML
<svg width="100" height="100" onclick="changeColor(this)">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

<script>
  function changeColor(element) {
    var circle = element.querySelector('circle');
    circle.setAttribute('fill', 'red');
  }
</script>

เมื่อผู้ใช้คลิกที่วงกลม สีของมันจะเปลี่ยนจากน้ำเงินเป็นแดง

การใช้งานแอนิเมชันใน SVG SVG รองรับแอนิเมชันได้โดยไม่ต้องใช้ JavaScript ด้วยการใช้แท็ก <animate>

HTML
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue">
    <animate attributeName="r" from="40" to="20" dur="1s" repeatCount="indefinite" />
  </circle>
</svg>

ในตัวอย่างนี้ วงกลมจะหดและขยายตามรัศมีจาก 40 เป็น 20 ซ้ำ ๆ อย่างต่อเนื่อง

สรุป

SVG เป็นเครื่องมือที่มีความยืดหยุ่นสูงและเหมาะสำหรับการสร้างกราฟิกบนเว็บโดยไม่สูญเสียความคมชัด และสามารถนำไปประยุกต์ใช้ได้หลากหลายรูปแบบ ทั้งการแสดงภาพ การโต้ตอบ และการสร้างแอนิเมชัน

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ