Dealing with blurry lines

[Kevin45]

My whole drawing is done with lines.  Because SVG is not guaranteed to align with pixels things get blurry unless I add .5 to every x coordinate to every line.

I remember in Raphael I also had to transform the entire by .5 to make lines crisp. (This makes a huge difference when drawing 1px wide lines)

Is there a best practice in dealing with this?  

I'm I always just having bad luck or are lines with integer coordinates always drawn between pixels?

[Ian]

Hard to tell without an example, other than adding the 0.5, you could try crispEdges for shape-rendering...

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering

[Thomas Shinnick]

If I remember correctly (it's been awhile since I looked at that code) I ended up surrounding everything with a transform "translate(0.5,0.5)".  I did that to verify that that was the problem.  It was very reassuring to see the one-shot "no, I'm not so confused" visual check.  Later I built the 0.5 into final calculations...

[Kevin45]

UPDATE:

Thanks to suggestions here for helping me track this down I think I found the best solution to my problem.

From a posting at this URL

https://coderwall.com/p/ufldzw/for-crisp-edges-use-anything-but-crispedges

What "crispEdges" does is basically it disables anti-aliasing. The reason one pixel lines look blurred is that SVG, just like Canvas, considers whole numbered coordinates to fall in between pixels. If you draw a line with a 1px wide stroke on a half coordinate it will look sharp even without "crispEdges". See the example, the first line will produce a two pixel wide gray line due to anti-aliasing, but both the other lines will produce a sharp one pixel wide black line.

So if i use cripsEdges, it will make circles and diagonal lines look bad because it disables anti-aliasing, but the anti aliasing is making horizontal/vertical lines and rectangles look bad because whole number coordinates are between pixels and will be anti-aliased for no good reason.

So my strategy would be to identify all the rects and lines that are horizontal/vertical and add .5 to their coordinates and don't touch shapes like circles and diagonal lines.

[Marco Dings]

Hi Kevin,

Lacking experience with raphael i have to go out on a limb.

To me it seems that the "transform .5" is more of a lucky coincidence. SVG are by design set up to be rendered by
the browser and by design there is no set relation between the coordinate system and the pixels to align them on the display.
That is to say its governed by the viewbox and the width and the height. By choosing these wisely one probably can tweak any svg to an optimal presentation on a predetermined screen.

Explantion: http://sarasoueidan.com/blog/svg-coordinate-systems/
Demo:        http://sarasoueidan.com/demos/interactive-svg-coordinate-system/index.html

To be "pixel perfect' you would want to make sure the width and the height of
your svg match your "screen" ( no resizing in css etc).
Because lines / shapes are drawn on the exact coordinates within an svg,
and the "width" of the stroke is applied equally to the "left" and the "right" in
svg1.1 ( there are new options comming in svg 2) a "single pixel" is smeared,

This can be compensate with viewbox x and y by setting the x and y to 0.5

Marco

Be like me, be Carbon free - don't print this and save a tree

IMPORTANT: The contents of this email and any attachments are confidential. They are intended for the named recipient(s) only. If you have received this email by mistake, please notify the sender immediately and do not disclose the contents to anyone or make copies thereof.