CODEWITHSUNDEEP
svgline
ozil
ozil

Reputation: 7117

How to remove blur from svg line

I have two line Line one is not smooth (blur). While line is smooth. How can I render it smooth. 

<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="10" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
  Sorry, your browser does not support inline SVG.
</svg>

Upvotes: 0

Views: 962

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

I don't quite understand your distinction between smooth and blur but you can use shape-rendering="crispEdges" to get rid of anti-aliasing on shapes.

<svg height="210" width="500" shape-rendering="crispEdges">
  <line x1="0" y1="0" x2="200" y2="10" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
  Sorry, your browser does not support inline SVG.
</svg>

Upvotes: 1

Related Questions