¿Hay un equivalente de spriting para imágenes SVG en páginas web?

Las imágenes SVG no son mapas de bits, así que (a menos que me falte algo) no se puede hacer actividad física como se puede con otros archivos de imágenes utilizados en páginas web (consulte http://www.alistapart.com/articles/sprites).¿Hay un equivalente de spriting para imágenes SVG en páginas web?

¿Pero hay un mecanismo equivalente para mostrar solo parte de una imagen SVG como fondo CSS?

E.g. sintaxis imaginaria:

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

Fuente

2010-10-28 Paul D. Waite

Puede utilizar las técnicas de sprite CSS 'tradicionales' para dividir las imágenes SVG con la posición de fondo, here's a quick example, aunque se pone un poco confuso si también comienza a usar el fondo de pantalla. Es probablemente más fácil si se define un tamaño de la imagen SVG en:

<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">

Fuente

2010-10-28 22:45:01 robertc

Un enfoque he intentado que no se spriting, pero permite lograr los objetivos similares, es incluir imágenes SVG con codificación URL directamente en el archivo CSS, utilizando URIs de datos.

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

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

Por lo tanto, todas sus imágenes SVG terminan en el archivo CSS. Gzipping debe aplastar múltiples archivos SVG en un archivo CSS bastante bien.

Por lo que puedo decir, el CSS anterior funciona en Opera 9.5+, IE 9 beta, Safari 5 y Chrome 6. Parece que no funciona en Firefox a partir de 3.6, o versiones anteriores de los otros navegadores .

Fuente

2010-10-28 14:50:58

nota que va a trabajar en Firefox 4.0 beta: https: // Bugzilla. mozilla.org/show_bug.cgi?id=231179 – robertc

Interesante discusión sobre posibles sprites vía IDs en los comentarios allí, desde https://bugzilla.mozilla.org/show_bug.cgi?id=231179#c38 –

Sí, después de que lo intenté, pensé que valía la pena plantear la idea;) Por cierto, puedes usar las técnicas de sprite CSS "tradicionales" para dividir las imágenes SVG con fondo posi ción, aunque se vuelve un poco confuso si también comienzas a usar el fondo de pantalla. – robertc

-12

SVG ni siquiera es técnicamente compatible con los estándares W3C. Ni siquiera funcionará en IE sin un complemento. Tal vez encuentres algún oscuro complemento de Mozilla que te permita hacerlo, pero hasta donde sé, tu código no se validará.

Fuente

2010-10-28 15:01:44 Yserbius

"SVG ni siquiera es técnicamente compatible con los estándares W3C." - ¿Qué quieres decir? [It * is * a W3C standard] (http://www.w3.org/TR/2003/REC-SVG11-20030114/). –

"Ni siquiera funcionará en IE sin un complemento." - Parece que funciona en IE 9 beta sin un complemento, como dije. –

"como sé que su código no validará" - ¿qué código? El CSS que he puesto arriba valida muy bien. –

Usted puede utilizar SVG Pilas:

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

Fuente

2012-04-04 09:31:13 joseaio

Buena opción (una vez se extiende el soporte). –

no funciona en IE o Chrome. –

enlace roto ahora :( – mtness

¿Hay un equivalente de spriting para imágenes SVG en páginas web?

Respuesta

Cuestiones relacionadas