SVG: มันคืออะไร แนวคิดสำคัญ และการใช้งานในการพัฒนาเว็บ

SVG คืออะไร?

SVG คือรูปแบบกราฟิกเวกเตอร์บนพื้นฐาน XML ที่เปิดตัวในปี 2001 โดยเป็นคำแนะนำของ W3C ต่างจากรูปแบบราสเตอร์ SVG อธิบายภาพผ่านพื้นฐานทางเรขาคณิต: จุด เส้น เส้นโค้ง และรูปหลายเหลี่ยม ไฟล์ SVG คือเอกสาร XML ข้อความธรรมดาที่สามารถอ่าน แก้ไข และบีบอัดด้วยเครื่องมือมาตรฐาน

สถาปัตยกรรม SVG ประกอบด้วยแนวคิดสำคัญหลายประการ viewBox กำหนดระบบพิกัดเสมือนที่ไม่ขึ้นกับขนาดจริงขององค์ประกอบ ตัวอย่างเช่น viewBox="0 0 100 100" สร้างกริดตาราง 100×100 ซึ่งภายในพิกัดทั้งหมดคงที่ เมื่อความกว้างหรือความสูงของคอนเทนเนอร์เปลี่ยน เนื้อหาจะปรับขนาดตามสัดส่วน

ตามข้อมูล W3C SVG 2 Specification SVG รุ่นทันสมัยรองรับการไล่สี มาสก์ ตัวกรอง ข้อความในตำแหน่งที่กำหนดได้ การโต้ตอบผ่าน JavaScript และแอนิเมชันผ่าน CSS และ SMIL SVG ถูกรวมเข้ากับ DOM เป็นองค์ประกอบ HTML เต็มรูปแบบ ทำให้สามารถควบคุมโปรแกรมบนพื้นฐานกราฟิกทุกตัว

ในการพัฒนามือถือ SVG ยังใช้ใน iOS ผ่าน UIGraphicsImageRenderer และใน Android ผ่าน VectorDrawable — ทั้งสองรูปแบบแปลงคำอธิบายคล้าย SVG เป็นราสเตอร์ที่เร่งด้วยฮาร์ดแวร์บน GPU

ประวัติและวิวัฒนาการของรูปแบบ SVG

SVG 1.0 กลายเป็นคำแนะนำ W3C ในปี 2001 SVG 1.1 ในปี 2003 และ SVG 2.0 อยู่ระหว่างการพัฒนาตั้งแต่ปี 2012 นวัตกรรมหลักของ SVG 2 คือการรวม CSS ที่ลึกขึ้น การรองรับโหมดการประกอบและการผสมผสาน และความสามารถในการใช้ SVG ใน HTML โดยไม่ต้องใช้คำนำหน้า namespace

แม้ว่า SVG 2 ยังไม่ถึงสถานะคำแนะนำ แต่เบราว์เซอร์สมัยใหม่ก็รองรับฟังก์ชันการทำงานส่วนใหญ่แล้ว Chrome, Safari, Firefox และ Edge รองรับ SVG 1.1 เกือบสมบูรณ์และส่วนสำคัญของ SVG 2

องค์ประกอบ SVG พื้นฐาน

SVG จัดเตรียมชุดองค์ประกอบสำหรับอธิบายกราฟิกสองมิติ แต่ละองค์ประกอบมีแอตทริบิวต์ที่กำหนดตำแหน่ง ขนาด และลักษณะที่มองเห็น แอตทริบิวต์สามารถตั้งเป็นแอตทริบิวต์ xml หรือผ่านคุณสมบัติ CSS

• <rect> — สี่เหลี่ยมผืนผ้ากับแอตทริบิวต์ x, y, width, height, rx, ry (มุมกลม)
• <circle> — วงกลมกับแอตทริบิวต์ cx, cy (ศูนย์กลาง) และ r (รัศมี)
• <ellipse> — วงรีกับแอตทริบิวต์ cx, cy, rx, ry
• <line> — ส่วนเส้นตรงกับแอตทริบิวต์ x1, y1, x2, y2
• <polyline> — เส้นหักกับแอตทริบิวต์ points (รายการพิกัด)
• <polygon> — รูปหลายเหลี่ยมปิดกับแอตทริบิวต์ points
• <path> — เส้นทางต่างๆ กับแอตทริบิวต์ d (คำสั่ง: M, L, C, Q, A, Z)
• <text> — องค์ประกอบข้อความกับแอตทริบิวต์ x, y, font-size, font-family

