Support export to FXG

Bug #625140 reported by su_v on 2010-08-27
56
This bug affects 10 people
Affects Status Importance Assigned to Milestone
Inkscape
Wishlist
jazzynico

Bug Description

Converted from question 122807 "Could You please add FXG export functionality since SVG support is deprecated in flex SDK 4?"
<https://answers.launchpad.net/inkscape/+question/122807>:

Could You please add FXG export functionality since SVG support is deprecated in flex SDK 4? There was ability to develop flash games or media with open source software only, now it's gone, would be great to get it back. Thanks in advance!

Information about FXG file format:
<http://en.wikipedia.org/wiki/FXG>

FXG 1.0 - Functional and Design Specification
<http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification>

FXG 2.0 - Functional and Design Specification
<http://opensource.adobe.com/wiki/display/flexsdk/FXG+2.0+Specification>

su_v (suv-lp) on 2010-08-27
Changed in inkscape:
importance: Undecided → Wishlist
tags: added: exporting
description: updated
su_v (suv-lp) on 2010-08-27
description: updated
jazzynico (jazzynico) wrote :

I've quickly searched the web for such a converter, without success.
I such a tool doesn't exist, I guess it's not too difficult to reuse our XSLT extension system (and reuse the XAML export template).

Changed in inkscape:
assignee: nobody → JazzyNico (jazzynico)
status: New → Triaged
su_v (suv-lp) wrote :

related (also requests import):
Bug #663584 “Import, Edit and Export FXG”:
<https://bugs.launchpad.net/inkscape/+bug/663584>

jazzynico (jazzynico) on 2010-11-04
Changed in inkscape:
status: Triaged → In Progress
Jon A. Cruz (jon-joncruz) wrote :

Despite Adobe's efforts to abandon and kill SVG, including creating FXG, the industry is going with SVG. Very recently they had capitulated and added SVG support for their other products. Even MSIE now is supporting SVG. So there is less need on this front.

However, if independent flex users would like to contribute import and export extensions for Inkscape, those would be welcome

jazzynico (jazzynico) wrote :

Thanks for the news, Jon, I didn't heard about it.
I've already started to implement FXG export, based on the XSLT extension already in use for XAML export. Since FXG is not very far from SVG, it doesn't look too difficult or long to do.
On the other hand, the export format list is already rather long, and I don't want to add an unnecessary one. Does Adobe plan to add SVG as an import format for Flex too?

Semen Frish (semen-frish) wrote :

@JazzyNico As far as I know Adobe just removed support from flex 4 SDK in flex SDK 3.5 it SVG was working nearly properly. Here is some more info on flash game development with free software http://nucleart.net/en/presentations/110.html (presentation for FlashGAMM #2 conference). Now We have 2 ways: give up with using Inkscape for flash game development and buy Illustrator or write FXG export functionality by ourselves as @joncruz advised. Thanks for explanation and help, hope FXG functionality will appear in Inkscape like it was with XAML or SVG will be supported in newer flex SDK.

Jaz (jaz6ix) wrote :

In my workflow I use Inkscape extensively because I get things get done more quickly, however I cannot use the svg in Illustator, because of poor SVG to FXG support in Illustrator and no SVG to FXG support in Inkscape. As a result I have to redraw most part of every single mockup I do in Inkscape in Illustrator as the graphics is being used in a flex app in FXG format. I have realized that I would have much better productivity if I could somehow ditch one of the vector drawing programs and I would hate it to be Inkscape as I can draw considerably faster in Inkscape. I believe FXG support in Inkscape will do more good than harm to help win the war against Adobe's FXG format, OpenOffice supporting MS Office file formats is a prime example of what I mean. I'm sure a lot of people would have been turned off by OO if it didn't support MS formats just like many people will be turned off by Incskape if it cannot be used by professionals. I'd say 90% of the designers also design for Adobe products and why would they take time to learn Inkscape for specific non-adobe related projects if Illustrator can do everything for them and Inkscape cannot.

Jaz (jaz6ix) wrote :

Oh, btw I design UI's for flex and I use a lot of rounded rectangles and ellipses which will be converted to bitmaps in FXG by Illustrator if imported from svg files.

Jon A. Cruz (jon-joncruz) wrote :

A key point is that there is a big difference between "deprecating" and "dropping". Dropping is much more severe and does raise the priority of this item. On the other hand Microsoft just gave in and stopped trying to push Silverlight for the desktop and is going with HTML5 + SVG now. Adobe might follow suit, but we're not sure of the timeframe for that.

Emkeyen (emkeyen) wrote :

