Có tương đương với spriting cho hình ảnh SVG trong các trang web không?

Question

Hình ảnh SVG không phải là ảnh bitmap, vì vậy (trừ khi tôi bỏ lỡ điều gì đó), bạn không thể làm như bạn có thể làm với các tệp hình ảnh khác được sử dụng trên các trang web (xem http://www.alistapart.com/articles/sprites).

Nhưng có cơ chế tương đương để chỉ hiển thị một phần của hình ảnh SVG dưới dạng nền CSS không?

Ví dụ: Cú pháp tưởng tượng:

div.my-special-svg-div { 
    background-image: url(sprite-image.svg#one-shape-in-the-svg-file); 
} 

Answer 1

Bạn có thể sử dụng các kỹ thuật CSS sprite truyền thống để chia nhỏ hình ảnh SVG với vị trí nền, here's a quick example, mặc dù nó hơi khó hiểu nếu bạn cũng bắt đầu sử dụng kích thước nền. Đây có thể là dễ dàng hơn nếu bạn xác định một kích thước trên hình ảnh SVG của bạn:

<svg version="1.1" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    width="320" 
    height="240" 
    viewBox="0 0 320 240"> 

Answer 2

Một cách tiếp cận mà tôi đã cố gắng không tạo hình ảnh SVG trực tiếp trong tệp CSS, sử dụng URI dữ liệu.

Ví dụ:

background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Crect%20fill%3D%22%23CCD%22%20%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%0A%20%20%3Crect%20fill%3D%22%23039%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20rx%3D%221em%22%2F%3E%0A%3C%2Fsvg%3E); 

(Xem http://intertwingly.net/blog/2008/09/07/SVG-via-CSS)

Vì vậy, tất cả hình ảnh SVG của bạn kết thúc trong file CSS. Gzipping nên squish nhiều tập tin SVG trong một tập tin CSS khá độc đáo. Theo như tôi có thể nói, CSS ở trên hoạt động trong Opera 9.5+, IE 9 beta, Safari 5 và Chrome 6. Dường như không hoạt động trong Firefox kể từ 3.6, hoặc phiên bản cũ hơn của các trình duyệt khác .

Answer 3

SVG thậm chí không được hỗ trợ kỹ thuật theo tiêu chuẩn W3C. Nó thậm chí sẽ không hoạt động trong IE mà không cần plugin. Có lẽ bạn sẽ tìm thấy một số plugin Mozilla tối nghĩa cho phép bạn làm điều đó nhưng theo như tôi biết mã của bạn sẽ không xác nhận.

Answer 4

Bạn có thể sử dụng SVG Stacks:

http://simurai.com/post/20251013889/svg-stacks