Waratah Property Services - Some Really Important Numbers
This graph is contained in the file test4.svg.
If you right-click on the image, the source code can be viewed in note-pad, edit-pad etc.
The critical line in that file is
path id="graph" style="fill:none; stroke:red; stoke-width:2;" d="M 30 250 L 50 200 70 190 90 210 110 120 130 100 150 179 170 220 190 170 210 250 230 100" /
Up to 'd=' is style stuff. The data forms after 'd='.
This example is of a "path" shape, which defines where lines go. The way SVG works is that, unlike a graph drawn on paper, the point of origin is at the top left hand corner of the graph.
It uses coordinates (x,y) just as you would for paper, except that (0,0) is, as I said, at the top left hand corner of the image.
This means that you have to think 'up-side-down' for the 'x' coordinate, but 'normally' for the 'y' coordinate.
I find that a glass of wine helps warp the mind sufficiently to understand this anomaly.
In a 5 x 5 px image, for example, (0,0) represents the top left hand corner, (5,0) represents the top right hand corner, (0,5) is the bottom left, and (5,5) is the bottom right.
So, the path is just a series of points that are linked by a line.
The data commences with the starting point which is described by the 'M' which is a move-to command.
The system works in absolute or relative terms.
The capital 'M' means that the data that follows is in absolute terms, whereas as lower case 'm' means that the data that follows is relative.
Data can be separated either by a space, or a comma.
The '30 250' information that follows the 'M' in our example above, is the first coordinate, that is the first coordinate that the graph/line moves to.
This image above is a 300 x 300 image and is defined in line 4 of the SVG image as
svg width="300" height="300" x="0" y="0"
Rememeber that 'x' is the horizontal axis and 'y' is the vertical axis.
The coordinates 30 250 mean that the starting point is when x=30 and y=250.
The start is 30px is from the left and down 250px from the top.
Next, is the character 'L' which means that the connection will be a line. Again, the points can be represented as a capital 'L' for absolute or 'l' for relative.
By substituting 'S' for 'L' the result is a slope between points.
Finally, since we have used a capital 'L' the coordinates that follow are all absolute references, and the line then joins each of the coordinates that folllow.
At the end of the line is a slash '/' since SVG is part of the XML family which requires that all tags be closed.
What happens if the data is altered slightly?
Let's change the data.
path id="graph" style="fill:none; stroke:red; stoke-width:2;" d="M 30 250 L 50 200 70 190 90 210 110 120 130 100 150 179 170 220 190 170 210 250 230 100" /
path id="graph" style="fill:none; stroke:red; stoke-width:2;" d="M 30 250 L 50 200 70 190 90 210 110 120 130 100 150 179 170 220 190 170 210 250 230 240" /
This results in the new image
All the other information in the file remains exaclty the same.
This is in file test5.svg
Next, let's start on a bar-chart.
The elements of a bar-chart are essentially a series of rectangles originating at the bottom of the graph.
Let's replace the starting point with a rectangle and push the move-to staring point of the line one position to the right.
This results in
This is saved as test6.svg
Here, the path starting point has changed to what was previously the second point.
Now, the first point is a rectangle and is defined by
rect x="25" y="250" width="10" height="40" /
where the starting point of the rectangle is first defined and then the characteristics filled in.
Since we are using SVG, everything is, naturally, up-side-down and the starting point must therefore be the top left hand corner of the rectangle.
If things were straight-forward, it just would not be SVG, or indeed anything to do with web-sites or computer programming in general!
Then the width of the rectangle is defined, as is it's height.
OK. Let's trash the line and do all bars.
This is test7.svg.
The points now define the commencement point of the rectangles, rather than a point for the lines to join.
The width of each rectangle is set at 10px in the SVG file.
The length of the rectangle needs to be calculated, and is a subtraction of the bottom 'y' coordinate of the graph (in this case, in the 300 px graph, the bottom axis is 290px down, allowing 10px to draw the bottom 'x' axis line and fill in the numbers), and the 'y' component of the starting point of the rectangle.
Accordingly, to determine the length of the first rectangle, for example, the bottom 'y' of the graph is 290, the starting 'y' of the rectangle is 250, therefore the length is 40px.
And so on.
Since we are dealing with style, the lines can now be flavoured.
Lets change the first rectangle.
It changes from
rect x="30" y="250" width="10" height="40" / to
rect x="30" y="250" rx="2" ry="2" width="10" height="40" style="fill:#FF0000;stroke:rgb(0,0,0);stroke-width:2;fill-opacity:1.0" /
This is test8.svg.
RX and RY are used to round off the rectangles at the top.
One source of information for server-side generation of SVG Graphics on the fly in PERL can be found at ROASP.
Other stuff can be found at W3.org.
