SVG Polyline (and Path) Scaling Issue

Answer 1

You might want to have a look at what JSXGraph is doing, http://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Examples

If you want the curves to look smooth you probably want to either recalculate the lines depending on the current zoom-factor, or use higher level curve primitives. An example of a static "infinitely" zoomable periodic curve can be seen here: http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/paths-data-02-t.html

You probably want to use a viewBox attribute too, to define the coordinate system and to make the image truly scalable.

Answer 2

The issue here is the use of a polyline. In any vector-based program you'll likely get similar results because that what a polyline is - a bunch of straight lines that connect to eachother. You should be using a path instead, in particular the segment T (smooth quadratic Bezier curveto).

Your code could to be modified to catch where your control points raise or lower to insert a new Bezier and the result will be much smaller SVG XML with smooth lines. But if that isn't what you want, you could also use a million Bezier's with control points.

Finally, you can consider sub-pixeling. Right now all of your points are whole integers - if the results are floats instead, like 273.534, etc. you may get closer to what you're looking for.

Answer 3

I just made a stupid mistake. I simply wrote the SVG export routine using the on-screen (GDI/OpenGL) rendering code as a template, and since the GDI code writes to the integer lattice of screen pixels, all coordinates are rounded to the nearest integer. This does not affect the quality at 100 % magnification, but if you zoom in, you get a "noise" applied to the points. When I removed the calls to round, it all works.

See testb.svg and test2b.svg.