Imágenes de fondo que se repiten independientemente de la escala en SVG

Question

Tengo una pregunta y espero que alguien me pueda ayudar. Lo que estoy buscando es un equivalente de la propiedad CSS background-repeat en imágenes SVG. ¿Hay algún truco para lograr repetir imágenes de trama como rellenos? El punto es que estoy diseñando un sitio web y quiero experimentar con gráficos SVG para hacerlo escalable. Entonces, cuando el usuario hace zoom, todo se mantiene perfectamente nítido. Sin embargo, también necesito texturas de trama "granuladas". Ahora bien, si aplico una imagen ráster como textura en Illustrator y la guardo como un SVG, las texturas se acercan con el archivo y un grano sutil se convierte en bloques feos de píxeles. Ahora estoy buscando la posibilidad de repetir la imagen en lugar de escalarla con el zoom. ¿Alguien sabe un truco para lograr esto?

Otra posibilidad en la que pensé fue sacar la imagen raster del SVG y aplicarla como fondo a través de CSS. Lamentablemente, parece que no hay forma de evitar que una imagen de fondo se amplíe mediante CSS o JavaScript. Lo cual tiene mucho sentido porque cualquiera que lo haga con elementos de contenido ciertamente iría al infierno de la accesibilidad.

Answer 1

Ver SVG Patterns. Creo que puede usar patternUnits y patternContentUnits para lograr su comportamiento independiente del zoom, pero no lo ha verificado.

Answer 2

Pude hacerlo funcionar utilizando los valores de fondo establecidos en ems en lugar de porcentajes. Creé el SVG en un tamaño mayor (30px x 90px) y lo reduje a mi tamaño objetivo usando ems.

body { 
    font-size: 15px; 
    background: #fff url(stripe_pattern.svg) repeat-x left top; 
    -webkit-background-size: 0.5em, 0.5em; 
    -moz-background-size: 0.5em, 0.5em; 
    -o-background-size: 0.5em, 0.5em; 
    background-size: 0.5em, 0.5em; 
} 

Al menos funciona para navegadores modernos. IE puede recurrir a las versiones de ráster.