Skip to content

Instantly share code, notes, and snippets.

@matijs

matijs/inline-svg-fallback.html

Last active December 16, 2015 02:39
Show Gist options
  • Save matijs/5364118 to your computer and use it in GitHub Desktop.
Save matijs/5364118 to your computer and use it in GitHub Desktop.
Download ZIP
Check for inline svg and provide a background image fallback
Raw
inline-svg-fallback.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inline SVG fallback</title>
<script>
var div = document.createElement("div");
div.innerHTML = "<svg/>";
document.documentElement.className = (!!div.firstChild && div.firstChild.namespaceURI == "http://www.w3.org/2000/svg" ? "inline-svg" : "no-inline-svg");
document.createElement("svg");
</script>
<style>
body { text-align: center; }
.img { display: inline-block; height: 300px; width: 300px; }
.no-inline-svg .img { background: red; }
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" class="img">
<circle cx="50%" cy="50%" r="50%" fill="green" />
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment