Edit on
<h1>Scaling SVG &lt;symbol> icons responsively </h1>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  
  <symbol id="beaker" viewBox="214.7 0 182.6 792">
    <circle cx="344.8" cy="20.2" r="20.2"/>
    <circle cx="344.8" cy="92.9" r="20.2"/>
    <circle cx="320.5" cy="169.7" r="24.2"/>
    <circle cx="243" cy="141.4" r="24.2"/>
    <circle cx="284.2" cy="56.6" r="36.4"/>
    <path d="M397.3 768.5l-11.3-343.5v-178.5l9.7-20.2h-29.9l-4 13.7 2.4 189.9 9.7 316.8c1.6 14.5-19.4 12.9-34.8 12.9h-33.9s-38.8.8-46.1 0c-14.5-.8-18.6 1.6-17-29.1 1.6-25.2.8-95.5 5.7-301.5l-2.4-189.9-3.2-12.9h-27.5l9.7 20.2v178.6s-3.2 323.3-3.2 343.5c0 26.7 22.6 23.4 22.6 23.4h128.5c7.2 0 25 0 25-23.4zM259.9 473.5h93.8l-1.6-79.9h-92.2zM356.1 611.7l-2.4-132.6v5.7h-93.8l-.8 126.9zM352.1 382.3l-1.7-99.4h-89.7l-.8 99.4zM259.1 623l-.8 123.6h101l-2.4-123.6z"/>
  </symbol>
  
  <symbol id="fish" viewBox="0 26 100 48">
    <path d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.1,0-4.2,0.1-6.2,0.3L39,26c0,4.5,1.3,9,2.4,12.1C31.7,40.7,23.3,44,16,44L0,34
	c0,8,4,16,4,16s-4,8-4,16l16-10c7.3,0,15.7,3.3,25.4,5.9C40.3,65,39,69.5,39,74l16.8-9.3c2,0.2,4.1,0.3,6.2,0.3
	c19,0,34.5-10.5,36.5-12.5S100.5,49.5,98.5,47.5z M85.5,50c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
	C88,48.9,86.9,50,85.5,50z"/>  
  </symbol>
  
  <symbol id="fish2" viewBox="0 26 100 48" preserveAspectRatio="xMinYMin slice">
    <path d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.1,0-4.2,0.1-6.2,0.3L39,26c0,4.5,1.3,9,2.4,12.1C31.7,40.7,23.3,44,16,44L0,34
	c0,8,4,16,4,16s-4,8-4,16l16-10c7.3,0,15.7,3.3,25.4,5.9C40.3,65,39,69.5,39,74l16.8-9.3c2,0.2,4.1,0.3,6.2,0.3
	c19,0,34.5-10.5,36.5-12.5S100.5,49.5,98.5,47.5z M85.5,50c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
	C88,48.9,86.9,50,85.5,50z"/>  
  </symbol>
  
  <symbol id="fish3" viewBox="0 26 100 48" preserveAspectRatio="xMidYMid slice">
    <path d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.1,0-4.2,0.1-6.2,0.3L39,26c0,4.5,1.3,9,2.4,12.1C31.7,40.7,23.3,44,16,44L0,34
	c0,8,4,16,4,16s-4,8-4,16l16-10c7.3,0,15.7,3.3,25.4,5.9C40.3,65,39,69.5,39,74l16.8-9.3c2,0.2,4.1,0.3,6.2,0.3
	c19,0,34.5-10.5,36.5-12.5S100.5,49.5,98.5,47.5z M85.5,50c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
	C88,48.9,86.9,50,85.5,50z"/>  
  </symbol>
  
</svg>

<div class="resizeable">
  <p>Using <code>padding-bottom</code> to maintain aspect ratio:</p>
<svg class="icon" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin slice">
  <use xlink:href="#fish"/></svg>

<svg class="icon"><use xlink:href="#fish2" /></svg>
</div>

<p>The icon on the left has a <code>viewBox</code> and a "slice" <code>preserveAspectRatio</code> defined on the icon's <code>&lt;svg></code> element, while the icon on the right relies on the same attributes defined on the <code>&lt;symbol></code>.  In order to get the "slice" to work properly without extra mark-up every time you use the icon, you have to sacrifice the vertical centering of the symbol within the SVG, and you get overflow at small sizes.</p>  

<div class="resizeable">
  <p>You can fix the centering issue by padding top and bottom, and using <code>preserveAspectRatio = "xMidYMid slice"</code>:</p>

<svg class="icon pad-both"><use xlink:href="#fish3" /></svg>
</div>

<p>With "auto" aspect ratio, you <em>may</em> get scaling to fit, but it depends on the browser.  It only works when the viewBox is on the <code>&lt;svg&gt;</code>, otherwise you get an invariant default height:</p>
<div class="resizeable auto">
  <p>Using <code>height:auto</code> to maintain aspect ratio:</p>
<svg class="icon" viewBox="0 0 100 100" >
  <use xlink:href="#fish"/>
 </svg>
<svg class="icon">
  <use xlink:href="#fish" />
  </svg>
</div>

<p>Also note the <code>overflow:visible</code> rules in the CSS.  For Firefox, the overflow property for the symbol is applied using <code>svg:not(:root)</code> (applying it to <code>svg</code> without a psuedoclass is not enough to over-ride the default stylesheet rule). </p>
.icon {
  width: 40%;
  min-width:50px;
  margin: 4%;
  padding:0;
  height:50px;
  padding-bottom:calc(40% - 50px);
  background: #eee;
  overflow:visible;
  vertical-align:top;
}
.icon.pad-both {
  padding: calc(20% - 25px) 0;
}
.auto .icon{
  height:auto;
  padding-bottom:0;
}
symbol, svg:not(:root) {
  overflow:visible;
}

body {
  padding: 20px;
}
.resizeable {
  width:50%;
  resize:both;
  overflow:auto;
  padding:1em;
  margin:1em;
  border:inset;
}
p {
  max-width:40em;
  margin:1em;
}
Rerun