Edit on
<h1>Chrome SVG sizing bug with window zoom</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>
  
</svg>

<figure>
<svg class="icon">
  <rect fill="lightblue" height="100%" width="100%" />
  <use xlink:href="#beaker"/>
  <!-- the default width and height for  a <use> element 
       that references a <symbol> is 100% -->
</svg>

<svg class="icon">
  <rect fill="lightblue" height="125px" width="125px"/>
  <use xlink:href="#fish" height="125px" width="125px"/>
</svg>
</figure>
<p> The contents of the icon on the left are sized to be 100% of the SVG, the contents of the icon on the right are sized in pixels.  In Chrome (35) and Opera (20) (and presumably other webkit-based browsers) both look fine at default zoom, but zooming in or out of the browser window causes a double-zoom on the contents of the graphic sized using percents.</p>

<figure>
<svg class="icon" viewBox="0 0 125 125">
  <rect fill="lightblue" height="100%" width="100%" />
  <use xlink:href="#beaker"/>
  <!-- the default width and height for  a <use> element 
       that references a <symbol> is 100% -->
</svg>

<svg class="icon" viewBox="0 0 125 125">
  <rect fill="lightblue" height="125px" width="125px"/>
  <use xlink:href="#fish" height="125px" width="125px"/>
</svg>
</figure>
<p>The effect is not visible when there is a viewBox attribute on the SVG.</p>
<aside>Thank's to <a href="http://css-tricks.com/svg-symbol-good-choice-icons/#comment-1582044">Michael White's comment on CSS-Tricks</a> for getting me to look at this.</aside>
.icon {
  width: 125px;
  height: 125px;
  background: #eee;
}

body {
  padding: 20px;
}
p, aside {
  max-width:40em;
  margin:0 auto 2em;
}
figure {
  text-align:center;
}
h1 {
  font-size:larger;
  text-align:center;
}
aside {
  font-style:italic;
}
Rerun