home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธาใช้ภาพ SVG ใน HTML5

บทนำ

มีหลายวิธีใช้ SVG ใน HTML5 เลือกตามความเหมาะสม

วิธีที่ 1: Inline SVG (แนะนำมากที่สุด)

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

✅ จัดสไตล์ด้วย CSS ได้ ✅ จับ Event ได้ ✅ Accessibility ดี ✅ ไม่ต้อง Request เพิ่ม

วิธีที่ 2: <img> Tag

<img src="icon.svg" alt="Icon" width="100" height="100">

✅ เรียบง่าย ✅ Cache ได้ ❌ ไม่จัดสไตล์ CSS ใส่ได้ ❌ ไม่จับ Event ได้

วิธีที่ 3: CSS Background

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

✅ สำหรับ Decorative ❌ ไม่ Semantic ❌ ไม่ Accessible

วิธีที่ 4: <object> / <embed>

<object type="image/svg+xml" data="icon.svg">Fallback</object>
<embed type="image/svg+xml" src="icon.svg" />

✅ มี Fallback ❌ ซับซ้อนกว่า

ตัวอย่าง <img> กับ SVG ภายนอก

<!DOCTYPE html>
<html>
  <head>
    <style>
      #svgelem { position: relative; left: 50%; transform: translateX(-20%); }
    </style>
    <title>HTML5 SVG Image</title>
  </head>
  <body>
    <h2 align="center">HTML5 SVG Image</h2>
    <img src="https://example.com/smiley.svg" alt="smile" height="100px" width="100px" />
  </body>
</html>

แนวทางเลือก

  • Icon/UI Component → Inline SVG หรือ SVG Sprite
  • Illustration/Logo → <img>
  • Background → CSS Background