Icons as SVG in Edge

[PJackson]

Hi,

I've built a set of icons and I'm saving them as individual SVG files for use as background images in web browsers.

I've tried all the different export settings for SVG and tried aligning my graphics to relevant pixel boundaries but the rendering at small size (18px x 18px) is still not great in Edge.  They look better in Chrome.

I know this might be an Edge issue, but I feel it worth asking here, just in case there is something simple I can do in Designer to help.

Any ideas?

Thanks Peter

[Old Bruce]

I don't have any tricks that you probably haven't already tried other than turning off Move by Whole Pixels that can cause problems if things aren't pixel aligned at the start. A piece of advice I got years back was "You might want to design your smaller sizes separately from your larger sizes" Although the example you show should look the same as it is extremely simple, maybe try from 18 x 18 and scale up?

[firstdefence]

The smallest icon looks odd in the png file and the third from the left is also off. In fact the only one that looks ok is the largest one.

[PJackson]

7 minutes ago, Old Bruce said:

I don't have any tricks that you probably haven't already tried other than turning off Move by Whole Pixels that can cause problems if things aren't pixel aligned at the start. A piece of advice I got years back was "You might want to design your smaller sizes separately from your larger sizes" Although the example you show should look the same as it is extremely simple, maybe try from 18 x 18 and scale up?

That's sound advice.  For this simple icon, I tried setting my grid to 18*18 and designing to that, but it didn't seem to help.

[PJackson]

3 minutes ago, firstdefence said:

The smallest icon looks odd in the png file and the third from the left is also off.
 

I know! Edge doesn't seem to make any decent attempt to even anti-alias the svg