SVG icon is blurry

Confirmed Issue #7758365 • Assigned to Rossen A.

Details

Author
Stephen B.
Created
Jun 1, 2016
Privacy
This issue is public.
Reports
Reported by 7 people

Sign in to watch or report this issue.

Steps to reproduce

Hello,

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.

Thank you

Attachments

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.

    https://jsfiddle.net/mrakjos/u572Lwvb/18/

  • Yes, please round (floor) centered svg elements like Chrome does:

    unsharp svg

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

You need to sign in to your Microsoft account to add a comment.

Sign in