block by jczaplew fa1f6dee74979ef9c49f

Vanilla Responsive SVG

Full Screen

index.html

<!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>