Có thể bạn đã biết nhiều cách khác nhau để nhúng SVG vào HTML, nhưng với các bản cập nhật công nghệ và trình duyệt mới nhất, chúng ta vẫn cần thẻ Điều này chủ yếu là do hình ảnh có thẻ Nhúng phông chữ chỉ là vấn đề kéo và thả và mang lại chất lượng ấn tượng mà không làm giảm kích thước tệp Hình ảnh SVG được nhúng với các thẻ Vấn đề duy nhất là tải kép, nghĩa là trình duyệt sẽ tải hình ảnh trên thẻ Đối với nhúng hay chúng ta có thể sử dụng
Hỗ trợ trình duyệtThẻ Mất phông chữ khi sử dụng SVG với thẻ img
Không mất phông nếu nhúng
khả năng bảo trì
tải đôi
và một hình ảnh khác trên thẻ
3
3, việc bảo trì rất phức tạp. Vì mọi thứ đều là nội tuyến nên bạn cần đảm bảo tất cả các ID và lớp là duy nhất, nếu không, nếu một hình ảnh tham chiếu đến một thành phần sử dụng, một dải màu hoặc một bộ lọc có các ID trùng lặp, thì bạn sẽ gặp sự cố khi kết xuất
4. Sử dụng thẻ
5
Liệt kê ở đây cho đầy đủ, nhưng KHÔNG sử dụng thẻ
5. Nó không phải là một phần của thông số kỹ thuật HTML nhưng được hỗ trợ rộng rãi trên tất cả các trình duyệt chủ yếu được sử dụng để triển khai các plugin Flash
5. Sử dụng thẻ
7
KHÔNG sử dụng
7 nơi bạn có thể sử dụng thẻ
để thay thế. Iframe khó duy trì, không được lập chỉ mục bởi các công cụ tìm kiếm và không tốt cho SEO [Tối ưu hóa Công cụ Tìm kiếm]
6. Sử dụng hình nền CSS
Điều này tương đương với việc sử dụng thẻ và có cùng ưu điểm và nhược điểm
#id {
background-image: url[image.svg];
}
so sánh
Inline SVGBrowser supportGoodGoodGoodAlt and title attributeYesNoneTitle onlyBrowser cachingYesYesNoneGZip / Brotli compressionYesYesNoneInteractivityNoneYesVery goodSearch engine indexingYesThrough fallbackNoneWorkflowStreamlinedMediumConvolutedLoading speedFastSlowerVery fastMaintenanceEasyEasyDifficultPhần kết luận
Như có thể thấy từ so sánh, rõ ràng là chúng tôi đang đề xuất thẻ cho hầu hết các trường hợp sử dụng. Ngoại lệ duy nhất là nếu bạn cần tính tương tác, khi bạn yêu cầu các thay đổi động đối với SVG của mình dựa trên tương tác của người dùng
Chúng tôi không khuyến nghị SVG nội tuyến trong hầu hết các trường hợp, với ngoại lệ duy nhất là các trang tải trước. Các trang tải trước là nội dung được hiển thị khi ứng dụng của bạn chưa tải hoàn toàn và vì SVG nội tuyến hiển thị gần như ngay lập tức nên nó có thể được sử dụng để hiển thị hình ảnh hoặc đồ họa trong khi chờ ứng dụng của bạn tải