CODEWITHSUNDEEP
javascriptcsssvg
Phuoc Do
Phuoc Do

Reputation: 1344

Prevent svg border gradient color

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:

enter image description here

Upvotes: 0

Views: 252

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

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

Upvotes: 2

Related Questions