I'm working on a open source setup/distribution for developing AS3/Flash/Flex and would like to push for a FXG exporter.

@JazzyNico, how far along are you? I haven't done anything in XSLT/XAML, but is there anything I can do to help?

Thanks.

Semen Frish (semen-frish) wrote :

@joncruz I see it's a political question. Maybe we should better ask for help UniConverter http://sk1project.org/modules.php?name=Products&product=uniconvertor team?

jazzynico (jazzynico) wrote :

Done:
* Shapes and Path.
* Transforms (matrix, rotation, translation, scale).
* Flat colors for fill and strokes.
* Fill rules.
* Layers and groups.
* Strokes linecap, linejoin, mitterlimit.

Todo:
* Gradient fill (good progress).
* Pattern fill (not started).
* Clip and mask (not started).

I don't plan to work on filters (or maybe only on basic blurs).
Some elements or attributes doesn't seem to exist in FXG (stroke dasharray and dashoffset, defs -library is a very different concept).

jazzynico (jazzynico) wrote :

And todo:
* Text (good progress).

Semen Frish (semen-frish) wrote :

@JazzyNico Great thanks! If You need help with testing I would be glad to. Thanks again!

Emkeyen (emkeyen) wrote :

@JazzyNico: If it is a plugin or if you have compiled binaries for Win32 I'm also interested in testing. Running WinXP and Vista here.

jazzynico (jazzynico) wrote :

@Emkeyen - This is an XSLT extension (it should work with any XSLT processor), and thus will work if you install it directly in your Inkscape extension directory. I still have to finish clipping, text and gradients. I'll post it here as soon as it's a bit more usable.

Of course, your help is welcome. Since I'm not an Adobe user, I can't test with Illustrator, Flash builder or anything else (except if I find an easy way to test it with the open-source Flash SDK on Ubuntu). My only help is currently the FXG specification (which is not always very clear...) and http://fxgeditor.7jigen.net/ (but there are some bugs). I'm also going to test Wonderfl (http://wonderfl.net/), but it doesn't look straightforward.

Semen Frish (semen-frish) wrote :

@JazzyNico
You can easily test with Flex 4 SDK http://opensource.adobe.com/wiki/display/flexsdk/Setup+on+Linux

as3 code:

package {
 import flash.display.Sprite;

 public class Main extends Sprite {
 [Embed(source='test.fxg')]
 public var TestFXG:Class;
 public var testSprite:Sprite = new TestFXG();

    public function Main() {
  addChild(testSprite);
 }
}

jazzynico (jazzynico) wrote :

@Semen Frish - Thanks for the tip! Checkout in progress...

Jens Wegar (jens-wegar) wrote :

This is great news! I've been hoping for an option to remove the need of Adobe products in the design process of Flex apps. Let me know if I can help with testing. I'm running OS X 10.6.5 and would be using the exported fxg with Flash Builder.

Semen Frish (semen-frish) wrote :

@Jens Wegar with older Flex SDK 3.5 You can make design with Inkskape and export it to .svg than embed to Flex app. FXG needed only from Flex SDK 4 since .svg support was deprecated.

Jens Wegar (jens-wegar) wrote :

@Semen Frish Thanks, but I knew that :) I should have clarified that I was hoping for a way to do it using the Flex 4 SDK. You can actually also use SVG in Flex 4, it's just that it gives a warning about being deprecated when you publish. But what I want is to start using the fxg format and that's why I'm looking forward to getting the export to work for Inkscape.

Semen Frish (semen-frish) wrote :

@Jens Wegar pity but with flex sdk 4.1 even with complier strict mode set to false I've got an error:
"@Preloader_mobile.as: Warning: The use of SVG has been deprecated since Flex 4. Please use FXG. Build halted with errors (fcsh)".
With flex SDK 3.5 everything worked properly.

Jens Wegar (jens-wegar) wrote :

@Semen Frish How are you compiling your project? With Eclipse/Flash Builder, command line, Flash Develop, or some other IDE? Because I'm compiling with Flash Builder and I do get that same warning, but it doesn't halt the build, it compiles just fine. You could try to set -warnings=false as a compiler argument. That should prevent the compiler from halting on warnings.

Semen Frish (semen-frish) wrote :

@Jens Wegar I use FlashDevelop. Show Deprecation Warnings set to False in Compiler Options is working :) Great thanks!

jazzynico (jazzynico) wrote :

The first version of the FXG export extension is now ready.

