Browser / Feature Compat Table

[jonathantneal]

Browser / Feature Compat Table

[jonathantneal]

That’s a good start.

[twiro]

A kind of extensive/complete list like this would be super useful!
Especially when directly integrated into the readme, as propose by David.

I used SVGForEverybody in two smaller projects recently and didn't get any complaints about icons not showing up, so I guess it's working more solid than I expected ;)

From my personal tests I can confirm that SVGForEverybody works as expected (renders SVG graphics from an external SVG sprite) in the following settings:

• Safari 5.1 (OSX 10.6.8 - Snow Leopard)
• Safari 8.0 (OSX 10.10.3 - Yosemite)
• Firefox 38 (OSX 10.6.8 - Snow Leopard, OSX 10.10.3 - Yosemite)
• Chrome 38 (OSX 10.6.8 - Snow Leopard)
• IOS Safari 7.1
• IOS Safari 8.1

@davidhund - have you done any more work on this? Would be great, if you could update your list above.

Maybe others could share some quick test results too?

[davidhund]

@twiro Thanks Roman (*hey, a Symphony CMS user! 😄 *)

I'm afraid I have not done any more work on this. But I understand SFE works correctly in the browsers you've tested? If you could also check the ‘native’ support for SVG and SVG Fragment Identifiers that would be neat. I could then update the comment (table) above with your browser info.

@jonathantneal What do you think of adding a compat table such as the above to the README? That way people could update it through a PR instead of adding separate comments 😉

[twiro]

@davidhund - Ah, Symphony! I knew I had seen your profile pic elsewhere around :)

I won't find time for more extensive tests til the end of the week, but I just stumbled across this resource, that already includes some of the missing information:

• http://fvsch.com/code/svg-sprite/

Regarding the basic funtionality of SVG Fragment identifiers I think it's safe to rely on the list provided by caniuse.com

• http://caniuse.com/#feat=svg-fragment

@jonathantneal 👍 for adding a (more complete) compat table to the readme.

[fvsch]

Hi. In my experience with <svg><use xlink:href="url#id"></use></svg> there are three kinds of support that should be tested:

1. Referencing a symbol in a SVG element at the start of the HTML page.
2. Referencing a symbol in a SVG element at the end of the HTML page.
3. Referencing a symbol in an external SVG element (that the browser then has to fetch).

Unless I'm mistaken, SFE polyfills the third use case. Browsers that don't support it include some old WebKit versions, and IE 9-12 (including Edge, at least the current preview version). SFE also inserts <img> tags referencing PNG files (that you have to create yourself) for IE8–not sure how that would be reflected in a compat table.

We've used svg4everybody on a few projects at work. At least 2 are in production now. Icons are broken without JS in IE, but those projects have more breakage without JS anyway (I'm trying to push for more progressive enhancement but it's a tough sell). We haven't had major issues, but they're not projects with comprehensive testing and efficient feedback channels, so that doesn't prove much. We had one big issue with icons not showing up in Safari 6-7 (they were okay in Safar 8) on mobile and desktop, but after much investigation it turned out to be an awful CSS bug in WebKit, and nothing to do with SVG or svg4everybody.

On one project we created black (or sometimes white) PNG images for IE8. It can be a bit tricky to dimension them correctly, especially when you have <svg width="20" height="20">… and you resize the icon using CSS. You will need to test and try to fix issues in IE8. In the end, that project had no official IE8 support so after a first round of tests and fixes for IE8, it's likely that new IE8 issues have cropped up, some fallback icons are missing, etc. Another project had no official IE8 support and we didn't test at all.

[fvsch]

By the way, you write that OSX Safari 7 doesn't have support for fragment identifiers, but a quick test in BrowserStack with Safari 7.0.6 shows that it does.

[jonathantneal]

A compatibility table is being added in 2.0. Please review https://github.com/jonathantneal/svg4everybody/tree/feature/2.0.0#implementation-status

[jonathantneal]

This is now in 2.0