Is it possible for the SVG scale to match the parent scale while maintaining the size of the static padding?

Question

I am trying to create a paper texture using svg, which I worked well enough with using a transparent overlay to add texture on top of the main svg element below it.

However, I notice that the texture is scaled using SVG. Since the image is set to page width, it becomes extremely stretched on large monitors and does not look very beautiful.

Is it possible to automatically scale an svg resource by filling out a fixed-size template?

Here is the code with a complete example: http://codepen.io/mix3d/pen/jWMPQE

EDIT: Updated code with actual svg, not theoretical

Bonus points if the SVG can be stretched with filling from the center. Thanks!

This is what SVG looks like now, but texture is scaled using svg

<svg version="1.1" id="paper_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="10 0 1526 407.93"> <style type="text/css"> .overlay{fill:url(#img1);fill-opacity:1;} .circle{fill:#62B4B8;} </style> <defs> <pattern id="img1" patternUnits="userSpaceOnUse" width="243" height="201"> <image xlink:href="http://i.imgur.com/grtbkje.png" x="0" y="0" width="486" height="402" /> </pattern> <filter id="f3" x="-40%" y="0" width="180%" height="400%"> <feOffset result="offOut" in="SourceAlpha" dx="0" dy="3" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /> <feColorMatrix in="blurOut" result="transparency" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0"/> <feBlend in="SourceGraphic" in2="transparency" mode="normal" /> </filter> </defs> <g> <circle id="Background_Circle" class="circle" cx="280.52" cy="226.67" r="166.67"/> <!-- I know I could probably use a filter to achieve the same overlay effect, but this worked for now, duplicate the object with the semi-transparent fill pattern --> <circle id="Background_Circle" class="overlay" cx="280.52" cy="226.67" r="166.67"/> </g> </svg> 

Answer 1

I finally found a relative decent workaround, with css media queries.

Since you can embed css media queries in svg (which will be applied based on the svg size, for example, when displayed via the img tag), I can set a differently scaled template as a fill element.

I don’t know what a memory trade-off is if I had, say, 10 different scaled templates in the <defs> tag with the appropriate media queries, but this works well enough for my application with little overhead. Since the reference image is the same, it needs to be downloaded only once.

updated code: http://codepen.io/mix3d/pen/BjdJge

 <svg version="1.1" id="paper_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="10 0 1526 407.93"> <style type="text/css"> .overlay{fill:url(#tsmall);fill-opacity:1;} .circle{fill:#62B4B8;} @media (max-width: 1000px){ .overlay{fill:url(#tlarge);} } </style> <defs> <pattern id="tsmall" patternUnits="userSpaceOnUse" width="243" height="201"> <image xlink:href="http://i.imgur.com/grtbkje.png" x="0" y="0" width="486" height="402" /> </pattern> <pattern id="tlarge" patternUnits="userSpaceOnUse" width="972" height="804"> <image xlink:href="http://i.imgur.com/grtbkje.png" x="0" y="0" width="972" height="804" /> </pattern> </defs> <g> <circle id="Background_Circle" class="circle" cx="280.52" cy="226.67" r="166.67"/> <!-- I know I could probably use a filter to achieve the same overlay effect, but this worked for now, duplicate the object with the semi-transparent fill pattern --> <circle id="Background_Circle" class="overlay" cx="280.52" cy="226.67" r="166.67"/> </g> </svg> 

Answer 2

Yes you can do it. But you need to remove viewBox.

Then, if you make <rect> 100% wide and high, you can make the SVG any size you want, and the pattern will repeat and fill the entire SVG.

 #svg1 { width: 100px; height: 100px; } #svg2 { width: 250px; height: 250px; } 

 <svg id="svg1"> <defs> <pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="5" fill=#0000ff /> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" style="stroke: #000000; fill: url(#pattern2);" /> </svg> <svg id="svg2"> <defs> <pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="5" fill=#0000ff /> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" style="stroke: #000000; fill: url(#pattern2);" /> </svg> 

Answer 3

As Jesse Kernagan commented. Is there a reason why you are not just using a background image.

(Here here → http://codepen.io/thepixelninja/pen/EPgPdx )

i.e. create an empty file called pattern.svg (or something else). then take your svg code and paste it inside, adding svg header material like ...

 <?xml version="1.0" encoding="iso-8859-1"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="pattern" viewBox="0 0 100 100"><defs><pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="5" fill="#0000ff" /></pattern></defs><rect x="0" y="0" width="100" height="100" style="fill: url(#pattern2);" /></svg> 

I removed the stroke from the image since I will add it to the div later. We do not want the blow to be repeated.

Then save the new svg image file and use it as a normal background image in css. i.e...

 <div id="circles"></div> <style> #circles { //always center the circles within the box background-position:center; //change this to change the size of the circles background-size:100px 100px; //point this to where you saved your new svg image background-image:url(http://urbanise.net.au/pattern.svg); //set the width of the box width:100%; //set the height height:500px; //add the border back in border:5px solid #000; } </style> 

It works like a charm :)