Skip to content

Instantly share code, notes, and snippets.

@roblevintennis

roblevintennis/Inline SVG Toy

Created October 25, 2014 14:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save roblevintennis/c09a337c62ae5901debc to your computer and use it in GitHub Desktop.
Save roblevintennis/c09a337c62ae5901debc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Inline SVG Toy
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
svg { width:50px; height:50px; }
svg > path,
svg > use {
fill: blue;
color: lightblue;
}
.wrap:hover svg > use,
.wrap:hover svg > path {
fill: green;
color: lightgreen;
}
</style>
<script type="text/javascript">
//svg4everybody
(function(e,t,n,r,i){function s(t,n){if(n){var r=n.getAttribute("viewBox"),i=e.createDocumentFragment(),s=n.cloneNode(true);if(r){t.setAttribute("viewBox",r)}while(s.childNodes.length){i.appendChild(s.childNodes[0])}t.appendChild(i)}}function o(){var t=this,n=e.createElement("x"),r=t.s;n.innerHTML=t.responseText;t.onload=function(){r.splice(0).map(function(e){s(e[0],n.querySelector("#"+e[1].replace(/(\W)/g,"\\$1")))})};t.onload()}function u(){var i;while(i=t[0]){var a=i.parentNode,f=i.getAttribute("xlink:href").split("#"),l=f[0],c=f[1];a.removeChild(i);if(l.length){var h=r[l]=r[l]||new XMLHttpRequest;if(!h.s){h.s=[];h.open("GET",l);h.onload=o;h.send()}h.s.push([a,c]);if(h.readyState===4){h.onload()}}else{s(a,e.getElementById(c))}}n(u)}if(i){u()}})(document,document.getElementsByTagName("use"),window.requestAnimationFrame||window.setTimeout,{},/Trident\/[567]\b/.test(navigator.userAgent))
</script>
<head>
<body>
<!-- Here's the literal svg def ... needs to go in file svg-defs.svg:
<svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="128 128 24 24" id="overdue"><title>overdue</title><g fill="currentColor"><path d="M140.7 143.5c.3-2 .8-4.3.8-4.6 0-.4-.2-.8-.4-1.1s-.6-.4-1.1-.4-.8.2-1.1.4-.3.6-.3 1.1.6 2.6.8 4.6h1.3zM140 145.2c-.4 0-.7.1-1 .4-.3.3-.4.6-.4 1s.1.7.4 1c.3.3.6.3 1 .3s.7-.1 1-.3c.3-.3.4-.6.4-1 0-.3-.1-.7-.4-1-.3-.3-.6-.4-1-.4z"/></g><path d="M148.8 130.4H147v1.8c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8v-1.8h-7v1.8c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8v-1.8H131c-1.5 0-2.6 1.1-2.6 2.6v15.8c0 1.5 1.1 2.6 2.6 2.6h17.5c1.5 0 2.6-1.1 2.6-2.6V133c.3-1.5-.9-2.6-2.3-2.6zm.8 18.4c0 .5-.3.9-.9.9h-17.5c-.5 0-.9-.3-.9-.9v-13.1h19.2v13.1zM134.8 133c.5 0 .9-.4.9-.9v-2.6c0-.5-.4-.9-.9-.9s-.9.4-.9.9v2.6c0 .5.3.9.9.9zM145.2 133c.5 0 .9-.4.9-.9v-2.6c0-.5-.3-.9-.9-.9-.5 0-.9.4-.9.9v2.6c.1.5.4.9.9.9z"/></symbol></svg
-->
<div class="wrap">
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg-defs.svg#overdue" /></svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment