Saturnboy
 6.10

SVG Primer for Flex

, , , ,

The dream of SVG was probably born sometime in the late 90′s. Version 1.0 arrived in 2001, followed by the current version, SVG 1.1, in 2003. For anyone keeping score at home, that’s over 6 years ago, which is like 120 years ago in internet dog years. Also for those at home, SVG is a portable XML-based vector graphics format (it also does raster graphics), but you’d probably not be reading this if you didn’t already know.

Nowadays, I’m finally seeing some SVG in use. It works natively in all the real browsers (obviously not IE, which requires a plugin), and even on some mobile devices. But most importantly to me, I see it in my day-to-day work in Degrafa, and with the beta release of Flex 4, in Catalyst and FXG.

The vast majority of my experience in SVG is with paths (SVG Spec, § 8) and to a lesser extent Transforms (§ 7) and Filters (§ 15). Thankfully, these are some of the most useful and important pieces of SVG, and they all have nice one-to-one mappings to components in Degrafa and FXG.

SVG Path Primer

In SVG, a path is the outline of some object. It is described as a series of segments, where each segment can be different, either a line, curve, or arc. Path data is most often given in shorthand syntax as a series of commands followed by coordinates (we’ll ignore the long form for now). Let’s illuminate the discussion with some examples.

SVG:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="200" height="200">
  <path d="M 0,0 L 100,0 L 100,100 L 0,100 z"
      fill="#EECCEE"
      stroke="#FF00FF"
      stroke-width="3" />
</svg>

Degrafa in Flex 3:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:Degrafa="http://www.degrafa.com/2007"
        layout="absolute">
 
    <Degrafa:GeometryComposition graphicsTarget="{[cnv]}">
        <Degrafa:Path data="M 0,0 L 100,0 L 100,100 L 0,100 z">
	        <Degrafa:fill>
	            <Degrafa:SolidFill color="#EECCEE" />
	        </Degrafa:fill>
	        <Degrafa:stroke>
	            <Degrafa:SolidStroke color="#FF00FF" weight="3" />
	        </Degrafa:stroke>
        </Degrafa:Path>
    </Degrafa:GeometryComposition>
 
    <mx:Canvas id="cnv" />
</mx:Application>

MXML Graphics (aka FXG) in Flex 4:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:Graphic>
        <s:Path data="M 0,0 L 100,0 L 100,100 L 0,100 z">
            <s:fill>
                <mx:SolidColor color="#EECCEE" />
            </s:fill>
            <s:stroke>
                <mx:SolidColorStroke color="#FF00FF" weight="3" />
            </s:stroke>
        </s:Path>
    </s:Graphic>
</s:Application>

The examples above use the shorthand path syntax to draw a 100px square that starts at the coordinate origin (0,0), which is the upper left corner in SVG and Flex. Beware the coordinate origin when translating Inkscape SVG to Flex. The other interesting thing to note is the amazing similarity between Degrafa and FXG. Who knew all my time learning Degrafa will instantly translate to Flex 4 and FXG? Awesome!

SVG Path Shorthand

Here’s a quick overview of shorthand syntax for SVG path data:


Move
M <x,y>
Move the pen to the given point.

Line
L <x,y>+
Draw a line to given point. Multiple points may be specified to draw polyline.

Horizontal Line
H <x>
Draw a horizontal line to given coordinate.

Vertical Line
V <y>
Draw a vertical line to given coordinate.

Quadratic Bezier
Q <cx,cy x,y>+
Draw a quadratic Bezier curve to given coordinate using a control point. Multiple Beziers may be specified to draw polycurve.

Cubic Bezier
C <cx1,cy1 cx2,cy2 x,y>+
Draw a cubic Bezier curve to given coordinate using two control points. Multiple Beziers may be specified to draw a polycurve.

Arc
A <rx,ry rot,lrg,swp x,y>
Draw elliptical arc to the given point.

Close
Z
Close the path.

Alas, the beta version of FXG does not support the Arc segment type, which I suspect is due to lack of support for arbitrary arcs in the underlying Flash Player rendering engine but I don’t know for sure. Thankfully, Degrafa offers full arc support (thanks Greg!). If you really need to draw arcs in FXG, for stuff like pie wedges, and are unafraid of getting into a cage match with your trigonometry textbook, you can do a good job approximating arcs with cubic Bezier curves. Alternately, you can just use Degrafa once it gets ported to Flex 4. Lastly, using uppercase for the segment type specifies absolute coordinates. This is the format commonly used by Illustrator and Inkscape when exporting drawings to SVG. One can easily switch to relative coordinates by just switching the commands to lowercase, but I would try to avoid it if at all possible as it tends to make one’s head hurt.

The Many Shapes of a Square

All of the squares above, use this shorthand data:

M 0,0 L 100,0 L 100,100 L 0,100 z

First, a Move to set the pen at the origin. Then, a Line right to (100,0), followed by a Line down to (100,100), followed by a Line left to (0,100). Then, a close (z) to return to the origin.

I can drop the commas if I want:

M 0 0 L 100 0 L 100 100 L 0 100 z

Or drop all but the first Line to make a polyline:

M 0,0 L 100,0 100,100 0,100 z

Or use Horizontal Line and Vertical Line:

