2D rendering and zooming in with SVG

Question

My task is to develop an algorithm that fits different kinds of curves onto a given point-sequence in 2 dimensional space. To be able to test my algorithm, I have chosen SVG to display the result. I have several problems with it. As there may be very different inputs and outputs of my algorithm, it is essential that I could view the generated SVG files with the ability to zoom in! But a path in SVG can be displayed only with a certain width. If I zoom in, then the width of the path is getting wider. I would like the width to be for example 1 pixel at all zoom levels. Is there a solution for this? Also: can SVG display points? Yes, simple, raw points.? I have found that it can not. Thank

Accepted Answer

Many other vector formats (like PostScript and PDF) will let you use a stroke-width of 0 for a "hairline" stroke. Not so with SVG. However, I think you can achieve what you want if you use a percentage stroke-width. See the w3c SVG specifications for details, but, basically, you should be able to do something like this:

```
stroke-width:"1%"
```

This should stroke your curve with a line width that is a constant 1% of the bounding rectangle, regardless of zoom level.

As for points, SVG doesn't support them. When I've done this in the past (using PostScript) I've always used a arc with a small redius to draw a small circle (which you can fill to make a dot, if you wish).

@Zoli: After your comment, I was about to suggest you look into PostScript so you could use the hairline stroke-width when I came across the non-scaling-stroke vector-effect in the SVG specification:

```
vector-effect="non-scaling-stroke"
```

Just add this to your curve and it should be invariant to scaling, according to the spec. Their example uses `line`, but it should work on your curves as well.

2D rendering and zooming in with SVG

Solution

Problem