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

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.

Daniel · Accepted Answer · 2012-03-24T03:14:19.437

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

score 2 · Answer 2 · answered Mar 17 '12 at 00:39

2

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.

answered Mar 17 '12 at 00:39

grapefrukt

27,016
6
49
73

This is helpful, though I would greatly prefer a programmatic way to do it. And if no one has a library to do it, maybe I should make one. – Mar Mar 17 '12 at 03:33

score 1 · Answer 3 · answered Mar 21 '12 at 18:34

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.

score 0 · Answer 4 · edited May 23 '17 at 11:58

0

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

edited May 23 '17 at 11:58

Community

1
1

answered Feb 21 '14 at 22:43

indextwo

5,535
5
48
63

score 0 · Answer 5 · answered Mar 16 '12 at 23:14

0

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

answered Mar 16 '12 at 23:14

sekati

535
5
12

This will only export symbols as they are contained in the SWF, not graphics generated at runtime. It's still pretty sweet though! – grapefrukt Mar 17 '12 at 00:40

score 0 · Answer 6 · answered Mar 16 '12 at 23:17

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'm not trying to convert bitmaps into vectors, I'm trying to save vector-containing sprites as vectors. Bitmaps are used for display because it's faster for most of my uses. — Mar, Mar 17 '12 at 03:39

score 0 · Answer 7 · edited May 23 '17 at 12:06

0

Have a look at this article on Saving Flash graphics as image files at runtime. It also has a live demo.

Besides, try this FLASH save frame, to image (tiff, bmp, jpg, gif, png)

edited May 23 '17 at 12:06

Community

1
1

answered Mar 21 '12 at 14:04

loxxy

12,990
2
25
56

I already know how to save pixel-based images in AS3. I need a way to save the vectors of a sprite, preferably in .svg format. – Mar Mar 21 '12 at 15:07

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

7 Answers7