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

Answer 1

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.

Answer 2

There's no <point> element or anything like that in SVG currently, but adding that has been discussed in the SVG WG, so it may be included in the future. Feel free to voice your needs and requirements for a <point> element to the public svg mailing list: [email protected].

A workaround is to use e.g <line> elements and let them be of zero length, if you want you can have round linecaps to make it display a dot. It all depends on what you need this for. A circle with r=0 might be a better fit.

The 'vector-effect' property with value 'non-scaling-stroke' is what you should use for saying that the stroke shouldn't scale. It's not that difficult to implement a javascript solution that ensures strokes are properly scaled if 'vector-effect' isn't supported natively. Opera 9.5+ supports it natively.