Array to SVG, flexible algorithm with PHP

Question

problem: I\'ve a couple of different arrays - e.g.:

• [0.21, 0.001, 0.0245, 0.31, 0.05, ...]

• [1234, 1342, 1232, 1625, 2200, 2205, 1804, ...]

Answer 1

What is so hard on generating SVG path ? Here example of SVG:

So hard code the header and tags ... and then just create the d="" part including your path points ... Start with command M move and then for the rest use just L (line to, You do not need to repeat the L command until a different command is used). Uppercase means Absolute coordinates and lowercase commands means relative coordinates. Here preview:

See SVG specs for the path commands usage ... If your data contains x,y points then it would be like this:

d="M x0,y0 L x1 y1 x2 y2 x3 y3 ... xn yn"

So just create php script generating such content from your array.

The important part is the viewBox and view defining the browser view. If not set properly or at all than some brownsers will not render your SVG properly.

Using your sample array and x-step = 1 I got:

x = { 0,1,2,3, 4, 5 }
y = { 2,3,3,5,25,31 }

so let use x=<-1,+6> and y=<1,32> as view box (min max + some border):

As you can see the Y axis is going down, you can either adjust the y positions or use matrix for that ...

[Edit2] I created C++/VCL script (as promissed) for this

    {
    int xs=512,ys=256;  // view resolution
    float x0,x1,y0,y1;  // data bbox
    float x,dx,px;
    AnsiString svg;
    float data[]={ 3401.91, 3515.16, 4007.285, 4149.845, 4141.87, 4176.14, 4227.935, 4416.955, 4594.51, 4486.855, 4302.41, 4413.97, 4584.115, 4740.095, 4796.885, 4629.49, 4567.83, 4484.115, 4383.555, 4363.99, 4362.23, 4352.21, 4236.14, 4120.265, 4049.435, 4046.11, 4138.485, 4165.725, 4242.48, 4358.065 };
//  float data[]={ 0.21, 0.001, 0.0245, 0.31, 0.05 };
//  float data[]={ 1234, 1342, 1232, 1625, 2200, 2205, 1804 };
//  float data[]={ 5, 12, 42, 2, 32, 42 };
    int i,n=sizeof(data)/(sizeof(data[0]));

    y0=data[0]; y1=y0;
    for (i=0;idata[i]) y0=data[i];
        if (y1\r\n"
       +" \r\n";
    svg+="\r\n";

    Memo1->Text=svg;
    i=FileCreate("test.svg");
    FileWrite(i,svg.c_str(),svg.Length());
    FileClose(i);
    }

Here output:

You forgot the transform and you also need to set the stroke width px properly.