SVGs in Chrome sometimes don't render

Well, it turns out this is a chrome bug after all, and pretty much what I had thought it was: changing <use> elements around breaks under certain circumstances. Those circumstances are basically: when the svg spritesheet isn't cached in the browser.

https://code.google.com/p/chromium/issues/detail?id=580809

Fixed in canary (M50), might get merged in to M49.

The workaround is to set a cache-control header on the SVG spritesheet that is more than zero. That also helps explain why I only saw this bug in my testing server and not in production - I have different cache settings on my beta box.

Attribute xlink:href is deprecated since SVG 2 (proof link). New versions of Chrome work strange with this attribute.

If you use xlink:href (for ancient browsers) and href (for new browsers) everything will work fine everywhere.

I had this bug too. Was fixed with pfooti solution by caching & then by the webkit update.

But later it came back: wasn't the same thing, but could be useful for other, later.

I opened my SVG with Inkscape (but the same works in Illustrator, too), selected my object and applied path > union, and saved:

<path class="st0" d="M32 272l128 48 16 160 80-112 112 112L480 32 32 272zm318.7 145.4L256 320l128-176-192 153.8-82.6-31 322-172.5-80.7 323.1z"/>

became

<path d="M480 32L32 272l128 48 16 160 80-112 112 112L480 32zm-48.6 62.3l-80.7 323.1L256 320l128-176-192 153.8-82.6-31 322-172.5z"/>

And now it works!

I don't know exactly why, but Chrome seems to have some issue with the first syntax. Hope it helps!