fluentui-emoji icon indicating copy to clipboard operation
fluentui-emoji copied to clipboard
verified publisher icon microsoft

SVGs were exported incorrectly

Open lloydjatkinson opened this issue 3 years ago • 4 comments

Hi,

Please look at these two example SVG's from the repo. SVG is meant to be scalable yet when zoomed in anti-aliasing is clear. The SVG's are currently are not usable. image

image

lloydjatkinson avatar Aug 12 '22 22:08 lloydjatkinson

That's because of filters. Filters are designed to work on raster images, so SVG is flattened before filters are applied.

Flat and High Contrast versions of icons don't include filters, so they are smaller, faster and scale better.

cyberalien avatar Aug 13 '22 07:08 cyberalien

Well that’s great and all but high contrast is for very different use cases and flat is well… flat. One of the points of these emojis is the 3D look.

lloydjatkinson avatar Aug 13 '22 07:08 lloydjatkinson

Thanks @lloydjatkinson - where are you viewing the SVGs and seeing these issues?

jasoncuster avatar Sep 07 '22 00:09 jasoncuster

Hi, although almost a year old issue, I do observe this anti-aliasing issue in almost all curved SVG paths. I'm currently viewing the first emoji in the asset list, 1st_place_medal_color.svg via the Microsoft Edge browser and I can see the jagged edges on the path.

For reference: image

Hope this provides some context to this issue.

sliptrixx avatar Jun 14 '23 05:06 sliptrixx