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.

This entry was posted in e(fx)clipse. Bookmark the permalink.

17 Responses to SVG for FXML-Conversion

  1. 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 says:

      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. Great News !!! I’m impatient ot test it !

  3. Pingback: Java desktop links of the week, January 24 | Jonathan Giles

  4. Pingback: JavaFX links of the week, January 24 // JavaFX News, Demos and Insight // FX Experience

  5. Pingback: e(fx)clipse 0.0.12 released | Tomsondev Blog

  6. Alexander Geist says:

    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 says:

      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 says:

        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

  7. Silvan Hollenstein says:

    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

  8. Lloyd Edano says:

    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?

  9. parvus23 says:

    Hi Tom, great work with the converter :-)! I tried to convert the brilliant svg (css) flags from https://github.com/lipis/flag-icon-css. Unfortunately not all flags can be converted – e.g. https://github.com/lipis/flag-icon-css/blob/master/flags/4×3/ae.svg doesn’t convert, Do you have any idea why not?

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.