Well, SVGs should – in theory – be scalable without any negative effect, what browser/platform are you referring to here?

Indeed, in theory. In practice, since we're still using ancient ;) technology of pixel-based screens, and so scaling small SVGs up by less than 200% doesn't produce perfect-looking results.

For example, consider the 'upload' icon. We can blow it up losslessly to a large size:

Here's actual size, 24x24px:

It doesn't look so neat when enlarged to 110%:

The shapes get a little blurry. How bad the effect is depends on the icon; some look just fine, some look horrible. This one is kind of in the middle.

Easy to see why if you overlay the pixel grid on the icon – which is how it will be shown on an actual screen. This is assuming non-Retina screens, but the effect on those is the same, just less pronounced (every normal pixel there is split into four, giving us 2x more details).

(click the images to enlarge)

At the actual size, 24x24px, the vertical/horizontal lines of the icon align perfectly with the grid, which will produce nice crisp shapes. (As crisp as we can get.)
But at 110%, 26x26px, they don't, which forces the icon to be rendered using grey pixels at the edges rather than just black and white, producing blurry shapes.

So it's the anti-aliasing of SVGs (below a certain threshold) on non-retina displays.
I can confirm that on a retina desktop display this is not an visual issue.

Wondering about the browser differences using different SVG libraries – with pixel-based image formats (Gif, PNG, JPEG) differences has long been a surprising source of pain.

Yes - the source of the issue is most of our icons are hand-designed to snap to the 24px grid - which makes them look really crisp on regular displays. I'm not sure the outline needs to be 1.1em (we rarely change the font size in OOUI), but if it must we should shrink it back down again for the icons.

In T132864#2223987, @Esanders wrote:

I'm not sure the outline needs to be 1.1em (we rarely change the font size in OOUI), but if it must we should shrink it back down again for the icons.

We can also make it only change the font size of the label, but not the icon.

Was thinking about that option myself as first reaction, one issue is, that everything scales up with the 1.1em so also the height of the clickable area and so on.
Next possibility would be to scale icon back down, but with the em scaling it's a rat race, that doesn't really seem successful en large.

Change 284481 had a related patch set uploaded (by DLynch):
OutlineOptionWidget mediawiki theme: icons the correct size

https://gerrit.wikimedia.org/r/284481

Original:

That patch:

(Changing the font-size on just the label affects the layout:

@DLynch Doesn't that take us on the same unresolved sub-decimal rodeo again in IE 9-11 pointed out at T102364?

@DLynch Will check it out on my non-retina Windows machine.

Change 284481 merged by jenkins-bot:
OutlineOptionWidget themes: icons the correct size

https://gerrit.wikimedia.org/r/284481