Actionscript 3 - Import SVG file

Question

Does anyone know of any libraries or tools for importing an SVG file into actionscript on the fly? I need to be able to import an SVG file into flash and convert it to a movieclip or preferably a flat 3d object. The end goal here is to implement a vector file with Augmented reality.

Answer 1

A great library for this can be downloaded here: http://code.google.com/p/as3svgrendererlib/ It is easy to implement and reliable. Note that there are two ways to implement the code. I prefer the following because it gives you more control:

     private function loadSVG(url:String):void {
        ProcessExecutor.instance.initialize(stage);
        ProcessExecutor.instance.percentFrameProcessingTime = 0.9;

        loader = new URLLoader();
        loader.dataFormat = URLLoaderDataFormat.TEXT;
        loader.addEventListener(Event.COMPLETE, svgLoaded, false, 0, true);

        try {
            loader.load(new URLRequest(url));
        } catch (error:Error) {
            trace(error);
        }
    }   
    private function svgLoaded(e:Event):void {
        var svgString:String = loader.data as String;
        var svgDocument:SVGDocument = new SVGDocument();
        svgDocument.parse(svgString);

        this.addChild(svgDocument);
    }

The other way is shorter and might be the way to go when you only have to load a small SVG or just a few.

public function loadSVG(url:String) {
        ProcessExecutor.instance.initialize(stage);
        ProcessExecutor.instance.percentFrameProcessingTime = 0.9;

        var svgDocument:SVGDocument = new SVGDocument();
        svgDocument.load(url);
        addChild(svgDocument);
    }

Two important notes: 1. I could not seem to be able to capture the width or height of the SVGs and the parent Sprite had a width and height of 0 after loading the SVG. I solved this by making all the SVGs the same size before loading them into AS3. After that I knew the dimensions I used the ScaleX and scaleY to resize the loaded SVGs. 2. The stage has to exist before you can use this code. adding the following code will make sure you won't run into problems:yourDisplayClass.addEventListener(Event.ADDED_TO_STAGE, loadYourSVGs);

Now how you convert this to a flat 3D object depends on your 3D Library. I have worked with Away3D where you can use bitmapmaterial on your Sprite3D. The Sprite3D class would be the object to use. I hope your 3D Library supports the use of MovieClips so that you can add them to your 3D Object. Else you will have to use to extract the bitmapMaterial from the movie clip as i have done in the following example:

public function movieClipToBitmapMaterial(mc:MovieClip):BitmapMaterial {
        var bmData:BitmapData = new BitmapData(mc.width, mc.height, true, 0xFFFFFF);
        bmData.draw(displayObject);
        return new BitmapMaterial(bmData);
    }

Your input in the above function will be the movieclip onto wich you have loaded your SVG.

I am not sure of this but I think that by using this function you will loose the ability to scale as much as you like without loosing quality.

I hope my input was of some help! Good luck

PS: don't forget to add the SWC from the link to your project and to check out the provided examples. Please note as well the excellent comment of shaunhusain on your original question. You might not have to use 3D Library.