3 ms·
> Why does text rendering in svg elements always look slightly off? The rendering of text is pixel exact between HTML and SVG in every modern browser I've test
by jancsika 4y ago
> Why does text rendering in svg elements always look slightly off?
The rendering of text is pixel exact between HTML and SVG in every modern browser I've tested with.
What you might be noticing is the distance between consecutive lines of text. HTML can flow text in a rectangle and automatically handle whatever inter-line settings were given in CSS (or the browser default).
SVG cannot flow text-- the user has to specify an x,y for each line. My guess is that it's difficult to figure out how to replicate whatever the HTML algo is for interline spacing of text for arbitrary fonts.
Additionally, the SVG library would need to manually handle word wrapping.
Just with those two you can easily end up in the uncanny value of SVG, especially when the user starts zooming in or out.
- mhink 4y agoIf you're confident that you'll always be dealing with a browser environment, this is a situation where embedding HTML in SVG via <foreignObject> is a pretty reasonable approach, IMO.
- gernb 4y agowhat do you mean by "pixel exact". svg definitely renders differing amounts of pixels on my different devices. one with dpr 2.0, one with dpr 3.0, one with dpr 1.25
- iudqnolq 4y agoThey mean that a specific browser version on a specific device renders text the same regardless of whether you use html or svg.