Inkscape Community
Help Using Inkscape => Inkscape Beginners' Questions => Topic started by: jdp on December 10, 2017, 04:15:27 PM
-
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
-
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?
-
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.
-
...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.
-
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.
-
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?
-
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?
-
Ah. So it's an aliasing thing with the browser. You'd need to ask Mozilla about that ... :-/