svg faceplate linework bleeding through text in SvgSwitch image

I am using an SvgSwitch widget. Each frame consists of a gray filled square with black text on top that has been converted to paths. Underneath each SvgSwitch there is some linework on the faceplate svg. I happen to support 4 themes for each module, each with its own faceplate svg.

All was working well for modules placed in a patch. But when viewing the module in the browser, sometimes the underlying linework was bleeding through the text on the SvgSwtich. But it was inconsistent. It depended on which theme was the default at the time the browser was first viewed. For two of the themes all was fine, but for the other two I was getting the bleed through. :thinking: Very weird. Especially odd was that the linework was not bleeding through the grey box in the widget except where text is placed.

I was mystified, but I figured there must be some difference between the faceplate svg files, and I eventually found it. The faceplate themes that had the bleed through needlessly had a fill assigned to the linework. The fill normally never appears, but for some reason, while viewing in the browser, the fill was bleeding through the SvgSwitch text (text that had been converted to paths).

So the fix was easy enough - simply remove the fill from the faceplate linework, and all works as it should.

I suppose this is a minor display bug in VCV Rack, but I am not sure I will bother reporting it. I don’t think there are many people incorporating text into SvgSwitch frame images, and there is an easy enough workaround.

But I thought I would share my experience, just in case someone else has something similar and miraculously manages to find this post!

2 Likes

Yep, the svg implementation has limits. The font thing might be hinting, or render at 100% and the scale filter not being fully anti-aliased, rather than a render. Could also be ttf render without hints for small font sizes, by locking to paths.