SVG Sprite Sheet Quick Start

Copy/paste code snippet.

Feb 09, 2020

<html lang="en">
<head>
	<title>Supernifty - Custom SVG Sprite Sheet</title>
	<style>html,body{background:#3C3B3D;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;width:100vw;height:100vh;}</style>
</head>
<body>

<!--//

1. Copy your original svg code out of Adobe Illustrator, Sketch, etc...
2. Paste it into SVGOMG!: https://jakearchibald.github.io/svgomg/
3. Copy/paste your SVGOMG! optimized code into a hidden svg tag
4. Change the "svg" tags on your optimized code to "symbol"
5. Give your new symbol a unique id so you can reference it
6. Use your new sprite anywhere in your doc

//-->

<!--// sprite sheet //-->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">

	<!--// sample sprite //-->
	<symbol id="supernifty-logo" viewBox="0 0 296 306" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path fill="#fff" d="M.0052306-.00811318h295.5626268v305.69074179H.0052306z"/><path d="M266.83 28.817v248.08H28.826V28.817H266.83zm-65.702 94.72c0-9.25-2.295-17.2-6.884-23.88-4.59-6.67-10.922-11.76-18.995-15.28-8.072-3.52-17.285-5.27-27.636-5.27-10.612 0-20.15 1.63-28.614 4.88-8.463 3.26-15.087 7.91-19.873 13.97-4.785 6.05-7.177 13.18-7.177 21.38 0 8.34 2.23 15.46 6.689 21.39 4.46 5.92 10.173 10.79 17.139 14.6 6.966 3.81 15.267 7.34 24.902 10.59 6.771 2.28 11.865 4.37 15.283 6.25 3.418 1.89 5.713 3.8 6.885 5.72 1.172 1.92 1.758 4.28 1.758 7.08 0 3.25-1.351 6-4.053 8.25s-6.885 3.37-12.549 3.37c-5.468 0-9.928-.64-13.379-1.91-3.45-1.27-6.038-3.43-7.763-6.49-1.725-3.06-2.588-7.23-2.588-12.5H87.652c0 11.2 2.864 20.51 8.594 27.93 5.729 7.42 13.167 12.87 22.314 16.36 9.147 3.48 18.962 5.22 29.443 5.22 10.743 0 20.085-1.56 28.028-4.69 7.942-3.12 14.095-7.71 18.457-13.77 4.362-6.05 6.543-13.38 6.543-21.97 0-11.72-4.02-21.35-12.061-28.91-8.04-7.55-19.905-13.86-35.596-18.94-8.528-2.8-14.86-5.47-18.994-8.01s-6.201-5.6-6.201-9.18c0-2.15.716-4.12 2.149-5.91 1.432-1.79 3.548-3.24 6.347-4.34 2.8-1.11 6.153-1.66 10.059-1.66 5.859 0 10.335 1.41 13.428 4.25 3.092 2.83 4.638 6.65 4.638 11.47h36.328z" fill="#5D9CEC"/></symbol>

	<!--// more sprites... //-->

</svg>

<!--// use sprites //-->
<svg><use href="#supernifty-logo"></use></svg>

</html>