All geek questions in one place

Scalable repeating background images in SVG

I have a question, and I hope someone can help me. What I'm looking for is the equivalent of the CSS background-repeat property in SVG images. Is there any hack to achieve repeating bitmaps as fills? The fact is that I am developing a website and want to experiment with SVG graphics to make it scalable. Therefore, when the user zooms out, everything remains completely sharp. However, I also need grainy bitmap textures. Now, if I use a bitmap as a texture in Illustrator and save it as an SVG, the textures are scaled along with the file and the fine grain become ugly blocks of pixels. Now I'm looking for an opportunity to repeat the image, rather than scale it when scaling. Does anyone know to hack this?

Another possibility that I was thinking about is removing the bitmap from the SVG and applying it as a background via CSS. Unfortunately, there is no way to prevent the background image from growing with CSS or JavaScript. Which makes sense, because anyone who does this on content elements will surely end up in an adventitious access.

+6
source share
2 answers

See SVG Templates . I believe that you can use patternUnits and patternContentUnits to achieve your scaling-independent behavior, but have not confirmed this.

+6
source

I was able to do this work using the background size values ​​set in ems, not percentages. I created a larger SVG (30px x 90px) and scaled it 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; }

This at least works for modern browsers. IE may return to raster versions.

0
source

Source: https://habr.com/ru/post/906388/

More articles:


All Articles