Làm thế nào để đặt đồ họa SVG trên trang web của bạn

SVG hoặc Scalable Vector Graphics cho phép bạn vẽ nhiều hình ảnh phức tạp hơn và hiển thị chúng trên các trang web. Nhưng bạn không thể đơn giản lấy thẻ SVG và tát chúng vào HTML của bạn. Chúng sẽ không hiển thị và trang của bạn sẽ không hợp lệ. Thay vào đó, bạn phải sử dụng một trong ba phương pháp.

Sử dụng Thẻ đối tượng để nhúng SVG

Thẻ HTML sẽ nhúng hình ảnh SVG vào trang web của bạn. Bạn viết thẻ đối tượng với một thuộc tính dữ liệu để xác định tệp SVG mà bạn muốn mở. Bạn cũng nên bao gồm các thuộc tính chiều rộng và chiều cao để xác định chiều rộng và chiều cao của hình ảnh SVG của bạn (tính bằng pixel).

Đối với khả năng tương thích giữa các trình duyệt, bạn nên bao gồm thuộc tính type, nên đọc:

loại = "hình ảnh / svg + xml"

và một codebase cho các trình duyệt không hỗ trợ nó (Internet Explorer 8 trở xuống). Codebase của bạn sẽ trỏ tới một plugin SVG cho các trình duyệt không hỗ trợ SVG. Plugin được sử dụng phổ biến nhất là từ Adobe tại http://www.adobe.com/svg/viewer/install/. Tuy nhiên, plugin này không còn được Adobe hỗ trợ. Một tùy chọn khác là plugin SVS Ssrc từ Savarese Software Research tại http://www.savarese.com/software/svgplugin/.

Đối tượng của bạn sẽ trông như thế này:

Mẹo sử dụng đối tượng cho SVG

  • Đảm bảo rằng chiều rộng và chiều cao ít nhất là lớn như hình ảnh bạn đang nhúng. Nếu không, hình ảnh của bạn có thể bị cắt bớt.
  • SVG của bạn có thể không hiển thị chính xác nếu bạn không bao gồm loại nội dung chính xác (type = "image / svg + xml"), vì vậy tôi không khuyên bạn nên loại bỏ nó.
  • Bạn có thể bao gồm thông tin dự phòng bên trong thẻ đối tượng cho các trình duyệt không hiển thị tệp SVG.
  • Bạn cũng có thể thiết lập nguồn của SVG của bạn và kiểu nội dung trong các tham số. Điều này có thể hoạt động tốt hơn trong IE 6 và 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Lưu ý rằng điều này đòi hỏi một classid để làm cho nó hoạt động.

Xem SVG trong ví dụ về thẻ đối tượng.

Nhúng SVG bằng Thẻ Nhúng

Một tùy chọn khác mà bạn có để bao gồm SVG là sử dụng thẻ. Bạn sử dụng gần như các thuộc tính giống như thẻ đối tượng, bao gồm chiều rộng <, height, type và codebase>. Sự khác biệt duy nhất là thay vì dữ liệu, bạn đặt URL tài liệu SVG của bạn trong thuộc tính src.

Nhúng của bạn sẽ trông như thế này:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "hình ảnh / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>

Mẹo sử dụng Nhúng cho SVG

  • Thẻ nhúng không phải là HTML4 hợp lệ, nhưng nó là HTML5 hợp lệ, vì vậy nếu bạn sử dụng nó trong trang HTML4, bạn nên nhớ rằng trang của bạn sẽ không xác thực.
  • Sử dụng tên miền hoàn toàn đủ tiêu chuẩn trong thuộc tính src để có khả năng tương thích tốt nhất.
  • Ngoài ra còn có một số báo cáo rằng việc sử dụng thẻ nhúng với plugin Adobe sẽ làm hỏng phiên bản Mozilla 1.0 đến 1.4.

Xem SVG trong ví dụ về thẻ nhúng.

Sử dụng khung nội tuyến để bao gồm SVG

Iframe là một cách dễ dàng khác để bao gồm hình ảnh SVG trên các trang web của bạn. Nó chỉ yêu cầu ba thuộc tính: width và height như thường lệ, và src trỏ đến vị trí của tệp SVG của bạn.

Khung nội tuyến của bạn sẽ trông như sau: