Combining <symbol> with <use> SVG tags on a HTML page
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="shapes-square" viewBox="0 0 195.74 129.42">
<rect x="0.5" y="0.5" width="194.74" height="128.42" fill="blue" stroke="#000" stroke-miterlimit="10"/>
</symbol>
</svg>
<!-- Declare Initial 'use' of SVG -->
<div id="box1">
<svg>
<title>Blue Square 1</title>
<use href="#shapes-square"/>
</svg>
</div>
<br />
<!-- Div to hold the second 'use' of the SVG -->
<div id="box2">
<svg>
<title>Blue Square 2</title>
<use href="#shapes-square" />
</svg>
</div>
Run code snippet