I am new to JavaFX 2.2 and as of now I couldn't find a way to display SVG Images in my JavaFX 2.2 application. I took a look at Batik, but it didn't do the trick for me as it converts to BufferedImages
and not to javafx.ImageView
.
Is there any way to display an SVG image in an JavaFX application? Or can you at least export an SVG image from JavaFX? Does the function Node.snapshot()
help there in any way?
Here are some options:
This feature sounds like a JavaFX SceneGraph to svg converter. While it is theoretically possible, I am not aware that anybody has created such a tool yet.
Node.snapshot() will not help with exporting an svg image from a JavaFX scene graph as svg is a vector based format and a node snapshot is a bit mapped format.
You can easily convert between awt BufferedImages and javafx images using SwingFXUtils.
For complex svg's, rather than rendering from fxml, you will probably get better performance rendering to a bitmapped image or canvas graphics context. This is because your scene graph will end up a lot simpler, with far less nodes - which means that the javafx runtime will have a lot less work to do. For simple svgs (< 1000 nodes generated), it probably won't matter too much.
Partially. The full SVG specification covers much more ground than the basic shapes. In addition gradients, effects, animations, etc can be performed by an SVG. So if the source SVG image includes those additional items, then they also need to be converted to FXML (as best they can be, there will be some aspects of SVG such as scripting which would be hard to translate to FXML).
My guess is that the size and complexity of the SVG specification is one of the reasons why no direct support for the full SVG image system is currently included in the JavaFX core API and, instead, only limited similar functionality such as SVGPath is offered. Implementing SVG natively in the JavaFX core API would have been high cost for relatively little reward when compared to other desirable items.
No. The NetBeans and Eclipse tools referenced in #2 and #3 were more functional than just the SVGPath facilities mentioned in #5, as those tools converted additional aspects of the the SVG specification to FXML equivalents (e.g. gradients, effects and transforms).
JavaFX + Batik + Custom Transcoder
Since I've nowhere found a complete example of using Batik in conjunction with JavaFX, I am providing a complete solution below.
Note that I removed exception handling (e.g. for the
TranscoderException
) for brevity.You can access the full code here: https://gist.github.com/ComFreek/b0684ac324c815232556
In order to convert a SVG file with Batik to a
BufferedImage
, you have to implement a custom transcoder:Use the transcoder to generate a
BufferedImage
object:Convert the
BufferedImage
object to anImage
object (from JavaFX):Finally assign the previously received object to your
ImageView
:I used the transcoder class above to create a little project on github that adds SVG support to JavaFX (JavaFX 8 though): javafxsvg
After calling
you can use SVG images anywhere in your Java code or CSS just like any other supported image type.