Scalable Vector Graphics (SVG)

This tutorial covers Path Draw using PHP with Image Magick from the command line to view svg files. SVG graphics are actually XML files with W3C recommendations. On a PC they interface with different paint programs (such as Adobe) to make the image viewable as either a jpeg, gif or a png. On webTV we can inteface these scripts with Image Magick to make the image viewable. However Image Magick does not currently have all the capabilities that a paint program on a PC has (such as certain filters) but we are able to do some of the draw functions. In the future we may be able to do gradients as image magick constantly gets upgraded.
I will cover mostly the codes for using Path in this tutorial. I will also show an example of the other draw functions but they can be easily accomplished through IM without an svg file. But if you wanted to combine scripts into a file I will post them here for your study. I am not an expert on this as I am learning it as I write, so bear with me, and I will try to show what the codes mean.
A PATH consists of a series of letters and numbers marking a path along which to draw a line or curve such as <path d="M50 0 L0 50 L100 50 Z"> The letters are explained in the table below and examples follow.
COMMAND PARAMETERS M Moveto x,y: Moves the pen to a new location. No line is drawn. All path data must begin with a 'moveto' command. Line Commands L Lineto x,y: Draws a line from the current point to the point (x,y). M0,0 L50,50 draws a line from the current position 0,0 to 50, 50. H Horizontal lineto x: Draws a horizontal line from the current point to x. V vertical lineto y: Draws a vertical line from the current point to y. Cubic Bezier Curve Commands C Curveto x1 y1 x2 y2 x y: Draw a cubic bezier curve. Takes 4 points: Start poing(x,y), start curve (x1,y1) end curve (x2,y2) and end point x,y. S Shorthand/smooth curveto x2 y2 x y: Draw a reflective Cubic Bezier curve to the point (x,y) where the start is a Bezier Curve. Quadratic Bezier Curve Commands Q Quadratic Bezier curveto: Takes three points, start x,y middle curve point x,y and end x,y. T Shorthand/smooth quadratic Bezier curveto x y: Draw a reflective quadratic bezier. Elliptical Arc Curve Commands A Elliptical arc requires Start x,y Size x,y rotation degrees, Arc 0 or 1 (0<180, 1>180), Sweep direction 0 or 1 (0=clockwise, 1=counterclockwise), end x,y. Arc is computed by the SVG viewer. End Path Commands Z closepath: Closes the path. A line is drawn from the last point to the first.
The first 5 lines in the svg code is XML code and can just be CCP into each file you create. The 6th line begins the path codes. <path d="codes"> The d stands for direction. That line and the lines following it will be the only codes that you will change for each image you draw. Put that script into a file and name it with an svg extension such as triangle.svg	Put this code into a php extension file. Change the svg url and image request url as necessary and it will upload the svg image into your directory
LINE <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M50 0 L0 50 L100 50 Z"> </svg>	<? $SVG="triangle.svg"; $OUT="triangle.jpg"; exec ("/usr/bin/convert $SVG -trim +repage $OUT"); print "<a href=$OUT><img src=$OUT></a>"; ?>
Same script as above with fill color and stroke added <path d="M50 0 L0 50 L100 50 Z" style="fill:#ff0000; stroke:#0000ff; stroke-width:2" />
You can make a rectangle to draw on in order to change the background color. White seems to be default. Just make the rectangle the same size as the XML page and give it the same color for fill and stroke, so that IM will be able to trim off the excess back. <rect x="0" y="0" width="500" height="500" fill="#997766" stroke="#997766" /> <path d="M50 0 L0 50 L100 50 Z" style="fill:#ff0000;stroke:#0000ff;stroke-width:2" />	JPEG PNG GIF
This script uses a path that calls both W and H pixel parameters <path d="L10,30 L20,30 L20,20 L10,20 L10,10 L40,10 L40,20 L30,20 L30,30 L60,30 L60,20 L50,20 L50,10 L80,10 L80,20 L70,20 L70,30 L100,30 L100,20 L90,20 L90,10 L120,10 L120,20 L110,20 L110,30 L140,30 L140,20 L130,20 L130,10 L160,10 L160,20 L150,20 L150,30 L160,30" style="fill:white;stroke:blue;stroke-width:2"/>
Same script as above except it uses The V and H parameters making the path shorter. Use H if the next move is the same height as prior or use V if the width is the same as the prior path pixel...example M10 30 H20 moves from pixel 10,30 to 20,30 <path d="M10,30 H20 V20 H10 V10 H40 V20 H30 V30 H60 V20 H50 V10 H80 V20 H70 V30 H100 V20 H90 V10 H120 V20 H110 V30 H140 V20 H130 V10 H160 V20 H150 V30 H160" style="fill:#997766;stroke:blue;stroke-width:2"/>
CUBIC BEZIER CURVE Uses same numbers as first line design above with Curve points added <path d="M10,30 L20,30 L20,20 L10,20 L10,10 C10,0 40,0 40,10 L40,20 L30,20 L30,30 C30,40 60,40 60,30 L60,20 L50,20 L50,10 C50,0 80,0 80,10 L80,20 L70,20 L70,30 C70,40 100,40 100,30 L100,20 L90,20 L90,10 C90,0 120,0 120,10 L120,20 L110,20 L110,30 C110,40 140,40 140,30 L140,20 L130,20 L130,10 C130,0 160,0 160,10 L160,20 L150,20 L150,30 L160,30" style="fill:#997766;stroke:blue;stroke-width:2"/>	Each curve is controlled by 4 sets of numbers. beg pt curve start curve end end point L10,10 C10,0 40,0 40,10
SMOOTH CURVE A smooth curve is a shorthand that reflects the bezier curve that begins the path <path stroke="#000000" stroke-width="4" fill="#997766" d="M0,100 C0,50 25,50,25,100 S50,150 50,100 S75,50, 75,100 S100,150 100,100 S125,50 125,100 S150,150 150,100" /> You don't need to repeat the S in the code after the first S <d="M0,100 C0,50 25,50,25,100 S50,150 50,100 75,50, 75,100 100,150 100,100 125,50 125,100 150,150 150,100" />
QUADRATIC BEZIER CURVE A quadratic curve is a little easier to use in terms of points. Has a start, middle and end. <path d="M0,50 Q25,0 50,50 75,0, 100,50 125,0 150,50 175,0 200,50" stroke="#000000" stroke-width="4" fill="#997766" />
TRACE QUADRATIC CURVE A T is shorthand to reflect a quadratic curve which starts the path. <path d="M0,50 Q25,0 50,50 T100,50 150,50 200,50" stroke="#000000" stroke-width="4" fill="#997766" />
ELLIPTICAL ARC Draws a curve outline of a circle or from point to point inside a circle. <path d="M 50,150 A40,50 45 1 1 80,150 A40,150 45 0 1 50,150 A40,50 -45 1 1 80,150 A40,150 -45 0 1 50,150" style="fill:#997766;stroke:blue;stroke-width:4"/>