Cách tốt nhất để Đặt SVG Content Trong HTML

Question

Từ nghiên cứu của tôi, tôi hiểu có ba cách để đặt một file svg bên trong HTML:

sử dụng nhúng:

<embed src="plot1.svg" width="500" height="320" type="image/svg+xml" /> 

sử dụng đối tượng:

<object data="plot1.svg" width="500" height="320" type="image/svg+xml" /> 

sử dụng iframe:

<iframe src="plot1.svg" width="500" height="320"> </iframe> 

tôi đã thử nghiệm với cả ba trên một giàn khoan thử nghiệm (django built-in máy chủ dev, rendering các trang trong Firefox 3.6). Dưới môi trường rõ ràng vô trùng này, tôi đã không nhận thấy bất kỳ sự khác biệt nào giữa hiệu năng hoặc độ phân giải ba - w/r/t.

Câu hỏi của tôi là liệu một trong số này có tốt hơn hai loại kia hay không và nếu có, cái nào. Tất nhiên, câu trả lời có thể phụ thuộc vào những sự kiện có liên quan:

Chúng tôi thường xuyên hiển thị dữ liệu (ví dụ: chuỗi thời gian) trên trang web của chúng tôi, thường được tạo ra để phản hồi lại hành động của người dùng; dựa trên hành động của người dùng đó, một cuộc gọi được thực hiện tới một cơ sở dữ liệu, dữ liệu được trả về được crunched và gửi đến công cụ vẽ đồ họa, làm cho hình ảnh tĩnh sau đó được nhúng vào trang - những thứ rất chuẩn.

Điều này làm việc tốt, nhưng tôi muốn thêm một số tính năng tương tác vào các biểu đồ này (ví dụ: chú giải công cụ, nhãn trục siêu liên kết, đánh dấu một nhóm điểm w/trong ô). Một số biểu đồ khá phức tạp (ví dụ: điều chỉnh nhiều bảng) và tôi chưa tìm thấy thư viện biểu đồ javascript bao gồm các tính năng này. Cuối cùng tôi đã quyết định sử dụng cùng một thư viện vẽ (Lattice in R) nhưng vẽ từng biểu đồ trong svg và sau đó thêm các tính năng tương tác người dùng trong bước hậu xử lý, bao gồm các hàm javascript thao tác trực tiếp XML.

Answer 1

<embed> Tôi thường tránh. Nó không được chấp nhận trong HTML4, không cho phép nội dung dự phòng phù hợp và đã có một số vấn đề trong IE.

<object> sẽ cho phép bạn bao gồm nội dung HTML dự phòng cho các trình duyệt không có hỗ trợ SVG. sẽ quay trở lại để nhắc bạn tải xuống tệp .svg. Điều nào tốt nhất có thể phụ thuộc vào ứng dụng.

Cách thay thế khác, cho các trình duyệt hiện đại (bao gồm IE từ phiên bản 9) là để phục vụ trang web của bạn dưới dạng application/xhtml+html và bao gồm các phần tử SVG trong chính trang đó.

Answer 2

cho tôi cách tốt nhất là này nguồn

<svg id="circle" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > 
    <image x="0" y="0" height="60" width="60" xlink:href="huge-red-circle.svg" /> 
</svg> 

You can see the example here

: http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial