Steps to reproduce
SVG icon is blurry in EDGE and IE11
I used the img tag or simply adding the svg inline.
If you open my file in edge or IE11, you will see that the minus icon is not crisp and is a bit blurry. I posted a zip with the index.html and a photo illustrating what is my desired result and what I am getting here.
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Ibrahim O.”
Changed Assigned To to “Rick J.”
Changed Assigned To to “Bogdan B.”
Changed Assigned To from “Bogdan B.” to “Rossen A.”
Changed Status to “Confirmed”
I have same problem on win7 ie11.
When svg is centered in width of 101px, borders are blurry. I can fix it with margin-right 1px for centered object, but when I change browser width, problem is back.
Yes, please round (floor) centered svg elements like Chrome does:
Is there a workaround, other than not using SVG at all?
As far as I understand this problem occurs when SVG has fractional offset, which is unavoidable in almost any non-trivial layout.
When will the fix ship? I just realize that this could mean we can’t use SVG until IE11 and/or W7 are eol because “won’t fix IE11, must die, move the web forward, blah” which effectively holds the web back. yh.