Draw 1 pixel stroke-width graph in a A4 svg drawing

Question

I'm currently trying to draw some graphics in svg, the paper size is A4, 1 logic unit stands for 1mm. So I set the viewport to be 297mmx210mm, viewbox as 297x210. The problem now is that stroke-width of the graph I draw is no longer 1 pixel. For example,

<!DOCTYPE html>
<html>
<body>
<svg width="297mm" height="210mm" viewBox='0 0 297 210' style="border: 1px solid #cccccc;">
    <path stroke="black" fill="none" stroke-width='1' d='M 10 10 L 60 10'/>
    <path stroke="black" fill="none" stroke-width='1px' d='M 10 30 L 60 30'/>
    <path stroke="black" fill="none" d='M 10 50 L 60 50'/>
</svg>
</body>
</html>

These 3 lines above have exact the same line width even I set its stroke-width as "1px". Is it still possible to draw a 1 pixel width line in such setting?

i don't think paper has pixels. use screen units on the screen or print the svg and watch the thin lines appear... — dandavis
by default 1mm = 3.779527559 pixel, so if I set stroke-width='0.26458' the line width is actually 1 pixel. But for the second line since I've already set stroke-width as '1px'. It should be drawn with 1 pixel width, right? — user2469554
The problem is if I use inch instead of mm for the drawing, in order to draw a line with 1 pixel width, I have to redefine the stroke-width of every graph in my drawing. That's quite annoying. — user2469554

Paul LeBeau Paul LeBeau · Accepted Answer · 2013-07-11T15:22:59

Try this:

<path stroke="black" fill="none" stroke-width='1px' d='M 10 30 L 60 30' vector-effect="non-scaling-stroke"/>

vector-effect="non-scaling-stroke" is an SVG 1.2 Tiny feature that forces the stroke width to be exactly what you specify, no matter what scaling or unit transforms are in effect. It is supported by FF and Chrome (maybe others) but not IE (so far) unfortunately. If you can live with that, then it is the simplest solution to your problem.

Draw 1 pixel stroke-width graph in a A4 svg drawing

1 Answers