Degrafa SVG Painter

I’ve encountered a temporary roadblock in wiring up Object Handles with SVG Viewer API in Flex SVG Explorer to enable shape selections. Will work on it next week.

Degrafa SVG Painter (v. 0.1)

Here is another Flex SVG application I started this week: Degrafa SVG Painter.

Degrafa SVG Painter 01

It’s very basic and a little slow for creating sophisticated drawings, but I was able to create the painting above.

I call this one “Shapes and Strokes” :)

SVG Code View

Besides the main Paint Canvas, there is also an SVG code view in Degrafa Painter that displays the resulting SVG drawing code you can save for later use in other SVG tools:

Degrafa SVG Painter: SVG Code View

Click on the screenshots above to see the first rev. of Degrafa SVG Painter.

Source Code Details

This one is obviously done with Degrafa, demoing its dynamic drawing features.

The main Canvas uses the Surface UI component, but the Stroke Preview, Line Cap and Line Join buttons in the stroke control bar are done with the lightweight GeometryComposition object.

That gorgeous Photoshop Express-like UI theme is called Kingnare, created by Jin Xin.

11 Responses to “Degrafa SVG Painter”

  1. greg

    Is it possible to have the source code ?

  2. Taras


    I’ll post some sample source code that does dynamic drawing with Degrafa in a few days.

    There is not much to it. Just a Canvas with Surface and mouse down/move/up events that do all the drawing by adding new paths to the main geometry group of the canvas surface.

  3. James

    I am creating the same application as yours with ObjectHandles too, but lean towards Flex UI prototype on drawing board.

  4. Taras

    Sounds good. Let me know if you’d like to partner on it.

    I was planning to utilize ObjectHandles for my Flex SVG Exlorer to import and transform SVG artwork.

  5. Taras

    I am still planning to clean up and publish the code behind this Flex sample app. Just falling behind my work, personal interests, and family obligations schedules. I’ll try to carve out some time for it this month.

  6. David

    Hi Taras,

    Can you post the code even if they are incomplete?(you can add incomplete disclaimers to it). It would be very useful. Thanks.

  7. Taras

    Check out Degrafa SVG Painter source code at

    I am not proud of the way stroke toolbar button events are hooked up, but this was a very rough prototype put together in a couple of days.

    Those stroke buttons are created with Degrafa Geometry composition, while the main painting canvas utilizes Degrafa Surface to show how those two features can be used for dynamic graphics and custom controls.

  8. Tyler Wright


    Your SVG Painter is nice. If you’re willing I’d like to structure your code on the Flight Framework as an example app for the framework – it would show off Flight’s strengths nicely. What do you think?

  9. Taras


    I had a brief look at the Flight Framework. Looks very interesting.

    Feel free to use my SVG Painter for a demo app to show off Flight Framework. I’ll have to browse Flight Framework docs and code a bit more to get the feel for it, but let me know if you’d like any help in putting that sample app together.

    Do I get a Flight T-shirt, if you end up using SVG Painter for your demo? :)


  10. Mike Lewis

    Hi, I played around with the source a bit, and figured out how to get rid of the perf issues. It looks like when adding something to a geometry group it renders the whole thing again (which is why it gets slower each point you add).

    Anyways, if you give each stroke it’s own geometry group, it’s really fast. The other thing is having two geometry groups, one using as a drawing buffer and the other one for the completed strokes. Do the drawing on the drawing buffer and when it’s done remove path from the buffer group and add it to the completed group.


  11. Taras

    Mike, thanks for the tip. I am sure this will be useful for folks that want to use SVG Painter as a start for their free-hand drawing application with Degrafa.

Leave a Reply