How do I create pixel accurate graphics?

Asked by MarcinK on 2008-11-23

I need to create some graphics that I will export to bitmaps and will result in precisely 1 pixel wide lines at specific horizontal and vertical pixel coordinates. For example, a 1 pixel wide black rectangle outline starting at pixel (1,1) and ending at (1280,1024) How can I do that with InkScape?

Thank You,
Marcin

Question information

Language:
English Edit question
Status:
Solved
For:
Inkscape Edit question
Assignee:
No assignee Edit question
Solved by:
marcel
Solved:
2008-11-26
Last query:
2008-11-26
Last reply:
2008-11-24
mahfiaz (mahfiaz) said : #1

Use exact positioning and widths, and on exporting pay attention to exporting dpi and other values.

MarcinK (marcink-ieee) said : #2

This is exactly what I have been trying to do and I keep on getting the lines appearing in the incorrect pixel position, and also sometimes the lines are 1 pixel wide, sometimes 2 pixel wide.

Maybe there is something subtle I am doing wrong. Here are my steps.

Lets say I want a 100x100 bitmap with a 1 pixel square outline from 5,5 to 95,95.
1. I create a new document, go to 'Document Properties' and set Width and Height to 100 px, and 'Default Units' to px
2. I select the rectangle tool and draw a square of approximately the right size
3. I click on the "Select and Transform Objects" Tool (i.e. cursor pointer) to get access to the X, Y, W, and H parameters
4. I enter "X:5.000 Y: 5.000 W: 90.000 H: 90.000"
5. I open up "Fill and Stroke" properties and set Fill to none, Stroke Paint to solid black, and Stroke Style to solid 1.000px, square cap and join, 0% blur, 100% opacity

By this time, if I look back at the dimensions of the rectangle I created, instead of showing "X:5.000 Y: 5.000 W: 90.000 H: 90.000" like I have configured it, it has already changed on its own to "X:5.007 Y: 5.007 W: 89.986 H: 97.486", so I go back and set it again to "X:5.000 Y: 5.000 W: 90.000 H: 90.000"

6. I go to File/Export Bitmap, select 'Page', make sure that the source region is (0.000,0.000) to (100.000,100.000), set my bitmap size to 100x100 pixels, which gives me 90.00dpi, enter file name and export.

As a result I get a PNG file that has lines as follows (assuming coordinates start with 0,0 at top left):
1. a 2 pixel wide translucent (grayish) horizontal line from (5,7) to (94,8),
2. a solid 1 pixel wide horizontal line from (5,94) to (94,94), and
3. 2 solid vertical 1 pixel wide lines: (5,9) to (5,94) and (94,9) to (94,94)

I go back to the drawing and discover that the rectangle has once again changed its height on me to 87.486.

I would greatly appreciate someone helping me figure this out.

Thank You,
Marcin

pbhj (pbhj) said : #3

Performing 1-5 and then checking the placement and dimensions doesn't have any effect on those properties for me (Inkscape 0.46+devel, built Apr 6 2008; on Kubuntu Intrepid (8.10)).

Export is as expected and checking in GIMP I have exact same rendering in inkscape's-output raster as I do in GIMP's import of the SVG. No blurry lines or anything.

You should file this as a bug report, it doesn't seem to be just a question. Then also post your inkscape file and output raster for comparison.

mahfiaz (mahfiaz) said : #4

Bounding box by default (see preferences) is calculated not from line but
from stroke, so changing stroke width changes bounding box size. What the
second change is about, I don't know.
And the same for me, it works well giving expected results with no gray at
all.

Best marcel (marcel-tippmann) said : #5

MarcinK:

1. Turn on your grid and do the following setting:
SpacĂ­ngX = 0.5px
SpacingY= 0.5px
Major grid line every= 2 lines

2. If your outer rectange has a 1px stroke, make sure the path snaps to the 0.5px. You must turn on the "View->ouline mode" to do this.
When drawing 1px lines, their path (outline mode) must also snap to 0.5px grid.
When switching back to normal mode you can see that the strokes fill exatly the 1-px-grid spaces

3. When exporting the drawing: I usually select a rectangle with no stroke! This rectangle must snap to an 1px grid. Very important, it will influence your result!!!

Hope it helped you..

MarcinK (marcink-ieee) said : #6

Beautiful!

Marcel, setting up the grid worked like a charm.

Thank You,
Marcin

MarcinK (marcink-ieee) said : #7

Thanks marcel, that solved my question.

pbhj (pbhj) said : #8

It's still weird to me that I followed your instructions and it worked fine ...

mahfiaz (mahfiaz) said : #9

pbhj, as I mentioned above the bounding box calculations (and therefore the width/height and position) are adjustable from preferences. If you set the bounding box to line (as opposed to stroke), it may behave different.

MarcinK (marcink-ieee) said : #10

Hello,

The new title is wrong for this question. My question had nothing to
do with dpi setting, but was referring to creating whole-pixel
accurate graphics. Please change the title (or 'summary') of this
question back to what it was.

Thank You,
Marcin

On 2009-May-15, at 0:38 , sionpatho wrote:

> Your question #52283 on Inkscape changed:
> https://answers.launchpad.net/inkscape/+question/52283
>
> Summary changed to:
> how do i increase the dpi from 72 to 300 in the existing diagram
> without pixelation
>
> --
> You received this question notification because you are a direct
> subscriber of the question.