SVG Path Loader For AS3

[This Code Is Outdated, Click Here To View The Most Recent Updates]

I was looking for a way to design simple vector paths for use in Papervision3D. At first I considered writing an interpreter for a CAD format such as DWG or DXF, but I ultimately decided I didn’t want to invest that much time and chose the XML based SVG format. After putting together a quick XML parser that read path tags and spit out black outlines I scrapped the whole thing in favor of using a regular expression to just pull out the path tags.

public function SvgPaths(svgData:String)
{
    var pathTagRE:RegExp = /(<path.*?\/>)/sig;
    var pathArray:Array;
    while(pathArray = pathTagRE.exec(svgData))
    {
    	paths.push(new SvgPath(pathArray[1]));
    }
}

Doing a little more digging I stumbled upon Helen Triolo’s implementation of an SVG reader in AS2. I snagged some code out of her makeDrawCmds function in PathToArray.as file and added support for “t/T” as well as a stub for implementing the elliptical arc path element. Helen’s code for converting cubic bezier curves to quadratic relies upon a recursive function. For a little quicker parsing I substituted Timothee Groleau’s fixed midpoint conversion code.

static public function cubicBezierToQuadratic(P0:Object, P1:Object, P2:Object, P3:Object):Array
{
	/* A portion of code from Bezier_lib.as by Timothee Groleau */
	// calculates the useful base points
	var PA:Object = getPointOnSegment(P0, P1, 3/4);
	var PB:Object = getPointOnSegment(P3, P2, 3/4);
 
	// get 1/16 of the [P3, P0] segment
	var dx:Number = (P3.x - P0.x)/16;
	var dy:Number = (P3.y - P0.y)/16;
 
	// calculates control point 1
	var Pc_1:Object = getPointOnSegment(P0, P1, 3/8);
 
	// calculates control point 2
	var Pc_2:Object = getPointOnSegment(PA, PB, 3/8);
	Pc_2.x -= dx;
	Pc_2.y -= dy;
 
	// calculates control point 3
	var Pc_3:Object = getPointOnSegment(PB, PA, 3/8);
	Pc_3.x += dx;
	Pc_3.y += dy;
 
	// calculates control point 4
	var Pc_4:Object = getPointOnSegment(P3, P2, 3/8);
 
	// calculates the 3 anchor points
	var Pa_1:Object = getMiddle(Pc_1, Pc_2);
	var Pa_2:Object = getMiddle(PA, PB);
	var Pa_3:Object = getMiddle(Pc_3, Pc_4);
 
	// draw the four quadratic subsegments
	return ([{cx:Pc_1.x, cy:Pc_1.y, ax:Pa_1.x, ay:Pa_1.y},
			{cx:Pc_2.x, cy:Pc_2.y, ax:Pa_2.x, ay:Pa_2.y},
			{cx:Pc_3.x, cy:Pc_3.y, ax:Pa_3.x, ay:Pa_3.y},
			{cx:Pc_4.x, cy:Pc_4.y, ax:P3.x, ay:P3.y}]);
 
}

To Do:

Add elliptical arc support
Add path transformation support

sinisa says:

March 3, 2008 at 3:28 pm

Hi,
do you maybe have somewhere functions for parsing other elements then line.
Your class is working but you cant draw rectangles circles , only bezier lines.
also if you import open line (not closed object) it will close it by itself.

good work,
thanks
sinisa

flashtestdummy says:

March 9, 2008 at 7:49 pm

heyyy this is perfect!!!
and it can read illustrator svg which the original couldnt (at my pc)
perfect! perfect! perfect! and thanks thanks thanks! sooo good!

flowde blog » Blog Archive » SVG AS3 Viewer says:

April 13, 2008 at 2:05 pm

[...] clase utiliza dos clases de otros autores : El manejo de path que puedes encontrar en el blog de Zaboo que a su vez esta basado en una implementacion que puedes encontrar aqui , además utiliza una [...]

Claudio Castro says:

April 13, 2008 at 2:19 pm

I countined with your work and i added the transforms and treated the style very diferent, sorry for change the path of your class.
Here you can find it: http://www.flowde.com/blog/2008/04/13/svg-as3-viewer/