How to use graphic svg elements with apache royale?

Question

Fan of Flex, I just discover apache Royale. I knew about FalconJS, I thought it was death, but no, after seeing Tour of jewel I'm very exited to use it. Thanks to all contributors. I play a little with exemples, but I don't know how to add svg graphic. I tried something like this in a <j:view>

<svg:Rect height="50" width="50" fill="#ff0000"/>

But got error :

Uncaught TypeError: cls is not a constructor
    at Function.org.apache.royale.utils.MXMLDataInterpreter.generateMXMLObject (MXMLDataInterpreter.js:58)

Could someone give me an exemple of drawing Rectangle ou Circle with border and background color ? Used Royale version is 0.9.4

Here is full code :

<j:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:js="library://ns.apache.org/royale/basic" 
               xmlns:local="*" xmlns:layouts="spark.layouts.*" xmlns:svg="library://ns.apache.org/royale/svg"
               >

    <j:initialView>
        <j:View>
                <svg:Rect height="50" width="50" fill="0xff0000"/>
        </j:View>
    </j:initialView>
</j:Application>

Best Regards

Answer 1

You can also specify the fill without using binding (which I probably should have answered first):

<js:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:js="library://ns.apache.org/royale/basic" 
    xmlns:svg="library://ns.apache.org/royale/svg">
    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>
    <js:initialView>
        <js:View width="100" height="100">
            <svg:Rect height="50" width="50">
                <svg:fill>
                    <js:SolidColor color="0xff0000"/>
                </svg:fill>
            </svg:Rect>
        </js:View>
    </js:initialView>
</js:Application>

For circle (tested working):

<js:View width="100" height="100" >
        <svg:Ellipse height="10" width="10" x="50" y="50">
            <svg:stroke>
                <js:SolidColorStroke color="0xff0000" weight="1"/>
            </svg:stroke>
        </svg:Ellipse>
</js:View>

But using circle doesn't work (not sure if it's a bug or not) :

<js:View width="100" height="100" >
        <svg:Circle height="10" width="10" x="50" y="50">
            <svg:stroke>
                <js:SolidColorStroke color="0xff0000" weight="1"/>
            </svg:stroke>
        </svg:Circle>
</js:View>