Lots of things work as expected, but some SVG features just don't exist in FXG, and are difficult to implement with a workaround.
The main annoyance here is the lack of elliptical arc curve path commands support in FXG (which requires an arc to curve conversion before exporting) and the limited gradients and text support. Details on the missing features and on the tests can be found on the wiki (http://wiki.inkscape.org/wiki/index.php/SpecFXGExport).

To test the extension, uncompress the attached archive in your user extensions folder[1] and restart Inkscape. A new entry should show in the File>Save As dialog's formats list.

Don't hesitate to comment (preferably on the wiki page).

[1]
On GNU/Linux: $HOME/.config/inkscape/extensions
On Windows (English localisation): C:\Documents and Settings\User\Application Data\Inkscape\extensions
On OS-X: /Applications/Inkscape.app/Contents/Resources/extensions

su_v (suv-lp) wrote :

<off-topic>
> On OS-X: /Applications/Inkscape.app/Contents/Resources/extensions

JFTR: on Mac OS X you can install user extensions like on GNU/Linux into
 $HOME/.config/inkscape/extensions

(Use 'Cmd+Shift+G' in the finder to access hidden dot-folders, or type in the terminal 'open ~/.config/inkscape')
</off-topic>

jazzynico (jazzynico) wrote :

@~suv - Thanks! I add it to my dev notes for the next time...

Jens Wegar (jens-wegar) wrote :

Great work so far! The ellipse limitation did jump at me straight away. I get the following error when compiling:

com.adobe.fxg.FXGException: Path data is invalid.

This happens at line 81, which should be the head of the stickman on the box (see attached zip->ApplicationIconFormatted.fxg)

Also if possible, the gradient support would need improvement. Having looked at what the designers I've worked with push out, both gradients and ellipses tend to be in heavy use, so I recon it would be a priority to improve support in these two areas. A minor issue seems to be that the scaling is not quite correct (see attached zip->SVG_FXG_export_comparison 20101216). Not sure however if this is because of differences in how Flex handles svg vs. fxg or if it's an issue with the fxg exporter.

I tried using the created fxg as a base for a new project in Flash Catalyst, but it seems Catalyst does not understand the file correctly. The artwork is there and layers are created, but the artwork only shows up as transparent on the canvas (although the layer icons for some reason do render the artwork). Also the syntax highlighting in the Catalyst code viewer does not seem to recognize the fxg code generated by the Inkscape export. I'll try to figure out why this is.

I attached a zip with the files that I used for testing. The package contains the following:

application-icon.svg - The original file as created in Inkscape
ApplicationIcon_OriginalExport.fxg - The exported fxg directly from Inkscape
ApplicationIconFormatted.fxg - The same as above, expect I added line breaks and indentation between tags for easier debugging in Flash Builder (btw. it would be nice if the exporter could do this automatically)
ApplicationIcon.fxg - The fxg after I converted the ellipse to a path as suggested in the Wiki
SVG_FXG_export_comparison 20101216.png - A screenshot of what the SVG and FXG look like in a Flex application. Image on the right is the application-icon.svg and what it should look like. Image on the left is the ApplicationIcon.fxg.

But again, so far great work. Using this I can already start to implement FXG in my projects.

Jens Wegar (jens-wegar) wrote :

Update on the Catalyst issue. If I use the generated fxg as a base for a new project (File->New project from Design file in Catalyst) then for some reason the artwork does not show up on the canvas even though it's imported into the correct layers etc. If however I first create a blank project and then import the fxg (File->Import->Adobe FXG File) then the artwork shows up as expected.

However, it seems Catalyst does not understand the <mask> tag inside the generated fxg. It shows up as a box with a red X inside on the canvas and as a empty layer in the layers list. It's not possible to delete this layer from within Catalyst for some reason and the mask does not seem to affect the artwork in any way. Workaround is to delete the mask tag from the fxg before importing it to Catalyst.

jazzynico (jazzynico) wrote :

Thanks for your comment.

For your information, all the tests are performed with the Flex opensource SDK 4.1, using a very simple mxml file (a panel and a comp., see attachment). I first convert the SVG to FXG with xslproc (command line: xsltproc svg2fxg.xsl test.svg > test.fxg) in order to get error messages. If everything is ok, I test again with Inkscape and then compile the mxml file with mxmlc (<static-link-runtime-shared-libraries>, in flex-config.xml, is set to true).

The exported FXG is based on the FXG2.0 specification (http://opensource.adobe.com/wiki/display/flexsdk/FXG+2.0+Specification). Does your catalyst version support FXG2.0 or only 1.0? As far as I can tell, masks should also work with 1.0, except if the application only supports a subset of FXG. Do you have an example file of failing mask so that I can test?
I also don't notice scaling errors with the Flex SDK.

As for the line breaks, it works correctly when I use xslproc (due to <xsl:output indent="yes"/> in the XSL file), but not with Inkscape. That's another reason why I first test with xslproc... I'll try to find out where it fails in the Inkscape extension code later.

Semen Frish (semen-frish) wrote :

@JazzyNico Great thanks! On Windows Vista path is "C:\Program Files\Inkscape\share\extensions". Export and compile using FlashDevelop with Flex SDK 4.1.0.16076 succeeded, texts are missing but graphics looks good. Going to test more precisely and comment here and on wiki. Thanks once again!

Jens Wegar (jens-wegar) wrote :

For the record, my setup is on OS X 10.6.5, Flash Builder 4.0.1 Eclipse plugin with Flex SDK 4.1.0 and Flash Catalyst CS5 1.0.0. As far as I know, the version of Catalyst that I have should support FXG 2.0 (it's a version which I just downloaded a month ago or so). But I haven't been able to find any specs on Catalyst that would actually confirm which version of FXG it supports.

The thing is, as far as I know I haven't used any masks in my Inkscape project so I don't understand why there even is a mask tag in the fxg file? It seems the mask is just large enough to cover the page size of the Inkscape project so I'm wondering if it's maybe a tag that gets added automatically by Inkscape to restrict the viewport somehow?

I attached a zip with a catalyst project that contains a failing mask layer, the fxg file I imported into Catalyst and a screenshot of what the layers tab in Catalyst looks like after import. Note the layer with a big red X, that's the mask layer which I can't delete inside Catalyst for some reason. Hope this helps

jazzynico (jazzynico) wrote :

This mask, just under the root Graphic element, clips the whole drawing to the dimensions given in the svg element (height and width attributes). According to the spec (http://opensource.adobe.com/wiki/display/flexsdk/FXG+2.0+Specification#FXG2.0Specification-TheRootGraphicElement), ok to put it here, but maybe catalyst doesn't like it.

jazzynico (jazzynico) wrote :

Tell me if you think this outer clip is not useful. I added it to be sure to export the page content and not the whole drawing, and thus can be easily removed.

FYI, I'm currently trying to improve gradients, but it needs some math and thus require exslt functions that are not currently supported in Inkscape (mapping Inkscape gradients attributes to FXG ones directly is not possible at all, I'm afraid) and won't be available before 0.49.
As for the elliptical arcs, I'll probably replace the path with a warning comment in the (short-term) FXG code so that the compiler doesn't fail.
Using an arc to curve template requires some exslt math and string functions, and is targeted to 0.49 too.

Changed in inkscape:
milestone: none → 0.49
jazzynico (jazzynico) wrote :

@Semen Frish - Is your text in a flowRoot (text box created with Clic+drag)? That kind of text is not currently supported (but I plan to).

Semen Frish (semen-frish) wrote :

@JazzyNico Actually a I haven't managed with any text, graphic object is displayed. Test .as3 code, .fxg and .svg attached.

Just recieving several weird errors:
TypeError: Error #1009: Cannot access a property or method of a null object reference:
 at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::updateCallbacks()
 at mx.core::UIComponent/set nestLevel()
 at spark.core::SpriteVisualElement/http://www.adobe.com/2006/flex/mx/internal::addingChild()
 at spark.core::SpriteVisualElement/addChild()
 at Text1_Text_2068241093/createText()
 at Text1_Text_2068241093()
 at flash.display::Sprite/constructChildren()
 at flash.display::Sprite()
 at flash.display::MovieClip()
 at flash.display::Sprite/constructChildren()
 at flash.display::Sprite()
 at flash.display::MovieClip()
 at flash.display::Sprite/constructChildren()
 at flash.display::Sprite()
 at mx.core::FlexSprite()
 at spark.core::SpriteVisualElement()
 at Text1()
 at Main()

jazzynico (jazzynico) wrote :

@Semen Frish - Just tested your FXG file with Flex SDK 4.1. No compiler error, result attached.
As expected, everything is ok except the flowRoot element.
I've also compiled your AS3 file, and even if there's no compiler error, the generated SWF file is lighter, and the text are not rendered at all.

I guess this is a library issue. When compiling my mxml file, lots of libraries are embedded in the SWF (including textLayout, spark, etc.) because I set <static-link-runtime-shared-libraries>, in flex-config.xml, to true. There's probably an equivalent setting for as3 in the config file or in the as3 one.

Semen Frish (semen-frish) wrote :

@JazzyNico Thanks for the quick response! 1. I don't have an compiler error it's runtime error. I use debug flash player (http://www.adobe.com/support/flashplayer/downloads.html). 2. Your project is .mxml based and my is plain as3 (no mxml markup), my compile result .swf is also attached no texts at all.

jazzynico (jazzynico) wrote :

@Semen Frish - I confirm I get the same result as yours when I compile your as3 file. Since the SWF file doesn't have the same size when compiled from mxml or as3, I'd say the required libs are not embedded in the file a compile time with as3, and thus need to be known when running the SWF. Did you try to embed the SWF in an HTML file (and add the necessary links in it)?
Just a guess. I don't even know if it's possible. Unfortunately I'm not an as3 expert (well, I'm not a mxml expert either, and I learned the minimum necessary to run my tests...) and can't really help with runtime issues.

jazzynico (jazzynico) wrote :

Unrelated to the last few comments, a patch to add XSLT indentation support to Inkscape (based on the trunk, revision 9962).

Semen Frish (semen-frish) wrote :

@JazzyNico Great thanks for Your help! I'll try to find out which libraries is missing by including related libraries. I'll post here If I succeed. Anyway It's not an critical issue, all texts in my projects are taken from dictionary file not from .fxg :) I can use .fxg _graphics_ from Inkscape and it's really great!

jazzynico (jazzynico) wrote :

Extension committed in the trunk, revision 9973.
Compared to the files attached to the report, I've added a very basic flowRoot support, and some code improvements. Elliptic arcs should no longer prevent the export from working (they are simply ignored).

jazzynico (jazzynico) wrote :

Updated extension committed in the trunk, revision 9982.
Some text and flowRoot improvements and code clean-up.
The extension files can be downloaded on Launchpad (http://bazaar.launchpad.net/~inkscape.dev/inkscape/trunk/files/head%3A/share/extensions/) and installed as explained in comment #24).

@JazzyNico: you are Santa Claus and saved me a ton of work... thanks a lot!

Just wanted to add that I had to change one minor thing in the stylesheet to make it work in my environment: instead of "http://ns.adobe.com/fxg/2008" as the default namespace I put "library://ns.adobe.com/flex/spark". I use IntelliJ Idea 10 and Apache Maven with Flex 4.1.

Again... awesome work...

BillyBobBaker (joffrey-romero) wrote :

Hello, awesome and very good work.

Is there a way to export FXG with inkscape command line ?

jazzynico (jazzynico) wrote :

BBB> Hello, awesome and very good work.
BBB> Is there a way to export FXG with inkscape command line ?

Thanks!
Unfortunately no. But you'll find some tips in the related Question #149732 (in French).

jazzynico (jazzynico) on 2011-08-17
Changed in inkscape:
status: In Progress → Fix Committed
Daniel (sam-dsouja-e) wrote :

Hi JazzyNico,

Will you please convert attached SVG file to FXG.
When I was tried it will doesn't convert that.

jazzynico (jazzynico) wrote :

Daniel,

Unfortunately, the converter doesn't support the Polygon element at all [1], and your file mainly uses it. Thus the exported file if almost empty, the Polygons being replaced by comments.
But there's an easy workaround that consists in converting all parts of your drawing to paths (select all with Ctrl+A, then use Path>Object to Path) before exporting it.

[1] FYI, all the tests and know limitations are available on the Inkscape wiki (http://wiki.inkscape.org/wiki/index.php/SpecFXGExport).

Marco Friz (gato-lona) wrote :

here un actionscript for transform Ellipse arc to bleizer cubic curve
I try simplify algoritme
http://code.google.com/p/as3svgrendererlib/source/browse/tags/trunk_before_flexprojects/com/lorentz/SVG/PathRenderer.as

Marco Friz (gato-lona) wrote :

well, now I can transform arc to bleizer curves in flx and Inkscape, but in inkscape i no can't import math lib. I compile with ubuntu

xsltproc -o test.fxg svg2fxg.xsl test.svg

add svg2fxg.xsl with sopport to arc (but with problems)

and add mxml to extract algoritmhe

problems: math prescision error
path closed in arc, ex: d="M 10,10 A 1 2 3 4 5 6 7" wrong
but
d="M 10,10 A 1 2 3 4 5 6 7 z" good
but is fix (se puede arreglar)

Alvin Penner (apenner) wrote :

@Marco, as mentioned in comment 47 above, if you want to convert an ellipse or an arc into a series of Bezier curves inside Inkscape, then you can do this using the menu item Path->Object to Path.

Marco Friz (gato-lona) wrote :

yes, but this is much work lol.
I add sopport to export arc, polygons and polyline (transform it in path)
you can try export lion.svg and transform a arc

Changed in inkscape:
status: Fix Committed → Fix Released
To post a comment you must log in.