CODEWITHSUNDEEP
htmlsvg
Ted Smith
Ted Smith

Reputation: 63

svg path border blurry

I'm having trouble with an svg rounded button image. When I draw the image with a border of 2px (using svg path), the border is blurry. I'm offsetting the position by .5 to try to prevent the blur but that only seems to work with 1px border. Appears blurry in both FF and Chrome.

Also, I noticed that drawing using svg rect with rounded corners, border 2px, doesn't have the same problem. The lines are sharp.

<svg width="225" height="50" viewBox="-1.5 -1.5 225 50"><path d="m 103 0 l -93 0 c -5 0 -10 5 -10 10 l 0 22 c 0 5 5 10 10 10 l 93 0 z" stroke="#000" stroke-width="2px" fill="#fff" /><path d=" m 103 0 l 93 0 c 5 0 10 5 10 10 l 0 22  c 0 5 -5 10 -10 10 l -93 0 z" stroke="#000" stroke-width="2px" fill="#999" /></svg>

Upvotes: 0

Views: 1939

Answers (1)

Peter Collingridge
Peter Collingridge

Reputation: 10969

Change the viewBox to "-2 -2 225 50" and it looks fine.

Upvotes: 2

Related Questions