Prevent svg border gradient color

Question

I notice that svg adds some gradient borders in very tiny pixels around elements. Here's the jsfiddle for it:

http://jsfiddle.net/XrkRT/

<rect x="1" y="1" width="1198" height="398"
      fill="none" stroke="blue" stroke-width="10" />

<g stroke="green" >
  <line x1="100" y1="300" x2="300" y2="300"
          stroke-width="20" fill="none" />
</g>

How do I draw solid color line and rect. It's hard to see with normal zoom. I take a screenshot and zoom it in pixlr.com. Here's the image:

Answer 1

That's antialiasing. You can turn it off with shape-rendering ="crispEdges" but be aware that any diagonal lines will look rougher.