SVG for FXML-Conversion


So some weeks ago I read Jasper Potts blog on FXG to FXML-Conversion tool (useing simple XSL-Stylesheet). This blog Jasper asked if there’s probably one day someone providing a conversion tool for SVG.

This has been on my list for some time now and because I was traveling a bit in the last 2 weeks I had some time to hack on such a converter. I’ve not used XSL but instead used xtend (svg-parser (java),fxml-converter (xtend)) (because an XML-File comes with a lot of multiline strings). It took some time to wrap my head around SVG and how I could translate this in FXML/JavaFX 2.0 API calls but I finally I’m at a point where I have something to show off:

Please note that the JavaFX 2.0 image on the left is only made up of primitive JavaFX 2.0 elements (Circles, SVGPaths, Rect, Gradients, …) and it by far does not yet handle all the nifty stuff one can do with SVG but it shows me that such a conversion tool is doable to some extend though e.g. when it comes to filtering, … SVG has much more definitions than the JavaFX-API currently provides.

I was not even able to convert the SVG-Gaussian-Blur to JavaFX’ Gaussian-Blur (but that might just me I’m not an expert in graphics stuff), SVG allows to apply multiple filters/effects to a node, … . So to provide full SVG-Support – without residing to libraries like Batik – in JavaFX 2.x we’d need more API (or at least a tutorial how to e.g. write custom effects) but even with the current API one can get quite far as you don’t notice any missing thing in the above screenshot.

I’ve pushed the orignal svg-File (from the KDE oxygen-theme) and the resulting fxml-File to my git repo so that you can compare them.

17 thoughts on “SVG for FXML-Conversion

  1. Sébastien Bordes (@SebastienBordes) January 16, 2012 / 8:46 pm

    Good Job !!
    Fxml is so boring to write but interesting to use with cllaboration of graphic designers
    Is there any chance to be able to download it ? or to see it packaged into e(fx)clipse ?
    Thx

    • Tom Schindl January 16, 2012 / 10:00 pm

      Yes the plan is to provide FXG and SVG import wizards within e(fx)clipse which can also run outside eclipse (e.g. as an ant-task)

  2. Alexander Geist March 1, 2012 / 10:35 am

    Nice work! Converting single svgs goes fast and correct. Tried to convert a larger svg file, the result is a single black shape. Maybe you could look over it.

    http://www.xmediagrabber.de/files/tiger.svg

    • Tom Schindl March 1, 2012 / 10:38 am

      I filed http://efxclipse.org/trac/ticket/79 and will take a look – I know I implemented polygone support after I released 0.0.12 so maybe it is already implemented in the git-repo but I’ll check it out.

      • Tom Schindl March 1, 2012 / 11:04 pm

        ok – i found the reason – I’m not inheriting the attributes from the g-container – I’ve started fixing this and it will be part of the next release

  3. Silvan Hollenstein March 28, 2012 / 1:50 pm

    Thanks a lot for your converter.

    We have a big floor plan in SVG and converted it to fxml. Everything looks fine except for a few small shapes which are missing in the fxml-file. Other similar shapes are correctly converted. I don’t see the difference. You may want to have a look on it.

    I’ve extracted only the main thing from the floor plan.
    https://docs.google.com/open?id=0BxKQjvmaacEQdjhVbFM3QzBSSm14akd4RllFNXV6dw

    Have you also thought about preserving the IDs from svg?

    Cheers, Silvan

    • Tom Schindl March 28, 2012 / 3:38 pm

      I’ll try to take a look. I’m currently at EclipseCon and aferwards on holiday so it might take some time. I’ve created a ticket at http://efxclipse.org/trac/ticket/100

    • Tom Schindl March 28, 2012 / 3:55 pm

      On first sight is it looks like the problem is that the converter sets the fill and stroke fills to transparent instead of black but i need to dig deeper and test more

  4. Lloyd Edano August 3, 2012 / 8:47 am

    Hello, nice converter you have there. Can this be used in code like adding a .jar API that I reference to my JavaFX project?

    Or I can only use it with Eclipse / or commandline?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s