3 ms·
Possibly different subpixel antialiasing and hinting settings in the SVG renderer and for text outside of SVG elements. My hunch is that subpixel antialiasing
by planede 4y ago
Possibly different subpixel antialiasing and hinting settings in the SVG renderer and for text outside of SVG elements.
My hunch is that subpixel antialiasing and hinting is disabled for SVG elements. As withing SVG images you typically have some amount of vector graphics surrounding a few text elements, it could probably also look off if it was applied to the text parts of the image, but other shapes would be unaltered.
Technically you could trivially apply subpixel antialiasing for all kind of shapes within the SVG image. Possibly it's even possible to apply some hinting at limited scenarios (horizontal and vertical lines). I don't think any browser SVG renderer does any of this.
edit:
I tested this now with Edge on Windows, and I get subpixel antialiasing for both within and outside SVG. So maybe this theory does not hold up.
I do not get a pixel-perfect match however, but that could be because of subtle subpixel positioning of the text itself.
- jancsika 4y ago> I do not get a pixel-perfect match however, but that could be because of subtle subpixel positioning of the text itself. It almost certainly is because you're not putting them at the same position in the page. There's a hack to normalize the positioning of an HTML to match the x,y position of an SVG text, but I can't remember what it is atm. Edit: typo