I have a question and I hope someone can help me out. What I am searching for is an equivalent of the CSS property background-repeat in SVG images. Is there any hack to achieve repeating raster images as fills? The point to this is that I am designing a website and want to experiment with SVG graphics to make it scalable. So when the user zooms everything stays perfectly sharp. However, I also need “grainy” raster textures. Now if I apply a raster image as a texture in Illustrator and save it as a SVG, the textures zoom along with the file and a subtle grain becomes ugly blocks of pixels. Now I am searching for a possibility to repeat the image instead of scaling it on zoom. Does anyone know a hack to achieve this?
Another possibility I thought about was taking the raster image out of the SVG and applying it as a background via CSS. Unfortunately there seems no way to prevent a background image from zooming through CSS or JavaScript. Which makes perfect sense because anyone doing so on content elements would certainly go to accessibility hell.
See SVG Patterns. I believe that you can use the
patternUnitsandpatternContentUnitsto achieve your zoom-independent behavior, but have not verified this.