CODEWITHSUNDEEP
csssvg
Pascal
Pascal

Reputation: 63

Scale-independent repeating background images in SVG

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.

Upvotes: 6

Views: 8642

Answers (2)

atparkweb
atparkweb

Reputation: 11

I was able to make this work by using the background-size values set in ems rather than percentages. I created the SVG at a larger size (30px x 90px) and scale it down to my target size using 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;
}

That at least works for modern browsers. IE can fall back on the raster versions.

Upvotes: 1

Phrogz
Phrogz

Reputation: 303244

See SVG Patterns. I believe that you can use the patternUnits and patternContentUnits to achieve your zoom-independent behavior, but have not verified this.

Upvotes: 6

Related Questions