While using Inkscape, I saw that the measurements were all numbers with at least three decimal places. What is wrong with just using whole numbers? I do a lot of math when writing or drawing images.
I am currently working on remaking .png images into .svg images. The boxes I am making have text in them with the font-size of 22, and the boxes surrounding them are to be 4 over and under the text and 8 left and right of the text.
If one line (stroke-width: 2) is coming into or out of the box, its y would be 15 from the top (svg y) or bottom (Inkscape y) since the box height is 30 (22+(4*2)). If two lines the ys would be 13 and 17 to the respective y; three lines would be 10, 15, 20.
It is frustrating when I look at the numbers for x and y used by Inkscape in my text editor. I can not figure out how x of 30 in my original file becomes 32, and how lengths get so scewed between what I see in my browser and in Inkscape. The two images show the differences.
I did the math and it got scewed somewhere. My whole number xs and ys being shifted to numbers with three decimal places does not help me figure things.
@Moini The thread was locked because @Lady_Aleena had only posted one time and so it was held for moderation. Any time you see a locked post like this, it's probably a new user.
I think that maybe both your viewers use a different sans-serif font. Try changing it for a real font name, like FreeSans, or OpenSans, or Arial, and check if then there are still differences.
I did as you suggested and changed the font to arial. It didn't change much (the first two images). So I thought, maybe it I do an edit in Inkscape, Inkscape would take control of the svg and things might look more consistent. So I changed the box size for Constantine and the box got wider, but in the browser it is too wide now (the second two images). Inkscape didn't even change my y coordinates to match itself. They are still going from 0 to 222 from top to bottom in the svg. The only change in the code that I saw was that Inkscape added its sodipodi:namedview and added a whole lot of new lines, lots and lots and lots and lots of new lines.
The other weird thing is that in both the browser and in Inkscape, I have the images at 100%, and even that looks different between programs.
I cropped the images this time. I hope you didn't need the full screen again.
I agree the difference between the text is probably what Moini said, they are using different fonts.
I just wanted to answer about the whole number thing. There are at least 2 ways I can think to approach the problem. One would be to make sure that you always place your objects on whole number values (px or whatever units you want to use). That can be accomplished easily with Snapping. http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Snapping.html So you could set up a grid using whole number values (such as a pixel grid) or you could set up guides at whole numbers. (Or it could be accomplished not so easily by setting the X,Y coordinates for each and every object.)
Or.... Hhmm, I thought there was a way to set how many decimal places you want in Inkscape, which I assume would include no decimal places. But I can't seem to find the setting. So I must be thinking of something else..... Maybe I'm thinking of optimizing the file, which includes removing extra decimal places, to help make the file smaller.
I figured it out! I have NO unit of measure on my text font-size. It did not have pixel, point, pica, millimeter, centimeter, inch, or em. The font was just 22, and my browser made it really small. So when I added px to my font-size: 22; the images matched! I am so sorry I did not catch that earlier. The boxes are in the same poisitions I put them in the svg, so I knew it had to do something with the font. It was not the font itself, it was the font-size.
Every other measurement in svg does not seem to need units added to them such as x, y, width, or height; but font-sizes appear to need a unit of measure. Inkscape assumed my font-size was 22px, however browsers did not. I checked both Firefox and Chromium, and neither showed the font-size as 22px. The font-size was as you see in my previous images from the browser in both of those browsers.
So lesson learned here, add a unit of measure to font-size for svg text to appear the same in browsers and Inkscape.
Edit
I did another experiment with font-size. I added font-size="22" to my text tag. That scaled as the other measures did. It appears the only time the font size does not scale is when it is used in the style attribute or in a style sheet. The font-size I was getting was the default font-size for the browser that is 16px.
Beginners' Questions What does Inkscape have against whole numbers?
Inkscape.org
While using Inkscape, I saw that the measurements were all numbers with at least three decimal places. What is wrong with just using whole numbers? I do a lot of math when writing or drawing images.
I am currently working on remaking .png images into .svg images. The boxes I am making have text in them with the font-size of 22, and the boxes surrounding them are to be 4 over and under the text and 8 left and right of the text.
If one line (stroke-width: 2) is coming into or out of the box, its y would be 15 from the top (svg y) or bottom (Inkscape y) since the box height is 30 (22+(4*2)). If two lines the ys would be 13 and 17 to the respective y; three lines would be 10, 15, 20.
It is frustrating when I look at the numbers for x and y used by Inkscape in my text editor. I can not figure out how x of 30 in my original file becomes 32, and how lengths get so scewed between what I see in my browser and in Inkscape. The two images show the differences.
I did the math and it got scewed somewhere. My whole number xs and ys being shifted to numbers with three decimal places does not help me figure things.
Sorry, someone locked this thread - I don't know why. I unlocked it now, hope that was correct.
Can you share the SVG file, LadyAleena?
Sure. And the .png file I am trying to recreate in svg.
@Moini The thread was locked because @Lady_Aleena had only posted one time and so it was held for moderation. Any time you see a locked post like this, it's probably a new user.
Ah, thanks, @doctormo - so it looks different for first post vs. first thread. A bit confusing.
@Lady_Aleena This is what it looks like in my web browser:
http://i.imgur.com/BQ2CgtW.png
and this is in Inkscape:
http://i.imgur.com/iNQ7LS1.png
They look the same for me.
Could it be that the font you are using is inaccessible to one of the programs you use to view the file?
Sorry, not the same... But both look off.
I think that maybe both your viewers use a different sans-serif font. Try changing it for a real font name, like FreeSans, or OpenSans, or Arial, and check if then there are still differences.
Liberation Sans is a good match (but one foundry's 22 is another's 18).
The rectangle dimensions may need to be geometric not visual. The attached svg has 28px tall rectangles with 2px strokes (total 30px object heights).
Have a nice day.
TD
I did as you suggested and changed the font to arial. It didn't change much (the first two images). So I thought, maybe it I do an edit in Inkscape, Inkscape would take control of the svg and things might look more consistent. So I changed the box size for Constantine and the box got wider, but in the browser it is too wide now (the second two images). Inkscape didn't even change my y coordinates to match itself. They are still going from 0 to 222 from top to bottom in the svg. The only change in the code that I saw was that Inkscape added its sodipodi:namedview and added a whole lot of new lines, lots and lots and lots and lots of new lines.
The other weird thing is that in both the browser and in Inkscape, I have the images at 100%, and even that looks different between programs.
I cropped the images this time. I hope you didn't need the full screen again.
Welcome to the forum!
I agree the difference between the text is probably what Moini said, they are using different fonts.
I just wanted to answer about the whole number thing. There are at least 2 ways I can think to approach the problem. One would be to make sure that you always place your objects on whole number values (px or whatever units you want to use). That can be accomplished easily with Snapping. http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Snapping.html So you could set up a grid using whole number values (such as a pixel grid) or you could set up guides at whole numbers. (Or it could be accomplished not so easily by setting the X,Y coordinates for each and every object.)
Or.... Hhmm, I thought there was a way to set how many decimal places you want in Inkscape, which I assume would include no decimal places. But I can't seem to find the setting. So I must be thinking of something else..... Maybe I'm thinking of optimizing the file, which includes removing extra decimal places, to help make the file smaller.
I figured it out! I have NO unit of measure on my text font-size. It did not have pixel, point, pica, millimeter, centimeter, inch, or em. The font was just 22, and my browser made it really small. So when I added px to my font-size: 22; the images matched! I am so sorry I did not catch that earlier. The boxes are in the same poisitions I put them in the svg, so I knew it had to do something with the font. It was not the font itself, it was the font-size.
Every other measurement in svg does not seem to need units added to them such as x, y, width, or height; but font-sizes appear to need a unit of measure. Inkscape assumed my font-size was 22px, however browsers did not. I checked both Firefox and Chromium, and neither showed the font-size as 22px. The font-size was as you see in my previous images from the browser in both of those browsers.
So lesson learned here, add a unit of measure to font-size for svg text to appear the same in browsers and Inkscape.
Edit
I did another experiment with font-size. I added font-size="22" to my text tag. That scaled as the other measures did. It appears the only time the font size does not scale is when it is used in the style attribute or in a style sheet. The font-size I was getting was the default font-size for the browser that is 16px.
Maybe this will shed more light:
http://wiki.inkscape.org/wiki/index.php/Units_In_Inkscape#Generic_SVG
Have a nice day.
TD