Base tag kills your xlink:href, but only in Firefox

[Freizeitler]

Bug or feature?
When using a base tag in your document you might encounter a special behavior in Firefox. It doesn't render the SVG when implemented via a use tag, because it simply can't find the definition. The use tag references the SVG symbol by using a xlink:href="#svg-id". FF prepends the link with the base tag, other major browsers don't. That's kind of tricky when debugging... ;)

[tigt]

I think this is actually the correct behavior, but it's hard to say, since HTML5 inline SVG was never really specced out. Better than mucking with xml:base, at least.

[fredrikekelund]

I ran into another issue with the same cause, where filters in my SVG document that were referenced via a relative url() prevented the SVG from rendering as soon as I left the start page of my angular application (that was using pushState and <base>). I found a workaround to this in an issue thread in the angular repo angular/angular.js#8934 - namely https://github.com/jeffbcross/angular-svg-base, a directive that automatically sets all references to absolute URL's instead of relative ones, which solves the problem.

[ericsoco]

This is not an issue only with Firefox; Chrome also applies <base href> to SVG xlink:hrefs. Safari, as of this writing, does not.