search

axe312ger / responsive_svg

Provides a twig filter for rendering SVG stacks with cross-browser responsive resizing for Drupal 8.
https://www.drupal.org/project/responsive_svg
2 stars 2 forks source link

Add custom polyfill for IE #2

Open axe312ger opened 8 years ago

axe312ger commented 8 years ago

Every IE browser, also Edge, do have the problem that linked external svg's are not supported.

One workaround was to render the whole svg stack at the bottom of the website. But with this technique, the icons can not be cached and will be loaded on every request.

svg4everybody is a possible polyfill, it replaces the linked svg's with inline svg's while the page is loading. But it turned out that this script is a performance killer and crashes IE 10 and below.

Suggested solution

Create a polyfill which detects browser which do not support linked svg's. For these browsers, load the svg-stack via ajax and attach it to the bottom of the page. This should be a way smaller performance impact than svg4everybody is and allows the browser to cache the whole stack file.

zcei commented 8 years ago

:+1: We could use battle-proofed browser detection libs, and a normal XMLHttpRequest for async svg-stack loading.

axe312ger commented 8 years ago

I think a test for linked external svg content is not present in modernizr. See github.

Sounds like a nice challenge to create a as small as possible but feature complete implementation of a new polyfill lib.

axe312ger commented 8 years ago

I did some screenshots tests via crossbrowsertesting and http://haz.io/. IE Edge down to IE 9 return true for all svg tests.

zcei commented 8 years ago

Is it kind of a try and it fails way of detection, or can it be determined by any missing API method?

axe312ger commented 8 years ago

I think it must be try and fail, I see no other way.