M 0,0 H 100 V 100 H 0 z

Or even use relative coordinate (which makes my head hurt a little):

m 0,0 l 100,0 l 0,100 l -100,0 z
Curves

Straight lines are cool, but the real fun in life lies in the curves. Cubic Bezier curves should be very familiar to anyone who’s used a vector drawing program. Let’s replace the first segment in our square with a cubic Bezier segment. Now, the SVG shorthand becomes:

M 0,0 C 25,-25 50,25 100,0 L 100,100 L 0,100 z

When rendered, we get this:

square-funny

The shorthand command says curve to (100,0), but start out heading towards control point #1 at (25,-25) and end up coming in from control point #2 at (50,25).

Arcs

Again, let’s replace the first segment in our square with an arc segment. Now, the SVG shorthand becomes:

M 0,0 A 50,25 0 0,1 100,0 L 100,100 L 0,100 z

When rendered, we get this:

square-arc

The shorthand command says arc to (100,0), with an x-radius of 50 and a y-radius of 25, with a rotation of 0. The large-arc and sweep flags are a little confusing so you’ll want to review the SVG Spec, § 8.3.8 if you need to get down and dirty with arcs.

Conclusion

I’m a firm believer in “right tool for the job.” So, when in comes to getting SVG path data into Flex, I’m definitely going to use Illustrator or Inkscape as much as possible, and in the future I might just use Catalyst for everything. But there are a few important situations where the Flex developer absolutely must know SVG. First, if you want to do any kind of path morphing (like this), you’ll need precision control over your path segments. And second, if you want to do any dynamic path generation (like building a multi-level radial menu on the fly – which sounds like a good topic for a future post), you’ll need to manually construct your SVG paths.

Files

Comments

6.11.2009

1

Once again, a great write up!. Just a quick correction, though: Degrafa does support the full range of svg commands, including the arcTo A command (and relative ‘a’). You’re right though about FXG it currently does not. The value in this for degrafa is that you can load svg paths at runtime and be confident that no matter what it is, it will render correctly.

6.11.2009

2

Thanks, Greg! My bad on the bad info about Degrafa. Post updated.

6.11.2009

3

What areas are there advantages of using FXG over Degrafa? Why was FXG developed if Degrafa does most everything you need? Seriously, could someone explain a circumstance to me where I’d choose FXG if I’m already familiar with Degrafa?

6.11.2009

4

Thanks for the overview, orientation.

Trivia note: SVG discussions first started in 1996:
http://www.w3.org/Graphics/ScalableReq

Didn’t take off until after folding in Adobe’s PGML from 1998:
http://news.cnet.com/2100-1001-210111.html

jd/adobe

6.11.2009

5

@Andrew: If you use Catalyst, then there is no choice, you are using FXG. Also, if you want to round-trip FXG file assets between Flex 4 and the rest of CS4 then by definition you are using FXG.

FXG is for drawing (and transforms and filters), but Degrafa is a framework with a whole lot more (Repeaters, CSS, complete runtime SVG support as Greg mentions, etc.). I’m confident the Degrafa team will be able to figure out how to leverage FXG as part of the underlying rendering pipeline, while porting over all the other good stuff to Flex 4.

3.5.2010

6

Justin, Always enjoy your posts, keep it up.

I’ve posted a path data testing utility in case anyone’s interested:
http://flextip.blogspot.com/2010/03/spark-path-utility.html

Do you mind if I use some of your examples as samples?

3.5.2010

7

@Yarin:

Thanks for the kind words. Please feel free to use my examples on your blog.

Joe

6.2.2010

8

Great example – does Flex 4 support mouse events on individual elements of the SVG DOM?

6.3.2010

9

@Joe: The FXG components (Path, Ellipse, etc.) do not have direct support for events, but you can easily wrap them with components that do.

Joe

6.3.2010

10

Is there a translator from SVG to FXG? For instance if I have two nodes and an edge:

is it as simple as

fxgImage.A.addEventListener(MouseEvent.CLICK, nodeClicked);

if so, is this documented anywhere?

Joe

6.3.2010

11

for some reason the SVG didn’t make it in the last post. A is the id of a node. I’m assuming the SVG containing A would be converted in FXG somehow, and hopefully the DOM is accessible to add mouse events.

robbie

12.29.2010

12

Justin, nice post, is there a way to read in a SVG file and to modify the attributes of a particular SVG element in flex (ie visibility)? Most images aren’t drawn in MXML, but it would be awesome if they were accessible via MXML/Actionscript.

12.29.2010

13

@robbie: There is no direct translator that I know of that turns SVG into FXG. I’d just use Illustrator to load and the re-save as FXG.

9.12.2011

14

Justin, have you seen any techniques for styling an MXML s:Path in a way similar to how lines drawn with Graphics can be styled with lineShaderStyle?

e.g. if you have a long string of FXG path data and you assign it to path.data, but then you want to give it a kind of brush treatment?

9.12.2011

15

@Daniel: Short answer: no.

Long answer: the Degrafa framework has its own “rendering pipeline” that does all the work. It’s easy to imagine a custom renderer that takes path data and breaks it apart and renders each segment/pixel with whatever style you want. But I’m not sure such a thing is practical.

© 2017 saturnboy.com