Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Inline SVG fallback, mainly for Opera < 12
<!doctype html>
<head>
<!--
This gist is available under the MIT (http://opensource.org/licenses/mit-license.php) license.
-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Inline SVG</title>
<meta name="description" content="">
<meta name="author" content="">
<style>
button {
background-color: white;
border: none;
cursor: pointer;
}
button svg path { fill: black; }
/* fallback styling */
button img { width: 15px; height: 15px; }
</style>
</head>
<body>
<section>
<button title="Open in a new window" id="popup">
<svg width="15px" height="15px" viewBox="0 0 50 50"><path d="M10,0L10,40L50,40L50,0z M0,5L5,5L5,45L45,45L45,50L0,50Z"/></svg>
</button>
</section>
<script>
/**
* Testing method for inline svg support
*
* @return boolean
*/
function hasInlineSvg() {
var div = document.createElement('div');
div.innerHTML = '<svg/>';
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
}
/**
* Compatibility check(s) method which supports following functionalities:
* - fallback for browsers that don't support inline svg
*/
function doCompatibilityChecks() {
if (!hasInlineSvg()) {
var svgElms = document.querySelectorAll('svg');
Array.prototype.forEach.call(svgElms, function(aNode, aIndex, aNodeList) {
// let's work on a temp Node, thus be friendly to the current DOM
var tmpNode = aNode.cloneNode(true);
var xmlns = tmpNode.getAttribute('xmlns');
if (!xmlns) { //we need a namespace if not set
tmpNode.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
}
// Serialize any native DOM node to an XML string
// (including nodes from HTML documents)
var elmTxt = (new XMLSerializer()).serializeToString(tmpNode);
// Create a base-64 encoded ASCII string from a string of binary data.
var escapedHtmlElement = window.btoa(elmTxt);
var replacement = document.createElement("img");
replacement.alt = "";
replacement.src = "data:image/svg+xml;base64,"+escapedHtmlElement+"";
var w = tmpNode.getAttribute('width');
if (w) {
replacement.width = parseInt(w);
}
var h = tmpNode.getAttribute('height');
if (h) {
replacement.height = parseInt(h);
}
// replace the current svg Node
aNode.parentNode.replaceChild(replacement, aNode);
// cleanup our leftovers (and free up some memory)
tmpNode = replacement = escapedHtmlElement = null;
});
svgElms = null;
}
}
window.onload = doCompatibilityChecks;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment