D3 Examples - Vanilla Responsive SVG

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
  #content {
    margin:2%;
    padding:20px;
    border:2px solid #d0d0d0;
    border-radius: 5px;
  }
  #contentSvg {
    width:100%;
  }
</style>
</head>
<body>
  <div id="content"></div>
​
  <script type="text/javascript">
  // Load SVG
    var content = document.getElementById("content");
    var svg = document.createElement("object");
    svg.type = "image/svg+xml";
    svg.id = "contentSvg";
    svg.data = "tdm.svg";
    content.appendChild(svg);
​
  // Resize svg
    function resize() {
      var object = document.getElementById("contentSvg"),
          objectDoc = object.contentDocument,
          layer = objectDoc.getElementById("Layer 1");
​
      layer.setAttribute("transform", "scale(" + content.offsetWidth/900 + ")");
      object.setAttribute("height", content.offsetWidth*0.7);
    }
​
  // Resize on load
    setTimeout(resize, 100);
​
  // Add resize listener
    window.addEventListener("resize", resize);
​
  </script>
</body>
</html>
    