Skip to content

Inkscape and JavaFX working together

Inkscape is a open source cross-platform vector graphics editor application that I use daily to create draws.

When Project Nile was launched, me and some others guys complained about lack of open source alternatives in the workflow of creation with JavaFX. So we developed a module inside Inkscape that converts your SVG drawings to JavaFX code.

Features

  • Both are free and open source technologies, providing more tools on a powerful workflow for programmers and designers to develop Rich Internet Applications.
  • Comes natively with Inkscape. Install Inkscape an have JavaFX exporting out-of-the-box. No needing to install external plugins.
  • Provides a way to Inkscape users to make RIA applications reusing their work at drawing tool.
  • Provides a way to JavaFX programmers a tool for designers their graphics and interfaces.
  • Keep separated the JavaFX programming logic from the graphics resources but also provide a way to connect them.
  • They work on Windows, Mac OS, Linux, OpenSolaris and FreeBSD.

Workflow Example

I’ll show here step by step how would be a designer-developer workflow from designing graphical elements, such interfaces, to integrating it to a JavaFX Script code in NetBeans. In this example I’m using Inkscape 0.46-devel, build from the unstable sources and NetBeans 6.1 with the JavaFX module. See here how to build Inkscape from sources and here how to do some optimizations on the build.

Here’s a artwork (a modified version from another one I did in another post) made with Inkscape.

Doesn’t matter the complexity of the drawing it is made of discrete elements such circles, rectangles, paths and others. What the exporting module does is converting these SVG elements into JavaFX Scene Graph API elements.

To do that just click on File → Save As… or Shift+Ctrl+S.

Select JavaFx as the output format.

And chose a name. I’m saving the drawing as Girl.fx.

Now the drawing is a JavaFX class that extends from CustomNode. Once in your classpath (in this case the same directory of your main code) you can call it.

Girl{}

Another example, the famous SVG tiger.

Tiger{}

Actually, you can get the elements of your drawing as attributes nodes of the main node. We use the name you gave to your object to name the attributes.

import javafx.scene.paint.Color;
var girl = Girl{}
girl.rightiris.fill = Color.LIME;
girl.fringe.fill = Color.WHITE;
girl.backhair.fill = Color.DARKGRAY;
girl.hair.fill = Color.GRAY;

import javafx.scene.paint.Color;
var girl = Girl{}
girl.rightiris.fill = Color.GREEN;
girl.backhair.fill = Color.DARKRED;
girl.hair.fill = Color.RED;

You can also put event handling by code.

import javafx.input.MouseEvent;
var p = Player{}
p.x.onMouseClicked = function( e: MouseEvent ):Void {
java.lang.System.exit(0);
}

As a ordinary JavaFX Node, you can do whatever you do with a Node, like using it inside a application or applying effects or transformations.

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.effect.SepiaTone;

var girl = Girl{
   scaleX: 0.5
   scaleY: 0.5
   effect: SepiaTone{}
}

Frame {
   visible: true
   stage: Stage {
      content: [girl]
   }
}

Using this approach you can have the reference and total control under all those elements that compose your drawing. You can design complete interfaces and attach event handling by code.

Source code

The module is already on the main Inkscape dev tree and working properly. I guess it will be officially released to all users in the next Inkscape release.

Still to do

  • Fix some problems with strokes.
  • Fix some problems in the gradients.
  • Use Zlib to create jfd files when the structure is too big.
  • Provide a dynamic method like getElementById in JavaScript.
  • Convert effects like blur to JavaFX effects.
  • There are some i18n errors in the module to be fixed.
  • Finish the adaption from Paths to SVGPaths.
  • Finish the adaption to the new JavaFX 1.0 syntax (coming December, 2).

Thanks!

Thanks for all guys that worked on this module and also on the projects Inkscape and JavaFX. Specially thanks for Bob Jamison, Jim Clarke, Joshua Marinacci and others. That’s my first contribution to a big free software, I’m very glad and I want to do much more. 😀

Published inenglish

