Loading SVG content in Flex Apps

This is a question that is often asked to me. A lot of people have complex graphics done in SVG and want to leverage it in their Flex apps. Its actually quite simple.

Like any asset used in your app, copy the svg files into your project structure. You can use the Image control (mx.controls.Image) to draw SVG content. Just that the source has to pointed to classes containing the SVG content instead of the images as you do with JPG and PNG assets. Here is a small bit of code that generated the following result

Code

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; backgroundColor=”0xffffff” layout=”horizontal”>
<mx:Script>
<![CDATA[
[Embed(source="assets/bird.svg")]
[Bindable]
public var bird:Class;

[Embed(source="assets/tux.svg")]
[Bindable]
public var tux:Class;

]]>
</mx:Script>
<mx:Image source=”{tux}”/>
<mx:Image source=”{bird}”/>
</mx:Application>

Result

The SVGs I have used can be found here:

About these ads

One Response to Loading SVG content in Flex Apps

  1. Harit Kothari says:

    Good one!

    Flex has yet to come with really powerful APIs for SVG manipulation. Though may attempts are being made.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.