คู่มือ SVG สำหรับนักพัฒนา: กราฟิกแบบ Scalable ที่ใช้งานได้ทุกที่

SVG (Scalable Vector Graphics) เป็นรูปแบบไฟล์ภาพเพียงชนิดเดียวที่เบราว์เซอร์รองรับโดยตรงในรูปแบบ XML ที่มีโครงสร้าง จัดสไตล์ได้ และเขียนสคริปต์ได้ โลโก้ใน SVG จะแสดงผลคมชัดทั้งบนจอแสดงผล 1× จอ 4K และป้ายโฆษณาขนาดใหญ่ — ทั้งหมดจากไฟล์เดียวกัน การทำความเข้าใจ SVG จะช่วยยกระดับทักษะของคุณในฐานะนักพัฒนา frontend

SVG แตกต่างจากรูปแบบอื่นอย่างไร

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

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="14">Hello</text>
</svg>

โค้ดนี้จะแสดงผลเป็นวงกลมสีน้ำเงินพร้อมข้อความ "Hello" — คมชัดทุกขนาด

ควรใช้ SVG เมื่อ:

• โลโก้และไอคอน (ต้องการความคมชัดทุกขนาด)
• ภาพประกอบและไดอะแกรม
• กราฟและการแสดงข้อมูล (D3.js ส่งออกเป็น SVG)
• Animation และกราฟิกแบบโต้ตอบ
• ไอคอน UI (ดีกว่า icon fonts มาก)

ไม่ควรใช้ SVG เมื่อ:

• ภาพถ่ายและภาพที่มีรายละเอียดซับซ้อน (ใช้ JPEG/WebP แทน)
• ภาพ screenshot (ใช้ PNG แทน)
• เมื่อ SVG มี node หลายพันรายการ (จะช้ากว่า Canvas)

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

รูปทรง

<!-- Rectangle -->
<rect x="10" y="10" width="80" height="60" rx="8" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2"/>

<!-- Circle -->
<circle cx="50" cy="50" r="30" fill="#3b82f6"/>

<!-- Ellipse -->
<ellipse cx="50" cy="50" rx="40" ry="20" fill="#10b981"/>

<!-- Line -->
<line x1="0" y1="0" x2="100" y2="100" stroke="#1e293b" stroke-width="2"/>

<!-- Polygon -->
<polygon points="50,10 90,90 10,90" fill="#f59e0b"/>

<!-- Polyline (open shape) -->
<polyline points="10,80 30,20 50,60 70,30 90,70" fill="none" stroke="#ef4444" stroke-width="3"/>

Path — รูปทรงอเนกประสงค์

องค์ประกอบ <path> สามารถอธิบายรูปทรงใดก็ได้ โดยใช้ภาษาย่อยที่ประกอบด้วยคำสั่ง move, line, curve และ arc:

<path d="M 10 80 Q 50 10 90 80" fill="none" stroke="#8b5cf6" stroke-width="3"/>

คำสั่ง Path:

• M x,y — Move to (ยกปากกาขึ้น)
• L x,y — Line to
• H x — เส้นแนวนอน
• V y — เส้นแนวตั้ง
• Q cx,cy x,y — Quadratic bezier curve
• C cx1,cy1 cx2,cy2 x,y — Cubic bezier curve
• A rx,ry rot large-arc sweep x,y — Arc
• Z — ปิด path

โดยปกติคุณไม่จำเป็นต้องเขียน path ด้วยมือ — เครื่องมือออกแบบจะ export ให้ แต่การอ่าน path ได้ช่วยให้ debug และ optimize ได้ง่ายขึ้น

viewBox: ทำให้ SVG ตอบสนองต่อขนาดหน้าจอ

attribute viewBox คือกุญแจสำคัญสู่ SVG แบบ responsive:

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- เนื้อหาวาดในพื้นที่พิกัด 200×100 -->
</svg>

เมื่อไม่กำหนด width/height บน element SVG จะขยายเต็ม container เหมือนภาพ responsive กำหนด width: 100% ใน CSS แล้วมันจะปรับขนาดได้อย่างสมบูรณ์

.logo svg {
  width: 100%;
  height: auto;
}

สามวิธีในการใช้ SVG บนเว็บ

1. ไฟล์ภายนอก (<img>)

<img src="logo.svg" alt="Company logo" width="200" height="80">

✅ ง่าย, ถูก cache, ใช้งานได้ทุกที่
❌ ไม่สามารถจัดสไตล์ด้วย CSS หรือเขียนสคริปต์ได้

2. CSS background

