Is it possible to have an SVG scale to fit parent, maintaining a static fill size?

Question

I am trying to create a paper texture look with svg, which I have working fairly well, using a transparent overlay to add the texture over the basic color of the svg item below it.

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

Is it possible to have the svg asset scale automatically, with a fixed-size pattern fill?

Here is a codepen with a full example: http://codepen.io/mix3d/pen/jWMPQE

EDIT: Updated codepen with actual svg, not a theoretical one

Bonus points if the SVG can stretch with the fill tiling from the center. Thanks!

This is how the SVG looks currently, but the texture scales with the 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

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

Then, if you make the <rect> have a width and height of 100%, 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>