svg symbols and use

by Richard Hunter

HTML

<svg width="0" height="0">
  <symbol viewBox="-10 -10 1000 1000" id="shape2">
<g>
	<g>
		<path d="M347.4,212.8c1.9,0,1.9-3,0-3C345.5,209.8,345.5,212.8,347.4,212.8L347.4,212.8z"/>
	</g>
</g>
<g>
	<g>
		<path d="M423.1,571.2c-0.6-0.6-1.1-1.1-1.7-1.7c-0.6-0.6-1.5-0.6-2.1,0c-0.6,0.6-0.6,1.5,0,2.1c0.6,0.6,1.1,1.1,1.7,1.7
			c0.6,0.6,1.5,0.6,2.1,0C423.7,572.8,423.7,571.8,423.1,571.2L423.1,571.2z"/>
	</g>
</g>
<g>
	<path class="st0" d="M918.3,870.6c-58.6,7.6-91.6-32-111.8-80.1c-28.5-67.8-57-135.6-85.5-203.5c-12.2-18.7-18.8-40.4-25.2-61.8
		c-15.8-52.7-31.6-105.4-47.4-158.1c-19.1-63.7-38.2-127.4-54.1-192c-4.7-19.1-9.1-38.9-5.3-58.2c3.8-19.3,18-37.9,37.5-40.5
		c1.1-25,2.1-49.9,3.2-74.9C521.5,3.8,413.4,6.1,305.4,8.4c0.5,31.2,0.9,62.5,1.4,93.7c71.1,50,37,135.2,22.1,203.2
		c-21.4,97.7-46.3,195.2-84.5,287.9c-7,17.1-13.6,33-19,50.8c-4.4,14.4-11.8,27.7-19.7,40.5c-17.2,27.7-37.6,53.9-63.2,74.2
		c-22.7,17.9-48.8,30.5-74.3,43.7c-23.9,12.3-44.9,26.5-66.6,42.1c0,0,14.5,87.6,12.1,95.8C15.2,934.7,35,925.9,40,923
		c7.9-4.6,16-8.8,24.3-12.6c18.8-8.7,38.5-15.4,58.7-20.2c51.1-12.2,105.2-11.8,155.8,2.7c8.2,2.3,16.3,5,24.5,7.2
		c30.8,8.2,63.2,9.3,94.7,12.8c4.8-19.3,7.8-39.1,8.9-59c-0.4,6.4-49.2-17.1-52.9-25c-2.9-6-1.6-13-0.2-19.4
		c6.9-33,14.4-66.1,21.5-99.1c4.7-22.1,9.4-44.3,13.4-66.6c2-10.9,4.9-22.4,5.4-33.5c0.5-10.2-1.3-19.7,1.6-29.9
		c2-7.1,6-13.9,12.2-17.9c2.6-1.7,5.5-2.9,8.4-3.8c16-4.9,28.7,0.6,43.8,3.3c18,3.2,37.5,4.2,55.9,6.2c17.1,1.9,34.2,3.6,51.2,5.2
		c7.8,0.7,31.8-1.1,37,5.8c1,1.3,1.5,2.8,2,4.3c13.6,40.3,27.3,80.6,38.5,121.6c5.6,20.7,11.3,41.8,14.6,63
		c2.4,15.9,5.8,33.7,3.4,49.7c-0.7,4.5-1.7,9-4,12.9c-8.2,14.3-22.3,10.4-35.6,11.1c-2.2,0.1-33.3,2-33.3,3.2
		c0.1,29.5,0.2,59,0.3,88.5c109.2,10.4,219.5,20.8,328.2,6C918.4,916.7,918.4,893.7,918.3,870.6z...

CSS

.bar {
  background: yellow;
}