Svg 1px-width line for background

I need to underline each line in a paragraph.

<p class="underline">multi-line text multi-line text multi-line text</p><br/>
<p class="underline" style="background-repeat: no-repeat;">single-line text</p>

Here is a style:

.underline { width: 100px; font-size: 12px; line-height: 16px; background: url("underline.svg"); }

And underline.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="16">
  <line x1="0" y1="15" x2="100%" y2="15" style="stroke:black;stroke-width:1" shape-rendering="crispEdges"/>
</svg>开发者_StackOverflow中文版;

It works fine, but when I'm trying to zoom page in Google Chrome I'm getting something like this.

Note that a second paragraph looks fine. But there is a strange thin line on top of multi-line paragarpah. And other lines are fuzzy.

The problem is that when I'm converting this html to pdf (by wkhtmltopdf) and printing it, I'm getting strange artefacts (some lines becomes too thin, there is also a thin line at a paragraph top).

How to get exact 1px-width line? Thanks!

If you need exactly 1px line, just use PNG as background image. For example, if you need 20px spacing between lines, you would create PNG image 1 pixel in width and 21px in height, and then draw 1x1 pixel on the very bottom of this image with the needed color (underline color you want), leaving preceding 20 pixels transparent.

Then you might adjust the positioning with background-position property if needed.

Since svg is vector and it will be scaling depending on the container, you can't really set width/height of the line to exactly 1 pixel. For example, i had to use stroke-width: 3 and it was close to 1 pixel in thickness for my container.

I think @thenoviceoof is right. The most simple and effective method to achieve this in CSS would be to apply a text-decoration:underline; to the class of your p tag.

See working example here: http://jsfiddle.net/3UBUG/