องค์ประกอบ path เป็นองค์ประกอบ SVG ที่ทรงพลังและยืดหยุ่นที่สุด แอตทริบิวต์ d ประกอบด้วยลำดับคำสั่ง: M (moveTo), L (lineTo), C (เส้นโค้งเบซิเอร์กำลังสาม), Q (เส้นโค้งเบซิเอร์กำลังสอง), A (ส่วนโค้ง), Z (ปิดเส้นทาง) แต่ละคำสั่งมีรูปแบบสัมบูรณ์หรือสัมพัทธ์ (ตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็ก)

SVG ยังรองรับการจัดกลุ่มองค์ประกอบผ่าน <g> กลุ่มสืบทอดแอตทริบิวต์ที่มองเห็น (fill, stroke, transform) ไปยังองค์ประกอบลูกทั้งหมด ซึ่งทำให้สามารถใช้รูปแบบเดียวกับชุดรูปทรงทั้งหมดและควบคุมตำแหน่งผ่าน transform เดียว

SVG เทียบกับกราฟิกราสเตอร์: เปรียบเทียบรูปแบบ

ความแตกต่างหลักระหว่าง SVG และรูปแบบราสเตอร์ (JPEG, PNG, WebP) คือวิธีการจัดเก็บข้อมูล ราสเตอร์เก็บสีของแต่ละพิกเซลในกริดขนาดคงที่ SVG เก็บคำสั่งทางคณิตศาสตร์สำหรับการสร้างรูปทรง ความแตกต่างนี้กำหนดข้อดีและข้อเสียทั้งหมดของรูปแบบ

ตามข้อมูล HTTP Archive, 2025 68% ของเว็บไซต์ใช้ SVG สำหรับไอคอน 34% สำหรับภาพประกอบ และ 22% สำหรับโลโก้ ขนาดเฉลี่ยของไอคอน SVG คือ 0.5–2 KB ในขณะที่ไอคอนราสเตอร์คุณภาพใกล้เคียงคือ 5–20 KB ในรูปแบบ PNG

SVG ไม่เหมาะสมสำหรับภาพถ่ายและภาพราสเตอร์ที่ซับซ้อน — ขนาดของคำอธิบาย XML จะเกิน JPEG ที่เทียบเท่า การใช้งานที่แนะนำสำหรับ SVG: ไอคอน โลโก้ ภาพประกอบ แผนภาพ กราฟ องค์ประกอบอินเทอร์เฟสที่มีการออกแบบปรับตัว

เมื่อใดควรเลือก SVG และเมื่อใดควรเลือกรูปแบบราสเตอร์

SVG เป็นตัวเลือกที่เหมาะสมที่สุดสำหรับองค์ประกอบอินเทอร์เฟสที่ต้องแสดงชัดเจนบนจอ Retina และทุกระดับการซูมของเบราว์เซอร์ ราสเตอร์สำหรับภาพถ่าย พื้นผิวที่ซับซ้อน และภาพที่มีสีหลายล้านสี ซึ่งคำอธิบายแบบเวกเตอร์จะซับซ้อนเกินจำเป็น

วิธีแบบผสม — การรวม SVG สำหรับองค์ประกอบอินเทอร์เฟสและ WebP/AVIF สำหรับเนื้อหาภาพถ่าย — ให้สมดุลที่ดีที่สุดระหว่างคุณภาพและประสิทธิภาพการโหลดหน้า

Inline SVG และการกำหนดรูปแบบ CSS

Inline SVG คือการฝังมาร์กอัป SVG โดยตรงในเอกสาร HTML แทนที่จะเป็นไฟล์แยกต่างหากผ่าน <img> หรือ background-image ข้อดีของ inline SVG คือองค์ประกอบ SVG กลายเป็นส่วนหนึ่งของ DOM และสามารถกำหนดรูปแบบผ่าน CSS ควบคุมผ่าน JavaScript และสร้างแอนิเมชันได้โดยไม่ต้องใช้คำขอเพิ่มเติมไปยังเซิร์ฟเวอร์

ต่างจาก <img src="icon.svg"> ที่ SVG ถูกแยกใน shadow DOM inline SVG สืบทอดสีและแบบอักษรจากเอกสารแม่ ซึ่งทำให้สามารถเปลี่ยนสีไอคอนเมื่อวางเมาส์ผ่าน CSS pseudo-class :hover โดยไม่ต้องโหลดไฟล์แยกสำหรับแต่ละสถานะ

