SVG trong trang web

SVG có thể tồn tại như một tệp độc lập. Tuy nhiên, điều chúng ta mong muốn hơn là tích hợp SVG vào một tài liệu lớn hơn, như HTML.

Có một số cách để chèn SVG vào HTML:

  • Tích hợp SVG như một hình ảnh
  • Tích hợp SVG trong iframe
  • Tích hợp SVG thông qua标签 object
  • Tích hợp SVGinline

Tích hợp SVG như một hình ảnh

Phương pháp này có thể là cách dễ nhất để đưa SVG vào HTML. Bạn chỉ cần thêm tệp .svg vào một标签 thông thường.

<img src="diagram.svg" alt="Ví dụ SVG">

Bạn cần đảm bảo server của bạn hỗ trợ tệp .svg. Mặc dù hầu hết các server đều hỗ trợ, nhưng vẫn nên kiểm tra lại. Bạn cũng có thể sử dụng .svg như một background-image trong CSS.

Lưu ý thêm một hình ảnh .png để đảm bảo tương thích với các trình duyệt không hỗ trợ SVG.

.svg-bg { 
    background: url("fallback.png"); /* fallback */
    background-image: url("diagram.svg"); 
}

Nhược điểm:

Khi SVG được tích hợp như một hình ảnh,

  • Nhiều trình duyệt sẽ không tải các tệp được SVG tham chiếu (như ảnh khác, script外部, font file, v.v.)
  • Các script được định nghĩa trong SVG có thể không được thực thi tùy thuộc vào chính sách an ninh của trình duyệt

Tích hợp SVG thông qua标签 object hoặc iframe

Tương tự như việc tích hợp SVG như một hình ảnh, bạn có thể đưa SVG vào thông qua标签 bằng cách sử dụng thuộc tính data để liên kết đến tệp .svg. MIME type cần được đặt là image/svg+xml. Ví dụ:

<object type="image/svg+xml" data="diagram.svg" class="svg-container">
 Ví dụ SVG
</object>

Hoặc bạn có thểembed SVG vào một iframe:

<iframe src="diagram.svg" class="svg-container"></iframe>

Hai phương pháp trên đều cho phép bạn điều khiển phong cách hiển thị của SVG thông qua CSS, như:

.svg-container { 
    display: block; 
    margin: 20px auto; 
    border-radius: 5px; 
}

Tích hợp SVGinline

Bạn không cần phải lưu SVG trong một tệp độc lập. Thay vào đó, bạn có thể embed SVG trực tiếp vào HTML.

<html>
  <body>
    <svg>
      <!-- Nội dung SVG -->
    </svg>
  </body>
</html>

Khi embed SVGinline, nó sẽ kế thừa các phong cách từ tài liệu cha và hiển thị theo cách mặc định.

Tóm tắt:

SVG không khó để sử dụng. Đặc biệt, cách đơn giản nhất là tạo một hình ảnh trong ứng dụng vẽ vector, xuất nó thành một tệp .svg, sau đó chèn vào HTML thông qua các标签 như , , hoặc . Bạn cũng có thể đưa SVG vào CSS làm background-image.

Thẻ: SVG HTML css Inline SVG

Đăng vào ngày 3 tháng 7 lúc 23:44

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn