title: Is it possible to have an SVG scale to fit parent, maintaining a static fill size?
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>Is it possible to have the svg asset scale automatically, with a fixed-size pattern fill?</p>
  
  <p>Here is a codepen with a full example: <a href="http://codepen.io/mix3d/pen/jWMPQE" rel="nofollow noreferrer">http://codepen.io/mix3d/pen/jWMPQE</a></p>
  
  <p><strong>EDIT: Updated codepen with actual svg, not a theoretical one</strong></p>
  
  <p>Bonus points if the SVG can stretch with the fill tiling from the center. Thanks!</p>
  
  <p>This is how the SVG looks currently, but the texture scales with the svg
  <a href="https://i.stack.imgur.com/MvQWf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MvQWf.png" alt="Picture of Codepen"></a></p>
  
  <pre><code>&lt;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"&gt;
  &lt;style type="text/css"&gt;
    .overlay{fill:url(#img1);fill-opacity:1;}
    .circle{fill:#62B4B8;}
  &lt;/style&gt;
  
  
  &lt;defs&gt;
    &lt;pattern id="img1" patternUnits="userSpaceOnUse" width="243" height="201"&gt;
      &lt;image xlink:href="http://i.imgur.com/grtbkje.png" x="0" y="0" width="486" height="402" /&gt;
    &lt;/pattern&gt;
      &lt;filter id="f3" x="-40%" y="0" width="180%" height="400%"&gt;
        &lt;feOffset result="offOut" in="SourceAlpha" dx="0" dy="3" /&gt;
        &lt;feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /&gt;
        &lt;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"/&gt;
        &lt;feBlend in="SourceGraphic" in2="transparency" mode="normal" /&gt;
      &lt;/filter&gt;
  &lt;/defs&gt;
  &lt;g&gt;
     &lt;circle id="Background_Circle" class="circle" cx="280.52" cy="226.67" r="166.67"/&gt;
     &lt;!-- 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 --&gt;
     &lt;circle id="Background_Circle" class="overlay" cx="280.52"  cy="226.67" r="166.67"/&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>