ตามข้อมูล CSS-Tricks inline SVG เป็นวิธีที่แนะนำสำหรับการใช้ไอคอนในเว็บแอปพลิเคชันสมัยใหม่ คุณสมบัติ CSS fill, stroke, stroke-width ใช้กับองค์ประกอบ SVG โดยตรง สำหรับการปรับแต่งผ่าน CSS สิ่งสำคัญคือ SVG ต้นฉบับไม่มี fill และ stroke ที่ตั้งเป็น inline แอตทริบิวต์ — มิฉะนั้น CSS จะไม่สามารถแทนที่ได้

• ข้อดี: การกำหนดรูปแบบผ่าน CSS, การควบคุมผ่าน JS, ไม่ต้องใช้คำขอ HTTP, การปรับตัวของ viewBox
• ข้อเสีย: ขนาดหน้า HTML เพิ่มขึ้น, ไม่สามารถแคชแยกจาก HTML
• ทางเลือก: SVG sprite — รวม SVG หลายอันไว้ในไฟล์เดียว และใช้ <use href="#id">

SVG sprite แก้ปัญหาการแคช: ไอคอนทั้งหมดถูกรวบรวมในไฟล์เดียว เบราว์เซอร์โหลดไฟล์นั้นครั้งเดียว และไอคอนแต่ละตัวถูกเข้าถึงผ่าน <use> โดยระบุ id ขององค์ประกอบที่ต้องการภายใน sprite

แอนิเมชัน SVG: CSS และ SMIL

แอนิเมชัน SVG ด้วย CSS เป็นวิธีที่พบบ่อยที่สุดและมีประสิทธิภาพที่สุดในการสร้างแอนิเมชันกราฟิกเวกเตอร์ในเบราว์เซอร์ คุณสมบัติ CSS เช่น transform, opacity และ fill ใช้กับองค์ประกอบ SVG เช่นเดียวกับองค์ประกอบ HTML สำหรับแอนิเมชันตามเส้นทางที่กำหนดได้ ใช้คุณสมบัติ CSS offset-path

SMIL (Synchronized Multimedia Integration Language) เป็นกลไกแอนิเมชันในตัว SVG ที่ไม่ขึ้นกับ CSS องค์ประกอบ <animate>, <animateTransform> และ <animateMotion> ช่วยให้สามารถสร้างแอนิเมชันกับแอตทริบิวต์ SVG ใดๆ โดยไม่ต้องใช้ JavaScript หรือ CSS แอนิเมชัน SMIL รับประกันว่าจะซิงโครไนซ์กับอัตราเฟรมของเบราว์เซอร์

ตามข้อมูล MDN Web Docs SMIL รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด แต่แอนิเมชัน CSS ถือว่าคาดเดาได้และมีประสิทธิภาพมากกว่า กรณีใช้งานหลักของ SMIL คือการสร้างแอนิเมชันกับแอตทริบิวต์ที่ไม่สามารถเข้าถึงได้ผ่าน CSS เช่น d (path) ขององค์ประกอบ <path>

JavaScript + requestAnimationFrame ให้การควบคุมแอนิเมชัน SVG สูงสุด นักพัฒนาเว็บใช้ไลบรารีอย่าง GSAP และ Anime.js สำหรับลำดับแอนิเมชันที่ซับซ้อนด้วยไทม์ไลน์และฟังก์ชัน easing ที่ยากต่อการ implement ด้วย CSS บริสุทธิ์

ตัวอย่างโค้ด: การสร้างกราฟิก SVG

ตัวอย่างแรกคือไอคอนบ้านง่ายๆ โดยใช้องค์ประกอบ SVG พื้นฐาน รูปทรงทั้งหมดคือ rect และ polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

ตัวอย่างที่สองแสดงแอนิเมชันโหลดเดอร์หมุนผ่าน CSS ใช้ <circle> กับแอตทริบิวต์ stroke-dasharray เพื่อสร้างเส้นโครงแบบประ:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

ตัวอย่างที่สามใช้ไลบรารี GSAP เพื่อสร้างแอนิเมชันเส้นทางสำหรับการวาดเส้นโครงที่เรียบเนียน GSAP ทำงานกับแอตทริบิวต์ stroke-dashoffset สร้างเอฟเฟกต์เส้นปรากฏขึ้น:

// วาดเส้นทางด้วย GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});