Existe-t-il un équivalent de spriting pour les images SVG dans les pages Web?

Les images SVG ne sont pas des images bitmap, donc (à moins que je ne manque quelque chose) vous ne pouvez pas faire de sprite comme vous pouvez avec d'autres fichiers images utilisés sur les pages web (voir http://www.alistapart.com/articles/sprites).Existe-t-il un équivalent de spriting pour les images SVG dans les pages Web?

Mais existe-t-il un mécanisme équivalent pour afficher uniquement une partie d'une image SVG en tant qu'arrière-plan CSS?

E.g. syntaxe imaginaire:

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

Source

2010-10-28 Paul D. Waite

Vous pouvez utiliser les techniques d'image-objet CSS 'traditionnelles' pour découper des images SVG avec la position d'arrière-plan here's a quick example, même si cela commence à être déroutant si vous utilisez également la taille d'arrière-plan. Il est probablement plus facile si vous définissez une taille de votre image 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">

Source

2010-10-28 22:45:01 robertc

Une approche que j'ai essayé ce n'est pas spriting, mais atteint des objectifs similaires, est d'inclure des images SVG encodage URL directement dans le fichier CSS, en utilisant les URIs de données.

E.g.

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

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

Ainsi, toutes vos images SVG fin dans le fichier CSS. Gzipping devrait squish plusieurs fichiers SVG dans un fichier CSS assez bien. Pour autant que je sache, le CSS ci-dessus fonctionne sous Opera 9.5+, IE 9 beta, Safari 5 et Chrome 6. Ne semble pas fonctionner dans Firefox à partir de la version 3.6, ou des versions antérieures des autres navigateurs .

Source

2010-10-28 14:50:58

Notez que cela fonctionnera dans Firefox 4.0 bêtas: https: // bugzilla. mozilla.org/show_bug.cgi?id=231179 – robertc

Une discussion intéressante sur le spriting possible via les IDs dans les commentaires là-bas, d'environ https://bugzilla.mozilla.org/show_bug.cgi?id=231179#c38 –

Oui, après que je Je l'ai essayé, je pensais que ça valait la peine d'apporter l'idée;) BTW, vous pouvez utiliser des techniques de sprite CSS «traditionnelles» pour découper des images SVG avec fond posi tion, même si cela devient un peu confus si vous commencez aussi à utiliser la taille de l'arrière-plan. – robertc

-12

SVG n'est même pas techniquement supporté par les standards W3C. Il ne fonctionnera même pas dans IE sans un plugin. Peut-être trouverez-vous un plugin Mozilla obscur qui vous permet de le faire mais pour autant que je sache, votre code ne sera pas validé.

Source

2010-10-28 15:01:44 Yserbius

"SVG n'est même pas techniquement supporté par les standards W3C." - Comment voulez-vous dire? [C'est * une norme du W3C] (http://www.w3.org/TR/2003/REC-SVG11-20030114/). –

"Il ne fonctionnera même pas dans IE sans un plugin." - Semble fonctionner dans IE 9 bêta sans plug-in, comme je l'ai dit. –

"comme je sais que votre code ne va pas valider" - quel code? Le CSS que j'ai mis ci-dessus valide très bien. –

Vous pouvez utiliser SVG Stacks:

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

Source

2012-04-04 09:31:13 joseaio

Belle option (une fois le support se propage). –

ne fonctionne pas dans IE ou Chrome. –

lien cassé maintenant :( – mtness

Existe-t-il un équivalent de spriting pour les images SVG dans les pages Web?

Répondre

Questions connexes