So this seems to be a bug that just appeared in Chrome today (and apparently Firefox).
I have an SVG wrapped inside a span (I also tried the div and object tags, this doesn't seem to matter), and this range has a given height and width. Yesterday, the child will appropriately fit all the sizes of its parent, as every other html element does. However, now that the SVG element does not receive the inherited size from its parent , the size itself is based on the actual size of the SVG.
Check out the fiddle here: http://jsfiddle.net/theandybob/4LHeB/
CSS:
.icon-small { width: 32px; height: 32px; position: relative; display: inline-block; }
And the code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="run-import" viewBox="0 0 48 48"> <path fill="#4B4B4B" d="M24,0c4.4,0,8.4,1.1,12,3.2s6.6,5.1,8.7,8.7c2.1,3.7,3.2,7.7,3.2,12s-1.1,8.4-3.2,12 c-2.1,3.7-5.1,6.6-8.7,8.7c-3.7,2.1-7.7,3.2-12,3.2c-4.4,0-8.4-1.1-12-3.2c-3.7-2.1-6.6-5.1-8.7-8.7C1.1,32.4,0,28.4,0,24 s1.1-8.4,3.2-12S8.3,5.4,12,3.2S19.6,0,24,0z M36,25.7c0.7-0.4,1-0.9,1-1.7c0-0.8-0.3-1.3-1-1.7l-17-10c-0.6-0.4-1.3-0.4-2,0 c-0.7,0.4-1,1-1,1.8v20c0,0.8,0.3,1.4,1,1.8c0.3,0.2,0.7,0.3,1,0.3c0.4,0,0.7-0.1,1-0.3L36,25.7z"></path> </symbol> </svg> <span class="icon-small"> <svg><use xlink:href="#run-import"></use></svg> </span>
Now this happens in Chrome (both on Windows and Mac) and Firefox, but not in IE or Safari. Ideas on how to solve the problem or where did it arise?
The only workaround I have now is to specifically set the svg size for inheritance from the parent.
Also, throwing version numbers there:
1. Chrome: version 36.0.1985.125 m
2. Firefox: 30.0