Problems with svg

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Problems with svg

chris_flex
This post was updated on .
Hot to get an SVG smoothly scaled? What am I doing wrong?

My test - the svg and the fxg are looking exactly the same in illustrator:

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:local="*" creationComplete="test(event)">

    <fx:Script><![CDATA[
        import spark.core.SpriteVisualElement;

        [Embed(source="test3.svg")]
        public var testSVG:Class;

        public var testFXG:SpriteVisualElement = new test3();

        private function test(e:Event):void
        {
            var m:Matrix = new Matrix();
            m.scale(4, 4);

            var s:Sprite = new testSVG();

            var bd:BitmapData = new BitmapData(200, 200, true, 0x00ffffff);
            bd.draw(s, m, null, null, null, true);
            bi1.source = bd;

            var bd2:BitmapData = new BitmapData(200, 200, true, 0x00ffffff);
            bd2.draw(testFXG, m, null, null, null, true);
            bi2.source = bd2;
        }


        ]]></fx:Script>

        <s:HGroup padding="20">
            <s:Group>
                <s:BitmapImage id="bi1" width="200" height="200" smooth="true" smoothingQuality="high" />
            </s:Group>
            <s:Group>
                <s:BitmapImage id="bi2" width="200" height="200" smooth="true" smoothingQuality="high" />
            </s:Group>
        </s:HGroup>

</s:View>

leads to ...

<http://apache-flex-users.2333346.n4.nabble.com/file/t605/test.png



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Problems with svg

chris_flex
Is anyone out there displaying an svg in apache flex / air without having
this problem? So am I doing something wrong or is this a bug?



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Problems with svg

Greg Dove
Are you referring to embedding an svg asset?

I believe that if you use svg features that are not easily 'translatable'
to be expressed as swf-style vector instructions, then it will be rendered
as a bitmap and embedded that way.
I suspect there are differences in how smart this conversion process is in
the compiler vs. how well some tools can do 'save as fxg' from svg format.
 Not sure that is helpful but it might be something to pursue in terms of
researching this further.


On Tue, Mar 6, 2018 at 3:01 AM, chris_flex <[hidden email]> wrote:

> Is anyone out there displaying an svg in apache flex / air without having
> this problem? So am I doing something wrong or is this a bug?
>
>
>
> --
> Sent from: http://apache-flex-users.2333346.n4.nabble.com/
>
Reply | Threaded
Open this post in threaded view
|

Re: Problems with svg

Erik J. Thomas
In reply to this post by chris_flex
Does your FXG version of the graphic have a Path element? It should look like this:

<s:Path winding="nonZero" data="M19.5103 7.20996C19.0703 7.20996 18.7202 ... 6.76025Z">
   <s:fill>
      <s:SolidColor id="fill" color="{color}"/>
   </s:fill>
</s:Path>

If the content of your SVG looks like this:

<image width="100" height="100" xlink:href="data:image/png;base64,...">

Then it's just an embedded bitmap and won't scale beyond it's width and height without pixelating. And any resizing other than the actual size will likely result in loss of quality however small.

Here is more info from Adobe: Converting FXG elements to MXML graphics <https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&ved=0ahUKEwiGu9m469XZAhVyn-AKHV4aDPEQygQIOTAC&url=https%3A%2F%2Fhelp.adobe.com%2Fen_US%2Fflex%2Fusing%2FWSda78ed3a750d6b8f26c150d412357de3591-8000.html%23WSDAD87261-09E9-4091-8169-F2758607F125&usg=AOvVaw0gnAxHBV7oGjnJX2jl8Dit> - this might help narrow your issue. We use a lot of FXG graphics that are true vectors so size is never an issue on any device and any resolution. But we use Adobe Illustrator CS6 (old version that still supports export to FXG) to directly export AI to FXG and then we convert the FXG to MXML so we can data bind properties like color.

Here's a simple tool to convert to MXML:

https://github.com/JonDum/FXG-to-MXML-Converter

Cheers,

Erik

On Feb 12, 2018, at 9:06 AM, chris_flex <[hidden email]> wrote:

Hot to get an SVG smoothly scaled? What am I doing wrong?

My test - the svg and the fxg are looking exactly the same in illustrator:



leads to ...

<http://apache-flex-users.2333346.n4.nabble.com/file/t605/test.png>



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/


Reply | Threaded
Open this post in threaded view
|

Re: Problems with svg

OmPrakash Muppirala
In the past, I've had to do something like this make svg show up without
distortions:

<s:BitmapImage source="@Embed(source='logo.svg')"
        width="100" height="100"
        smooth="true" smoothingQuality="high"/>

Have you tried something like this?

Thanks,
Om

On Mon, Mar 5, 2018 at 11:10 AM, Erik J. Thomas <[hidden email]> wrote:

> Does your FXG version of the graphic have a Path element? It should look
> like this:
>
> <s:Path winding="nonZero" data="M19.5103 7.20996C19.0703 7.20996 18.7202
> ... 6.76025Z">
>    <s:fill>
>       <s:SolidColor id="fill" color="{color}"/>
>    </s:fill>
> </s:Path>
>
> If the content of your SVG looks like this:
>
> <image width="100" height="100" xlink:href="data:image/png;base64,...">
>
> Then it's just an embedded bitmap and won't scale beyond it's width and
> height without pixelating. And any resizing other than the actual size will
> likely result in loss of quality however small.
>
> Here is more info from Adobe: Converting FXG elements to MXML graphics <
> https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&ved=
> 0ahUKEwiGu9m469XZAhVyn-AKHV4aDPEQygQIOTAC&url=https%
> 3A%2F%2Fhelp.adobe.com%2Fen_US%2Fflex%2Fusing%
> 2FWSda78ed3a750d6b8f26c150d412357de3591-8000.html%
> 23WSDAD87261-09E9-4091-8169-F2758607F125&usg=AOvVaw0gnAxHBV7oGjnJX2jl8Dit>
> - this might help narrow your issue. We use a lot of FXG graphics that are
> true vectors so size is never an issue on any device and any resolution.
> But we use Adobe Illustrator CS6 (old version that still supports export to
> FXG) to directly export AI to FXG and then we convert the FXG to MXML so we
> can data bind properties like color.
>
> Here's a simple tool to convert to MXML:
>
> https://github.com/JonDum/FXG-to-MXML-Converter
>
> Cheers,
>
> Erik
>
> On Feb 12, 2018, at 9:06 AM, chris_flex <[hidden email]> wrote:
>
> Hot to get an SVG smoothly scaled? What am I doing wrong?
>
> My test - the svg and the fxg are looking exactly the same in illustrator:
>
>
>
> leads to ...
>
> <http://apache-flex-users.2333346.n4.nabble.com/file/t605/test.png>
>
>
>
> --
> Sent from: http://apache-flex-users.2333346.n4.nabble.com/
>
>
>