AS3 - Export or Save a sprite as SVG or other vector format

StackOverflow https://stackoverflow.com/questions/9745439

Question

I'm working on some generative art projects in AS3, and I keep running into problems with the quality limits of bitmaps. They're not scalable or editable the way vectors are. Is there a class or library that I can use to take a Sprite object's graphics and export them into SVG format? Other common vector formats are also acceptable.

A sample of usage would also be greatly appreciated.

Edit: Note that I'm using FlashDevelop and not Adobe Flash CS. I'm looking for a programmatic solution.

Was it helpful?

Solution

I'm trying to export to svg myself, and finding it a bit surprising that it's so hard to find an svg exporter, since it is pretty much just xml.

I did come across xgraphics though, it might be helpful.

in reality you only need the SVG class. It tries to mimic the graphics class in as3, but I found I needed to add a draw polygons class.

    /**
     * graphics
     */
    public function drawPolygon($points:Array):void {
        var $pointsString:String = "";
        for each (var $pt:Point in $points) {
            $pointsString += (" " + $pt.x +"," + $pt.y);
        }
        var xml:XML = new XML('<polygon points="' + $pointsString + '" fill="' + uintToCSS2Color(fillColor) + '" stroke="' + uintToCSS2Color(lineColor) + '" stroke-width="' + strokeWidth + '"/>');
        this.xml.appendChild(xml);
    }

this allows me to make triangles and other shapes by passing an array of points

OTHER TIPS

If you are doing generative art using the graphics API (and/or using premade sprites w. vector art) the by far easiest way to get these out is to print as a PDF. This will retain the vectors and you can later import into something like Illustrator to do the final touches. I've done screenshots of my games this way and it works pretty well. There can be some issues with cropping, but those should be avoidable if you tweak the scaling of things.

as grapefrukt suggested, PDF was my first though too.

if you don't want to use print as pdf (which is a bit of a clumsy way of exporting) there is also alivepdf that might work.

another option is to use the DEGRAFA library, but I think you'll need to generate the graphics using the library to begin with, but it will give you the ability ti import and export using the SVG format.

Have a look at AS3 SWF Shape Export - the SVGhapeExporter should do nicely (example code here).

Unfortunately once in bitmap format, you can't perfectly and easily reverse engineer a raster graphic to vector. There are some tools that try to accomplish this task but they achieve mixed results. Flash contains an in-built "Trace Bitmap" function that will perform this task, with the image selected, go to 'Modify > Bitmap > Trace Bitmap'. You will need to play with the different options to try and achieve the best result but even then it may require manual adjustment to tidy up artifacts and glitches.

This tutorial has a reasonably good overview of what each option will do.

I had answered this differently myself earlier, but having tried that tool myself and not having much luck I went hunting for something different, and found this project entitled SWF2SVG on wonderfl. It takes an uploaded SWF and converts it to an SVG path using the as3swf library.

Link to the SWF2SVG tool: http://wonderfl.net/c/sPjI

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top