tags:

views:

354

answers:

3
+1  Q: 

svg problems

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

+1  A: 

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.

Naaff
using % : the zooming also widens the line.
Zoli
Thank you for the vector-effect property, but it does not work as i want.It does not defend against zooming, only against transform in the svg document itself. But even that is not working, I think because this might be a too new feature of SVG - Mozilla Firefox may not support it.
Zoli
I believe it's a SVG 1.2 feature, but it's even supported in the mobile and tiny profiles, so any SVG 1.2 implementation should support it. The description from the SVG spec makes it seem that it should work for zooming as well since it's just supposed to render in the device context (i.e. screen space). Have you tried other SVG viewers to see how it works there?
Naaff
I did some tests and Firefox doesn't seem to support non-scaling-stroke. However, I tested a program called GPAC which has SVG 1.2 support and it seems to work as you'd like, but it's geared towards animations and media. So I expect an SVG 1.2 compatible viewer would be what you need to get the effect you're looking for.
Naaff
I have not yet tried any other SVG viewer. I generally try to stick with free software, that is why i abandoned GPAC. I will wait the next release (3.5) of Firefox, and will try the vector-effect property with it.
Zoli
A: 

Thank you Naaff the help. I think i will stay with firefox, and i will specify for each algorithm-execution the line-width in the generated svg file. That will be adequate for me.

Zoli
A: 

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.

Erik Dahlström