.icon {
  background-image: url('icon.svg');
  background-size: contain;
  width: 24px;
  height: 24px;
}

✅ เหมาะสำหรับไอคอนตกแต่ง
❌ ไม่สามารถจัดสไตล์ภายใน SVG ได้และไม่รองรับ accessibility

3. Inline SVG (ทรงพลังที่สุด)

<button>
  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
    <path d="M5 4l7 6-7 6" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  Next
</button>

✅ ควบคุม CSS ได้เต็มที่, เขียนสคริปต์ได้, ใช้ currentColor เพื่อรับสีข้อความ
❌ ไม่ถูก cache, เพิ่มขนาด HTML

สำหรับไอคอนใน UI component inline SVG คือตัวเลือกที่ดีที่สุด Sprite sheets (SVG เดี่ยวที่มี element <symbol> และอ้างอิงผ่าน <use>) ช่วยให้คุณได้ทั้งการ cache และความสามารถในการจัดสไตล์

การจัดสไตล์ SVG ด้วย CSS

Inline SVG ตอบสนองต่อ CSS เหมือน HTML element ทั่วไป:

.icon {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* ควบคุม currentColor */
}

.icon:hover {
  color: #1d4ed8;
}

ใน SVG ให้ใช้ currentColor แทนการกำหนดสีตรงๆ:

<path fill="currentColor" d="..."/>
<path stroke="currentColor" d="..."/>

ตอนนี้สีของไอคอนจะถูกควบคุมโดย CSS ทั้งหมด — dark mode, hover states และ theming จะทำงานได้เลย

CSS animations บน SVG

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

<svg viewBox="0 0 24 24">
  <circle class="spinner" cx="12" cy="12" r="10"
    fill="none" stroke="#3b82f6" stroke-width="2"
    stroke-dasharray="31.4" stroke-dashoffset="10"/>
</svg>

stroke-dasharray และ stroke-dashoffset เป็น animation properties ที่ทรงพลังที่สุดของ SVG — ช่วยให้สร้าง animation การวาดที่ path ดูเหมือนวาดตัวเองได้

การปรับแต่งไฟล์ SVG

เครื่องมือออกแบบ export SVG พร้อม metadata ที่ไม่จำเป็น, comment และ ID ของโปรแกรม SVG ที่ export มาอาจมีขนาด 15 KB แต่หลังจาก optimize อาจเหลือเพียง 3 KB

สิ่งที่ควรลบออก:

• การประกาศ <?xml version="1.0"?> (ไม่จำเป็นเมื่อใช้แบบ inline)
• xmlns:xlink, xmlns:dc, namespace metadata ของ Adobe/Inkscape
• attribute id ที่โปรแกรม editor ใช้เท่านั้น
• Comment และ whitespace
• element กลุ่มที่ซ้ำซ้อน <g>
• ค่า attribute ที่เป็นค่าเริ่มต้น (fill="black", opacity="1")

เครื่องมืออย่าง SVGO ช่วยทำสิ่งเหล่านี้โดยอัตโนมัติ เมื่อต้องการเวอร์ชัน raster สำหรับแพลตฟอร์มที่ไม่รองรับ SVG สามารถแปลงเป็น PNG ได้ด้วย SVG to PNG converter ของเรา

Accessibility

SVG ที่ใช้เป็นเนื้อหาสำคัญต้องมีคำอธิบายที่เข้าถึงได้:

<svg role="img" aria-labelledby="title desc">
  <title id="title">Revenue chart</title>
  <desc id="desc">Bar chart showing monthly revenue growing from $10k in January to $45k in June 2026</desc>
  <!-- chart content -->
</svg>

SVG ที่ใช้เป็นลวดลายตกแต่ง (ไอคอนข้างปุ่มที่มีป้ายกำกับ) ควรซ่อนจาก screen reader:

<svg aria-hidden="true" focusable="false">...</svg>

Quick reference: attribute ที่ใช้บ่อยใน SVG

Attribute	หน้าที่
viewBox="x y w h"	กำหนดระบบพิกัด
fill	สีเติมรูปทรง (none, hex, currentColor)
stroke	สีเส้นขอบ
stroke-width	ความหนาของเส้นขอบ
stroke-linecap	สไตล์ปลายเส้น: butt, round, square
stroke-linejoin	สไตล์มุมเส้น: miter, round, bevel
opacity	ความโปร่งใสของ element (0–1)
transform	translate(), rotate(), scale(), skew()
clip-path	Mask เนื้อหาให้อยู่ในรูปทรง
filter	ใช้ SVG filter (blur, drop-shadow ฯลฯ)

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