JavaFx 2.0 – SVGPath

I start developing a new application for a software components editor (more informations soon). So I built my visual using Inkscape (as usual). Then I asked myself how to import my svg objects into JavaFx. I saw Inkscape does offer to export your svg into JavaFx code, but for now only JavaFx1.3 script is supported, so unable to do it for  my JavaFX2.0 business application… Well I was only half tempted by writing a JavaFX1.3 to JavaFX2.0 code converter…

What a good suprise to discover the SVGPath object in JavaFx ! It made my import work quite easy (not easier than if Inkscape generated it for me but….). I just use the Inkscape objects xml editor to copy the path informations as shown :

Then juste create a JavaFx SVGPath Object and fill the content attribute with what you’ve copied

And Here you are with your SVG interface work into your business JavaFx code ! Take care that positions of the SVG Object path points from Inkscape are relative to the top/left corner of your page.

I did not find out how to easily transform your SVG object fill information as available in the Inkscape xml editor into JavaFx. I might think of writing a small parser program that compute such information into code… For now I translated myself the fill information using JavaFx Painter.

If some of you have interesting informations about SVGPath in JavaFx, raise your hand !

6 comments

  1. I’m impressed, I have to say. Actually not often do I encounter a weblog that’s both educative and entertaining, and let me let you know, you could have hit the nail on the head. Your idea is excellent; the problem is something that not enough people are talking intelligently about. I’m very comfortable that I stumbled across this in my seek for one thing referring to this.

  2. Hi,

    I will take a look at what you did, It sounds interesting to me. A friend of mine told me that SVG files are quite messy when generated with Inkscape. Did you noticed such things when testing your SVG->Java2D converter ?
    I hope JavaFx plan to offer us a scene graph editor… And it seems (since I am looking at this post while writing http://fxexperience.com/2011/10/javafx-2-0-released/ ) that they does !
    So I go to see what’s new ! And I will definitely find time to look at your .svg parser, It seems a good idea to have one when making design, If it can manage JavaFx :)

  3. Hi
    I do exactly the same for some time now but for plain Java.
    Perhaps you would like to have a look at one of my projects.
    svg2Java it convers an SVG file to Java2D code. This works also for color, filling, and text information and produces good results.

    I planned to update this to support also JavaFX2 code but I will not find the time to do this in the next month. The code is not very nice but it could be a starting point and perhaps someone is willing to contribute a JavaFX2 output backend for it;-)

    Have fun,
    – Rossi

  4. Hi,

    True that it can be interesting to have an fxg parser ! But in my opinion I would prefer to use svg file since I am free to use Inkscape that IS free. I think I will rather wait for an Inkscape upgrade that manage JavaFX 2.0 export. And If it does not come shortly, I will write one !

    In my opinion, the article you put on Pivot is too agressive. Comparing Pivot to JavaFx is interesting, but I do not see any balance on the opinion… I heard about Pivot before, but as far as I looked for now on demo applications, it is a GUI API that offers classic graphical component, and I do not really see the powerfull animation framework I need to perform my new RIA… But what I read on the article make me curious, so I will go further and give a try to it, and I will post my opinion on my blog then 😉

  5. It is indeed great that JavaFX has SVGPath. Greg (who brought FXML to JavaFX via Pivot) and I added SVG rendering to Pivot last summer, here is the article: http://java.dzone.com/articles/rich-graphics-apache-pivot-20

    Another interesting development is the JavaFX work with FXG, see here: http://harmoniccode.blogspot.com/2011/09/groovy-graphics.html

    In my usage alternate symbol and icon sets are implemented as vector art using graphic editors then saved out as SVG/FXG files. Subsequently, what would be most useful is a small parser that can produce a key-value map from the paths in a given SVG/FXG file.

    Also the same parser could also return an image or node from a complete SVG/FXG file if desired. So, the outputs could then be a map of paths to dynamically lookup and inject into SVGPath or else a complete Node involving all the paths making up the file.

    Another useful function required is to rubber stamp nodes. It would be most helpful if nodes could at least reference the same path. To solve this until now, I created a small project where the SVGSalamander API was used to parse a SVG file of paths, which were then converted to one continuous image. The coordinates of each SVG paths own part of the image were then recorded in a map so rubber stamping of images could be done via lookups.

    This rubber stamping facility greatly reduces the size of the scenegraph for complex scenes involving many nodes, plus there are all the other benefits of rubber stamping as well. As far as I know Flash has this type of functionality right out of the box.

    Having a common parser that could handle all these scenarios and even both the SVG and FXG file types would be a huge plus for JavafX.

Leave a Reply

Your email address will not be published. Required fields are marked *