This no longer works when defining SVGs as symbols

[jonathantneal]

This no longer works when defining SVGs as symbols

[jonathantneal]

Well, I’ll just have to fix that now, won’t I.

[intterra]

I am experiencing this issue as well. On IE11, the svg does actually load, but it is not displaying for some reason.

[jonathantneal]

@afram, @intterra, the technique described at css-tricks will not work as expected with external SVGs in any browser. The viewBox attribute will be ignored, whether it is on the external <symbol> or <svg> element. As with the <use> technique, IE will ignore the external SVG all together.

If you prefer using <symbol>, svg4everybody will be need to be updated to patch every browser.

@intterra, I’m interested in knowing what you mean by load. Do you mean it making a request for the SVG?

[intterra]

I mean I can see IE making the AJAX request, and I can inspect the DOM afterward and see the svg markup where the element used to be. But IE does not display the resulting svg elements.

[jonathantneal]

Oh, you mean svg4everybody is making a request. Yes, it is. This script is already getting you halfway there.

Now, again, to be clear, this technique does not work in ANY browser without JavaScript. What I would update is more hypothetical than polyfill.

[afram]

@jonathantneal That technique does work with external sprite sheet of SVG symbols. I have successfully used it for all browsers except IE.

[jonathantneal]

@afram, here is the demo that it fails for me in all browsers. Would you share the one that works?

[intterra]

update: the issue is that IE11 does not like the symbol tag. If I switch from symbol to g, it works.

[afram]

@jonathantneal 404 :-(

[jonathantneal]

@intterra, <g> has always worked in all browsers sans IE. This issue is in regard to <symbol>.

@afram, updated URL.

[afram]

@jonathantneal clicking on the 'add external svg' adds something to the screen for me, but it's proportions are wrong. I'll add a demo with my code in a sec

[jonathantneal]

@afram, this is precisely what I mean by will not work as expected and #10 (comment)

[afram]

@jonathantneal Here it is: https://dl.dropboxusercontent.com/u/46814417/svgtest/index.html

[afram]

@jonathantneal I should add. I found that using styles inside of my index.html gave me odd and poor results when using your polyfil (before it became symbols). Have you tried externalising your CSS?

[jonathantneal]

Doh, we’re referencing the wrong SVG!

[afram]

@jonathantneal :-)

[jonathantneal]

Resolved with 3ac4279

Have fun!

[afram]

@jonathantneal sweet, works a treat, thanks!

[intterra]

Thanks, works great.