search

drdk / grunt-dr-svg-sprites

Grunt plugin to create SVG sprites with PNG fallbacks at needed sizes
113 stars 19 forks source link

SVG output Internet Explorer issues #39

Open petervangennip opened 9 years ago

petervangennip commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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...