Last active
September 10, 2018 09:04
-
-
Save mstalfoort/1293822 to your computer and use it in GitHub Desktop.
Inline SVG fallback, mainly for Opera < 12
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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