title: Making SVG image responsive to bootstrap container
body: <p>I have an svg canvas which reveals an image behind another one. The problem is that I can't resize the svg to be full width. I can however provide a height. This doesn't work for responsiveness and I would like to know if it's at all possible to set a responsive width so it always shows with automatically adjusting the height.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var svgNS = "http://www.w3.org/2000/svg";
  
  $('.pic').mousemove(function(event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1')[0];
  
    var circle = document.createElementNS(svgNS, "circle");
    circle.setAttribute("cx", upX);
    circle.setAttribute("cy", upY);
    circle.setAttribute("r", "50");
    circle.setAttribute("fill", "white");
    circle.setAttribute("filter", "url(#filter2)");
  
    mask.appendChild(circle);
  
    setTimeout(function() {
      circle.style.opacity = '0';
      setTimeout(function() {
        mask.removeChild(circle);
      }, 300);
    }, 4000);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
  }
  .pic {
    text-align: center;
    position: relative;
    height: 400px;
    margin: 0;
    padding: 0;
  }
  .blur {
    height: 100%;
    width: 100%;
  }
  .overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
  }
  circle {
    opacity: 1;
    -webkit-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="pic"&gt;
        &lt;svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%"&gt;
          &lt;image filter="" xlink:href="http://staging.600lines.com/alta-2-12-16/img/a.jpg" width="100%" height="100%"&gt;&lt;/image&gt;
          &lt;filter id="filter2"&gt;
            &lt;feGaussianBlur stdDeviation="10" /&gt;
          &lt;/filter&gt;
          &lt;mask id="mask1"&gt;
            &lt;circle cx="-50%" cy="-50%" r="30" fill="white" filter="" /&gt;
          &lt;/mask&gt;
          &lt;image xlink:href="http://staging.600lines.com/alta-2-12-16/img/b.jpg" width="100%" height="100%" mask="url(#mask1)"&gt;&lt;/image&gt;
        &lt;/svg&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/600lines/pen/adMdoK/" rel="nofollow" title="codepen">Codepen</a></p>
  
  <p>Any help would be greatly appreciated!</p>