Skip to content

Instantly share code, notes, and snippets.

@jczaplew
Created May 6, 2014 18:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jczaplew/fa1f6dee74979ef9c49f to your computer and use it in GitHub Desktop.
Save jczaplew/fa1f6dee74979ef9c49f to your computer and use it in GitHub Desktop.
Vanilla Responsive SVG
<!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>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment