Skip to content

Instantly share code, notes, and snippets.

@patrickkettner
Last active August 29, 2015 14:20
Show Gist options
  • Save patrickkettner/6639d92d51c1cea8dd90 to your computer and use it in GitHub Desktop.
Save patrickkettner/6639d92d51c1cea8dd90 to your computer and use it in GitHub Desktop.
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
// ⬇⬇ view the source of the below svg file ⬇⬇
<object type="image/svg+xml" data="foo.svg"></object>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
<svg width="400px" height="300px" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="300" height="500">
<body xmlns="http://www.w3.org/1999/xhtml">
<div id="foo">view the source, luke</div>
</body>
</foreignObject>
<div id="bar"></div>
<script>
// the style element exists on a div...
// in all browsers when element is inside of a foreignObject (and it supports foreign object)
console.log('style' in document.getElementById('foo'));
// in all browsers except (I)E(dge) when it is outside of a foreignObject
console.log('style' in document.getElementById('bar'));
// in all browsers except (I)E(dge) when it is created in the svg namespace
console.log('style' in document.createElementNS('http://www.w3.org/2000/svg', 'div'));
// in chrome, safari and firefox, all three of the above log out `true`. in (I)E(dge), it logs out `true`, `false`, `false`
</script>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment