SVG trong trang HTML

Tệp SVG có thể được chèn vào tài liệu HTML bằng các thẻ sau: <embed>, <object> hoặc <iframe>.

SVG trong trang HTML

Dưới đây, bạn sẽ thấy ba phương pháp khác nhau để chèn tệp SVG vào trang HTML.

Sử dụng thẻ <embed>

Thẻ <embed> được tất cả các trình duyệt phổ biến hỗ trợ và cho phép sử dụng script.

Chú ý:Khi chèn SVG vào trang HTML sử dụng thẻ <embed> là phương pháp được Adobe SVG Viewer khuyến nghị! Tuy nhiên, nếu cần tạo XHTML hợp lệ, bạn không thể sử dụng <embed>. Không có thẻ <embed> nào trong bất kỳ tiêu chuẩn HTML nào.

Cú pháp:

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

Chú ý:Thuộc tính pluginspage chỉ đến URL tải xuống plugin.

Sử dụng thẻ <object>

Thẻ <object> là thẻ tiêu chuẩn của HTML 4, được tất cả các trình duyệt mới hơn hỗ trợ. Nhược điểm của nó là không cho phép sử dụng script.

Chú ý:Nếu bạn đã cài đặt phiên bản mới nhất của Adobe SVG Viewer, thì khi sử dụng thẻ <object> tệp SVG không thể hoạt động (tối thiểu là không thể hoạt động trong IE)!

Cú pháp:

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Chú ý:Thuộc tính codebase chỉ đường dẫn tải xuống plugin.

Sử dụng thẻ <iframe>

Thẻ <iframe> hoạt động trên hầu hết các trình duyệt.

Cú pháp:

<iframe src="rect.svg" width="300" height="100">
</iframe>

Tôi mong đợi...

Nếu chỉ cần tham chiếu không gian tên SVG để thêm các yếu tố SVG vào mã HTML, thì đó sẽ rất tuyệt vời, giống như thế này:

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>