Lines in SVG not the same size despite crispEdges - html

Question

I have an SVG image that is being created and enhanced programatically. After creating it, it is drawn on a Canvas. However, the lines do not seem to have the same width, despite having the same value for stroke-width and the attribute shape-rendering set to crispEdges.
The coordinates are calculated in JavaScript (hence the weird numbers). However, some lines seem to be twice as thick as others (see example below). I don't understand why this happens or how I can fix it.
My best guess is that the calculations are not precise enough and the angle is not actually a perfect 45°, resulting in a thicker line. But when I calculate the slope by hand, it's 45°.
Setting shape-rendering to auto theoretically works, but the circumstances require the lines to be not smooth.
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="3201" height="1677" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.2106781186546" y2="0.7893218813452"/>
<line x1="71.2106781186546" y1="0.7893218813452" x2="141.9213562373093" y2="71.5"/>
<line x1="141.9213562373093" y1="71.5" x2="212.632034355964" y2="0.7893218813452"/>
<line x1="212.632034355964" y1="0.7893218813452" x2="283.3427124746186" y2="71.5"/>
</svg>

Answer 1

The purpose of the crispEdges attribute is to accentuate the contrast between edges in your picture, not to ensure that strokes are drawn with the same width.
You probably want to use geometricPrecision instead. However, if it's important to use crisp edges for some reason, try drawing your lines with the same gradients and with their start/end points aligned to the pixel grid (ideally, offset by 0.5 pixels).
Here's your SVG, with minor modifications to ensure the stroke width appears consistent:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="300" height="80" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.5" y2="0.5"/>
<line x1="71.5" y1="0.5" x2="142.5" y2="71.5"/>
<line x1="142.5" y1="71.5" x2="213.5" y2="0.5"/>
<line x1="213.5" y1="0.5" x2="284.5" y2="71.5"/>
</svg>