Skip to content

Instantly share code, notes, and snippets.

@w0rm

w0rm/svgstore.html

Created August 6, 2014 15:26
Show Gist options
  • Star 22 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save w0rm/621a56a353f7b2a6b0db to your computer and use it in GitHub Desktop.
Save w0rm/621a56a353f7b2a6b0db to your computer and use it in GitHub Desktop.
Download ZIP
Load combined svg file into body
Raw
svgstore.html
<html>
<body>
<!-- load combined svg file (with symbols) into body-->
<script>
(function (doc) {
var scripts = doc.getElementsByTagName('script')
var script = scripts[scripts.length - 1]
var xhr = new XMLHttpRequest()
xhr.onload = function () {
var div = doc.createElement('div')
div.innerHTML = this.responseText
div.style.display = 'none'
script.parentNode.insertBefore(div, script)
}
xhr.open('get', '/svg/icons.svg', true)
xhr.send()
})(document)
</script>
<!-- display single icon from combined file -->
<svg width="40" height="40"><use xlink:href='#icon-name'></svg>
</body>
</html>
@fatso83
Copy link

fatso83 commented Feb 15, 2017

This has a bug. It will prevent clip-paths from working when using statements. See this stackoverflow question. By changing display: none to width: 0; height: 0 it will work in all cases.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment