Text converted to path renders 'pixelated' in webbrowser when loaded as SVG

[jdp]

I make a new file in Inkscape with some text and save this file (hello_world_text.svg)
I select the text and do Path --> Object to Path. I save this file (hello_world_path.svg)

When I load both files in a webbrowser (tested on latest Chrome and Firefox) the path-file is rendered differently and wrong: It looks blocky / pixelated.
What am I doing wrong?

See the attachments for a demo of the problem

[Moini]

Is the font with the font weight 300 installed and accessible to the web browser where you look at the svgs? I see differences due to the font weight. No pixelation. Can you confirm that it's the font weight that is different for you, too?

[brynn]

In the html file, all of them are images for me, all SVG files.  The text is identified as an image (SVG), not text, and I don't see the text cursor when mousing over any of them.  (This is with Firefox quantum 57.)  I did expect to see the text cursor, and not sure why it doesn't show up on the real text examples.  (Possibly a misunderstanding on my part.)  Since I'm on Windows, I already have Calibri font installed.   (At least I didn't install it separately, so I assume it came with Windows.)

I see a slight change in the text (which is hard to describe) when mousing over the 3rd example.  But nothing looks pixelated, even at 300% zoom.  Here, let me make a screenshot.

[jdp]

...and I don't see the text cursor when mousing over any of them.

I think that is just because the file is included with an <img>-tag. If you open the file in a seperate tab you can select the text (only the _text-version offcourse)

I see a slight change in the text (which is hard to describe) when mousing over the 3rd example.  But nothing looks pixelated, even at 300% zoom.

To clarify some things:
The _text-version looks the best in my browser. The font is on my system and is used to render this version live in the browser.
The _path-version looks almost the same but is a little pixelated (best seen in the mouse-over demo).
I could just use the text-version but since this font is not available on, for example a mac, I want to use the path-version to be sure it works in all environments..

I agree that when I look at a very big version of the path-file that it looks perfect, but when included in my html-file and resized (in this case to a height of 30px by doing <img style='height:30px'>) the text version is rendered in a better quality.

[brynn]

In my screenshot do you see the same effect that you're seeing on your screen?  Can you show us what you're seeing, so we have an idea what you mean?

I would definitely suggest using the text as path, and for exactly the reason you mentioned.

It seems like at a certain zoom level, out the corner of my eye, I see one or 2 areas of pixelation, no bigger than 5 px square area.  But when I stop to focus in, it's gone.  I'm not sure if it's something on the screen, or just my eyes (which could use a slight correction, to be honest).

Oh yes, I do see a difference if I zoom down to 30%.  The text-text is slightly darker, and the path-text seems bit thinner or lighter.  But if you don't have both on the same page, I doubt if anyone would notice.

Mostly the text looks fine to me as paths.  You could always add a tiny stroke, to try to make up for that appearance.  Like 0.1 px or even 0.01 px ? But Inkscape can't fix it if the problem is with a browser.

[brynn]

When I place the 2 texts on top of each other, and change one to red, and then zoom in as far as Inkscape can go (25600%), I don't see even a fraction of a pixel difference.  Not even the expected anti-aliasing anomaly, that you see if you place, say 2 circles on top of each other.  I wonder if the real text might have some different anti-aliasing than the paths?  Whether it gets it from Inkscape or the browser, maybe there's a slightly different formula?  Or something like that?

[jdp]

I agree, when you look at a big size the path-version looks perfect (seems the same quality as the text-version). But in my demo they do differ (at 30px height)

I made a screenshot and discovered what happens on pixel level:
The text-version uses multiple colors to render the font while the path version only seems to use black and gray.
See the attachment.

Any idea what can be done about that?

[Moini]

Ah. So it's an aliasing thing with the browser. You'd need to ask Mozilla about that ... :-/