Cách sử dụng hình ảnh SVG trong HTML5

Để dùng SVG trong HTML5, có 3 cách chính:

1. Inline SVG: Viết thẻ <svg> trực tiếp trong HTML (tuyển chỉnh style/script dễ dàng).
2. <img src="file.svg">: Nhúng như hình ảnh thường (cache tốt, không truy cập DOM bên trong SVG).
3. <object data="file.svg" type="image/svg+xml">: Nhúng như tài liệu, cho phép truy cập DOM SVG từ JS cha, có fallback.

<embed> cũng được nhưng ít dùng hơn <object>.

Ví dụ: Dùng <img> cho file 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://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg" alt="smile" height="100px" width="100px" />
  </body>
</html>

Chọn cách nào? Icon/UI đơn giản → <img>. Cần thao tác DOM/CSS bên trong SVG → Inline hoặc <object>.