SVGs blurry on Internet Explorer

Hi,
I’ve an interactive responsive infographic displaying perfectly in all browsers except IE and Edge (Microsoft). I can change the whole work with bitmaps but I want to use SVGs because they will scale perfectly infinitely and they look very well in the best display I can have :slight_smile: Any ideas?
Thank you.
https://cameira.xyz/cmvm/emir11/emir11.html

1 Like

Can you see if the SVGs look smoother if you change the ‘scale’ to 1.0? It looks like they are setup as scaleX(1.01604) scaleY(1.00573) You can adjust that property in the Metrics Inspector.

Hi Daniel,
Thank you for your answer. Wondering where are you seeing that scaleX… In the Metrics Inspector it’s scale 100% but the whole infographic is made responsive… So that could change depending on the display right? And I’m reading that IE can’t re-render SVGs properly :frowning:
Any ideas, please?
Thank you.

One thing you can try is instead of using “zoom contents” for the flexible layout setting (which is transform:scale() under-the-hood), you could uncheck this for your containing group. Then all items inside should have all pins turned off and the scale settings turned on (again, without zoom contents). This would make them scale by width/height and perhaps render correctly.