FXG vs MXML Graphics Benchmarking

As a follow up to Elad Elrom’s post on FXG increasing swf file size and taxing the CPU I thought I’d benchmark FXG (compiled graphics files) vs runtime MXML graphics.

There seems to be some confusion in the community as to the difference between FXG graphics and MXMLG (MXML Graphics). FXG is used to create static vector files, and are frequently produced using Catalyst or other Adobe software, although they can be written by hand.

MXMLG’s format is very similar to that of FXG – they use a number of the same tags. Adobe’s even published a helpful guide on converting FXG to MXMLG. However, MXMLG is much more powerful as it’s rendered at runtime, and as such, you can customize it on the fly, even adding styling hooks to change properties via CSS.

The results from my benchmarking were somewhat surprising – I had assumed that FXG would use less memory, but it actually uses the tiniest bit more.

In both tests, I created 100 buttons and applied a skin to each of these buttons via the ‘Button’ css selector. The skins where identical, except in one I used a FXG component, and in the other I used MXMLG.

The Results

The swf’s themselves were fairly similar in size 41,020 bytes for the MXMLG version, FXG at a slightly lower weight at 40,900 bytes.

So the two demos used almost exactly the same amount of memory, the FXG version using 3K more at max memory – see for yourself:

The Skin Code

And just in case you don’t believe me that the code is almost identical, here’s it is:

FXG Skin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*">
  <!-- host component -->
  <fx:Metadata>
    [HostComponent("spark.components.Button")]
  </fx:Metadata>
 
  <!-- states -->
  <s:states>
    <s:State name="disabled" />
    <s:State name="down" />
    <s:State name="over" />
    <s:State name="up" />
  </s:states>
 
  <!-- SkinParts
  name=labelDisplay, type=spark.components.supportClasses.TextBase, required=false
  -->

  <local:GraphicComp />
</s:Skin>

The FXG Component:

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<!-- GraphicComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
     <Rect id="rect1" width="200" height="200">
          <fill>
             <SolidColor color="#FFFFCC"/>
          </fill>
          <stroke>
             <SolidColorStroke color="#660099" weight="2"/>
          </stroke>
     </Rect>
</Graphic>

The MXMLG Skin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
    <fx:Script>
        <![CDATA[
           
        ]]>
    </fx:Script>
    <!-- states -->
    <s:states>
        <s:State name="disabled" />
        <s:State name="down" />
        <s:State name="over" />
        <s:State name="up" />
    </s:states>
   
    <!-- SkinParts
    name=labelDisplay, type=spark.components.supportClasses.TextBase, required=false
    -->

        <s:Rect id="rect1" width="200" height="200">
            <s:fill>
                <s:SolidColor color="#FFFFCC"/>
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke color="#660099" weight="2"/>
            </s:stroke>
        </s:Rect>
</s:Skin>
This entry was posted in Misc. and tagged , , , , , . Bookmark the permalink.

One Response to FXG vs MXML Graphics Benchmarking

  1. Pingback: Tweets that mention FXG vs MXML Graphics Benchmarking | Style & Error -- Topsy.com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>