51 Comments

  1. About chosing the output format, it says “Compressed Inkscape SVG” twice. If that’s a screenshot, please report a bug.

  2. Way cool! I see you already realize that the JavaFX API and language will be changing with 1.0 and be incompatible from the preview release. For example javafx.application package isn’t there in the javadoc for the latest 1.0-prereleases and the Stage class is the preferred toplevel.

  3. Porfirio Porfirio

    Include me in one of those sad with the lack of Inkscape integration in project Nile, i even posted in their forums.

    Inkscape will be the best tool for do graphics for JFX.

    I wish when 0.46 gets out, JavaFX 1 is out and the JFX exporter is good enought for work.

    Bom trabalho Silveira!

  4. I never understood, why Sun is feeding with Project Nile, what they want to fight with Java FX: Adobe.

    Inkscape is such a solid drawing tool, while open source…. At least I would have expected Sun to support Open Office Draw, but even that is not supported.

    Thank you very much for this wonderful export filter for Inkscape.

  5. Carsten, we decided base on the survey we’ve done among designers communities. We haven’t met a single professional designer (i.e. a designer which makes living on doing designs) who would be using inskscape or gimp for the work. The reason very often was professional designers don’t care much about open source and while the price tag on the Adobe products might be annoying, the productivity and features of those products far exceed the expense they need to make.

  6. Kendrick Kendrick

    Nice….

    Can we get a release of this version when JavaFx is released?

  7. Kendrick, probably not. The next version of Inkscape should be the version 0.47 and I guess in not planned to be launched this year (2008). In the other hand anyone can compile yourself Inkscape and distribute a especial release, but I guess is not the best thing to do because this would break the official calendar of the project.
    So my suggestion is to you try to compile yourself the current development version of Inkscape.

  8. Bryan Bryan

    Awesome! This Inkscape plugin alone has rekindled my interest in JavaFX. What a great idea!

  9. Actually, i am really really appreciate your greate job. It almost changes my view to javafx 🙂
    I am eager to see the release.

  10. Roger Padilla Roger Padilla

    This is a great plugin, for me, it will be one of the bests!

    Thanks so much and keep going ahead!

  11. Erik Erik

    EXCELLENT Silveira!

    Already liking Inkscape and now I can use it directly for JavaFx fun.
    I’m all eager to create 🙂

  12. Mare Mare

    Someone should immediately merge InkScape and some advanced editor (jEdit, Notepad++, SciTe or something) into an open source equivalent of Adobe Flash.
    This is great!

  13. This is the coolest thing I heard from JavaFX world. JavaFX without plugins for tools like Inkscape is useless.

    Great work.

    Kishore

  14. aitchGee aitchGee

    Would be cool to expand the plugin to exporting .fxd files as well. As I understand it, this will be the primary format to use when incorporating more complex graphics. That said, a little collaboration between the efforts of converting SVG to JavaFX and this sweet thing could probably speed things up further?

  15. Sébastien Stormacq Sébastien Stormacq

    Awesome work guys … !
    Any idea when a JavaFX 1.0 compliant version will be checked in ?
    What type of help is required ?

    Seb

  16. Adam Giemza Adam Giemza

    Hey! Really very nice! All of your work. I have just read half of your blog 😀

    So to follow up on my predecessor: When will a JavaFX 1.0 compliant version be available?

    I have just tried out the latest Inkscape build (Inkscape20412-0812291919) and it still does export the pre-1.0 code!

    Thanks,
    Adam

  17. […] is well documented how to transform photoshop files into JavaFX code. But how to achieve the same with inkscape? Possibly related posts: (automatically generated)JavaFX – Some ClarificationsJavaFXUpcoming game […]

  18. Rupert Rupert

    Another vote for “Awesome” !
    Will a JavaFX 1.1 version (a) be needed, (b) be coming / ETA, (c) be in next Inkscape binary release?
    Cheers, R.

  19. Pedro Sacramento, um editor simples, não. Eu escrevi alguns posts sobre como manuzear XML, e SVG é um documento XML.

  20. I’ve just compiled the latest InkScape source, and the exporter seems to work, but the .fx files don’t run with JavaFX 1.2. I hope you’ll update the exporter, because it looks amazing 🙂

  21. VictorCharlie VictorCharlie

    Yes, JavaFX 1.2 is a significant change in the API and it works with Linux. I hope the Inkscape .fx exporter will be upgraded to reflect the new javafx.scene.shape.* API.

  22. Jack Jack

    Hi,

    i have the problem that i can’t change any attribute.
    I have created a simple svg graphic and than exported it to JavaFX.
    In my JavaFX-Application i can for example rotate an element of the svg-graphic but i can’t see any attribute like “fill”.

    I use Inkscape 0.47 and JavaFX 1.2

  23. Jose Jose

    Dude! I don’t know if this is still in development but the plugin only generates Paths and Gradients. Even if I group objects and name them it still generate functions that returns a Path object. In order to have the same behaviour that you specified I had to create public vars to access the paths from outside.

    Thanks for the hard work!

  24. Hans de Vries Hans de Vries

    At the risk of swearing inside church….

    Any chance you guys would be making an export to AS3 Flash (.swf or better even .fla) possible in the forseeable future?!? Many of you must be Flash haters, but there is a whole world of lovers out there…

  25. Hi Hans,
    A translator from Flash to JavaFX or JavaFX to Flash is completely possible. However, nowadays I’m more interested in HTML5 and have been a while since I worked with JavaFX.

    Regards.

  26. jonathan jonathan

    Hi guys, I read the post and I was trying but nothing doesn’t work, are there some other tool? I need to import and change the color of the images in SVG. Thanks for your help.

Leave a Reply

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