Question

I’m creating stock charts with svg and I’m having a problem when I set the stroke-width of my path elements to 1. Instead of making the lines more narrow, it just makes it the same size as stroke-width:2 but slightly transparent. I can’t post an image of it though because I don’t have enough reputation points…

My svg tag looks like so:

<div style="height:300px; width:400px; overflow:hidden">
<svg style="position:relative" height="10000" width="10000" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>

And I’m adding path elements dynamically using javascript/jquery:

var shape = document.createElementNS("http://www.w3.org/2000/svg", "path");
$(shape).attr({"d":"...",
               "fill":"none",
               "stroke":color,
               "stroke-width":"1"});
$("svg").append(shape);

I left out the value for the path’s d attribute as it was kind of long. Also, color is a string variable that is determined before hand as either “green”, “red”, or “black”.

Is there something wrong in my code that is causing this or is it a different issue?

Answer 1

This is probably due to the anti-aliasing applied in most SVG implementations. When the line width goes near or below 1, antialiasing makes it so that half-covered pixels are rendered partially opaque. With the default transforms and viewport in place, your one-pixel line probably sits exactly on the border between two physical pixels, so they’re each half covered, leading to an overall 50% transparency. With a black line on a white background, this yields a 50% gray.