SVG On Canvas Black Lines Look Grey?

Question

I have created a grid with just basic lines in illustrator and saved as SVG. I then am loading that svg into a html canvas of exactly the same size as the svg.

However no matter what i do the black lines on the canvas svg look grey, in fact the odd one or two is black, but the others look like they are being anti aliased.

I don't want the canvas to do that, i need the lines sharp and black, not grey! They look fine in illustrator, after i turned off anti-alias.

Does anyone know how to prevent the canvas doing that? I am using fabric js

That claim needs proof. Where's the example jsbin/jsfiddle/SO-runnable-code? — Mike 'Pomax' Kamermans, Nov 06 '14 at 16:50
there is no code to run, the svg is made in illustrator and is simply loaded to the canvas by fabric.loadSVGFromURL . — Glen, Nov 06 '14 at 16:56
So show that. Illustrator clearly generates an SVG image that is loaded in, and you can make a jsbin that uses fabric and then loads that file in the same way. — Mike 'Pomax' Kamermans, Nov 06 '14 at 16:58
never find i figured its to do with how the pixels are rendered. quite easy to solve — Glen, Nov 06 '14 at 17:40

score 1 · Answer 1 · edited May 23 '17 at 11:56

You can turn off anti-aliasing by using the following property:

shape-rendering="crispEdges"

It can be a style attribute, or you can specify it in CSS. You will need to edit the svg, or your CSS. You can't set this in Illustrator.

This will work fine for rectangular grids, but curved or angular lines will look worse. of course.

You can also avoid anti-aliasing by being careful where you place your lines. See the following answer for more info on that.

https://stackoverflow.com/a/23376793/1292848

SVG On Canvas Black Lines Look Grey?

1 Answers1