SVG output Internet Explorer issues

[petervangennip]

When using dr-svg-sprites to create a sprite svg I noticed that IE 11/10/9 has issues with showing the correct svg. The output seems somewhat distorted. This has probably something to do with the compiled svg, as the original svg files in the image folders are showing correctly.

Any idea's where to look at?

http://i1256.photobucket.com/albums/ii500/pwavg/svg-destorted_zpse66a5a70.jpg

[phloe]

The sprite builder uses SVGO under the hood (to both read and compress the SVGs) - some of its plugins are very aggressive and can in some cases remove important information in the SVG resulting in garbled output... This is usually visible in all (or most) browsers when it happens though.

Would you mind copy/pasting the source of one of the SVGs into a comment here or a gist or something? Then I'll be able to test it out and get an idea of whats going on :)

[petervangennip]

This is the source of one of the svg sprites:

https://gist.github.com/pwavg/a5494a9266cc5bf94da1

The strange thing is that when I use REM as a cssUnit the preview.html is correctly viewed in Internet Explorer. The svg source remains distorted.

[phloe]

Oh - I meant to say the source of one of the source sprite elements (preferably one that gets garbled) - but the sprite output is also useful :)

But I can see that you're using clip-path which may play a role in causing the bugs...