Существует ли эквивалент спрайта для изображений SVG на веб-страницах? - PullRequest
Новая
       32

Существует ли эквивалент спрайта для изображений SVG на веб-страницах?

9 голосов
/ 28 октября 2010

SVG-изображения не являются растровыми изображениями, поэтому (если я что-то не упустил) вы не можете делать спрайты, как вы можете с другими файлами изображений, используемыми на веб-страницах (см. http://www.alistapart.com/articles/sprites).

Но существует ли эквивалентный механизм для отображения только части изображения SVG в качестве фона CSS?

например. мнимый синтаксис: 

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

Ответы [ 4 ]

9 голосов
/ 29 октября 2010

Вы можете использовать «традиционные» методы CSS-спрайтов для нарезки SVG-изображений с положением фона, вот краткий пример , хотя это немного сбивает с толку, если вы также начинаете использовать background-size. Вероятно, будет проще, если вы определите размер изображения SVG: 

<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">
4 голосов
/ 28 октября 2010

Один из подходов, который я пробовал, это не спрайт, но достижение аналогичных целей, - это включение SVG-изображений в кодировке URL непосредственно в файл CSS с использованием URI данных.

* 1003 Е.Г. * 

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);

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

Итак, все ваши SVG-изображения попадают в файл CSS. Gzipping должен очень хорошо втиснуть несколько файлов SVG в один файл CSS.

Насколько я могу судить, CSS выше работает в Opera 9.5+, IE 9 beta, Safari 5 и Chrome 6. Похоже, не работает в Firefox начиная с 3.6 или более ранних версий других браузеров.

1 голос
/ 04 апреля 2012

Вы можете использовать стеки SVG:

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

0 голосов
/ 28 октября 2010

SVG даже технически не поддерживается стандартами W3C. Это даже не будет работать в IE без плагина. Возможно, вы найдете какой-то неясный плагин Mozilla, который позволяет вам это делать, но, насколько я знаю, ваш код не будет проверяться.

...