Flex: Vector Magic to Degrafa Example

My Sunday afternoon task was to take the promise of this post on the Degrafa website and put it into practise. The target was to take a source jpeg, convert it to SVG and then parse the SVG to generate Degrafa mxml which would match the original image.

This is a picture of my cat ‘Jess’ put through Vector Magic. Vector Magic is able to generate an SVG version of the vectorised image. The SVG file is essentially an XML file which can be parsed for the relevant colour and vector data in the usual way with Flex and E4X. As a quick and dirty test I took the generated SGV and pasted it directly into a AS3 XML variable.

Note the low conversion setting. A high number of vectors (and this is not an exact science remember) would cause FlexBuilder to sieze up. Not sure if this is a memory issue but is seemed happier with a low count so I left it at that because I wanted to get something working today.

Vector Magic

The XML variable is parsed with E4X and the Degrafa mxml is generated from the resulting data. Parsing the xml was not particulary onerous. Once generated the mxml was pasted into a Degrafa ‘Surface’ (fills and geometry paths) and the application compiled.

The final app looks like this. You can use the slider to scale the vector image up and down. As a vector image note that it is drawn exactly the same at each scale level. Nice.

Sample App

You can get to it here. Please note this is a proof of concept only. I am toying with making it onto something a bit more polished and submitting it to the Degrafa Derby so no code at the moment folks, sorry. Nothing stopping anyone else doing the same thing.

Update #1
Here is a link to a higher vector count version of the demo. This also lets you scale in both x and y directions seperately, here. There are 103 vectors in this image.

Update #2
Here is the source code. This is a Flexbuilder2 project.

The process of turning your image into a degrafa surface is as follows:

1) Convert your target image into an SVG file using vector magic. Save it.

2) Open the SVG up in a text editor of your choice. Copy the svg definitions into the ‘svgData’ part of the XML definition up at the top of the ‘SVG2Degrafa.mxml’ file. I can’t find my original image so the best way is to examine the Jess data and compare the start of this to what you have in your SVG file.

3) Set a breakpoint on the lines where the debug statements output the fills and paths i.e.


Copy the output of these into your text editor.

Abort the application.

4) Take the fills and paths and paste them into the relevant section of the ‘TestSurface.mxml’ file. Recompile and run. If all goes well you should see your image come up in all it’s glory on the test application.

I apologise for the clunky nature of this process. The parser is the important part and that seems to work okay as long as the SVG is straightforward.

If you automate this process then I would love to hear about it.


4 Responses to “Flex: Vector Magic to Degrafa Example”

  1. shaun on March 28th, 2008 3:08 am


    Any chance you can make the source available so i can have a play around without reinventing the wheel?

    cheers, shaun

  2. Administrator on March 28th, 2008 1:45 pm


    Yes I will post up the code. It’s a bit basic but if it helps..


  3. Administrator on March 28th, 2008 9:06 pm

    Code posted. As I say it’s a bit of a clunky process but it was just a demo.


  4. Lottery on April 11th, 2008 10:56 pm

    At least the demo displays the capability of Vector Magic.

Leave a Reply