5 Replies Latest reply on Jul 28, 2009 11:59 AM by _Natasha_

    Scalable Vector Graphics (SVG) image format processing

    Aneesh PS

      Scalable Vector Graphics (SVG) is a family of specifications of XML-based file format for describing two-dimensional vector graphics, both static and dynamic.

       

      How we will process this picture format in FLEX?????

      Plz help me.......!

        • 1. Re: Scalable Vector Graphics (SVG) image format processing
          _Natasha_ Level 4

          Hi,

          it's an XML, so you can process it as XML.

          If you what to render it, you should get SVG specs (http://www.w3.org/TR/SVG11/) and parse your file.

          • 2. Re: Scalable Vector Graphics (SVG) image format processing
            Gregory Lafrance Level 6

            If this post answers your question or helps, please mark it as such.

             

            Using SVG files in Flex in Flex is more limited than for other graphics formats:

             

            Flex supports importing Scalable Vector Graphics (SVG) images, or a GZip compressed SVG image in a SVGZ file, into an application. This lets you import SVG images and use SVG images as icons for Flex controls.

             

            Flex supports a subset of the SVG 1.1 specification to let you import static, two-dimensional scalable vector graphics. This includes support for basic SVG document structure, Cascading Style Sheets (CSS) styling, transformations, paths, basic shapes, colors, and a subset of text, painting, gradients, and fonts. Flex does not support SVG animation, scripting, or interactivity with the imported SVG image.

             

            For example, you use the [Embed] metadata tag in ActionScript to embed an SVG image, as the following code shows:

             

            [Embed(source="logo.svg")]
            [Bindable]
            public var imgCls:Class;
            

             

            -------------------------------------------------

            When using the SWFLoader control with an SVG file, you can only load it by using an Embed statement; you cannot load an SVG file at run time. The load() method of the SWFLoader control only works with GIF, JPEG, PNG, and SWF files; you cannot use it to load SVG files.

            -------------------------------------------------

          • SVG text is rendered as nonsearchable and nonselectable SWF shape outlines, meaning it is not rendered as native text in Flash Player or AIR
            • 3. Re: Scalable Vector Graphics (SVG) image format processing
              Aneesh PS Level 1

              Respected sir,

              First of all thank you very much for responding to my mail.

              It was really informative.

              Right now I am working on a module on desktop sharing(Adobe Flex) and it

              requires dynamic loading of image(run time) and as you mentioned that SVG is

              the best format for dealing with images in Flex and from your previous mail

              I understood how to statically embed SVG images to the imageLoader component

              , it will be really informative if you can suggest a method to some how

              dynamically load it.

               

              Also is there any method to capture images and store directly to SVG format?

              At present we are taking the snapshot using FlourineFx and storing it in jpg

              format.But we couldn't find a compatible tool for Flex to convert jpg to

              SVG.

               

              We would be really thankful if  you can help us in this regard.

              Waiting for your reply.

               

              Thanking you,

              Your's fauthfully

              Aneesh P S

              • 4. Re: Scalable Vector Graphics (SVG) image format processing
                Aneesh PS Level 1

                Respected madom,

                First of all thank you very much for responding to my mail.

                Right now iam working on a project module named 'desktop sharing' in flex and it requires dynamic loading of image(SVG format).

                It will be really helpfull for me if you can suggest a method for dynamic loading of SVG image format.

                 

                Method 1 :-

                [Embed(source='1.svg')]
                [Bindable]
                private var svg1:Class;

                <mx:Image id="image1" source="{svg}" x="42" y="21" width="206" height="218"/>

                 

                Method 2 :-

                <mx:Image id="image1" source="@Embed(source='1.svg' )" x="42" y="21" width="206" height="218"/>

                 

                The above two methods are working.

                But when we use this inside a function call, we didn't get the output.

                 

                Method 3 :-

                image2.source = svg1;

                The above code is working inside the function,but we didn't get the dynamic loading effect.

                 

                 

                Method 4 :-
                image2.source = "@Embed(source='1.svg' )";

                The above code is not working inside the function,ie no image is displayed.

                 

                 

                 

                Also is there any method to capture images and store directly to SVG format?

                At present we are taking the snapshot using FlourineFx and storing it in jpg

                format.But we couldn't find a compatible tool for Flex to convert jpg to

                SVG.

                 

                Plz help me...

                 

                with regards

                Aneesh PS

                • 5. Re: Scalable Vector Graphics (SVG) image format processing
                  _Natasha_ Level 4

                  Hi.

                  if you want to use Image to present an SVG files, the only way is to embed files. For raster images it's possible to call load(url) method, but  it doesn't work for SVG.

                  For dynamic content you need special component to render. I think it's not a big problem to find some sources in Internet. I usually use Google for searching. For example, there is a component SVGViewer written in AS3.

                   

                  I don't know is there any components for saving drawing in svg format. But It's absolutely clear that converting jpg to svg is not a good idea: jpg is a raster format, svg - vector. You loose all data about vector this way. Try to google some examples or solutions - it's not so difficult to realize this function.

                   

                  Hope this helpful.