Border Blur in SVG (Raphael.js)

Question

I am working on a web editor where you can drag and resize elements. I had a problem with displaying borders and 1px elements: instead of displaying a pixel into a pixel (for example, a solid 1px line), I got a blur line.

I found that if I use consonants with .5 at the end (e.g. 10.5, 124.5) and integer sizes, everything will be perfect.

Here are some examples. The element before I changed its coordinates:

And after (with ".5" at the end of each and integer size):

The question is, how can I get Raphael.js to display everything sharp?

Answer 1

I'm not sure how to do this in Raphael, but tiny CSS can help you:

.your_lines { shape-rendering: crispEdges; } 

This basically disables line smoothing, and lines that are not horizontal or vertical may not look very pretty.

But, probably, you should stick to adding .5 to the coordinates of the lines, because the browsers do what they are told: the line is at the exact coordinates, and the stroke is colored on both sides of the line, half the pixels here and half the pixels there.

Answer 2

In these links you indicate what happens with integer coordinates, and why +0.5 edges were blurred (with good images !!):

• http://diveintohtml5.info/canvas.html#pixel-madness
• http://kilianvalkhof.com/2010/design/the-problem-with-svg-and-canvas/

You can avoid +0.5 :

  SVG_Area.setAttribute ("viewBox", "0.5 0.5" + width + "" + height);

or wrapper:

  function fiXY (x) {return parseInt (x) + 0.5;  }

 var rect = document.createElementNS (SVGobj.svgNS, "rect");
 rect.setAttribute ("x", fiXY (x));
 rect.setAttribute ("y", fiXY (y));

or:

  SVG_Area.setAttribute ("shape-rendering", "crispEdges");

which affect all the shapes in your SVG image ....

Answer 3

Based on @gavenkoa answer you can do this with Raphael :

 var paper = Raphael('#container'); if (Raphael.svg) { paper.setViewBox(0.5, 0.5, paper.width, paper.height); } 

Pay attention to the Raphael.svg check, as you should not apply a 0.5px offset to IE <= 8 (where VML is used).