Load SVGZ Files in JavaFx2.0 and rasterize them

Question

Hi!
I wanted to load via Java/JavaFx2.0 a .svgz file and rasterize it. Maybe someone got a clue?
Thanks for your answers in advance! My ideas up to now were to load them somehow with the batik lib via this code:
http://stackoverflow.com/questions/6854601/load-svg-file-in-javafx-2-0
... but I'm not sure.
Greetings!

Answer 1

Hi, it depends if you satisfied with having a SVG being transfered into an image and show this or if you want to have real JavaFX-node-objects. For the first one, there are some solutitons for the second one I have been fouling around with transfering it.
The code I put in here is experimental and in Scala (sorry, but I thing it is also read-able for Java dudes) and handles only a few SVG nodes. Batik is used to read it. It works (JavaFX 2.0 b42), but is definetly not very nice. Maybe that helps anyway :
package org.rob.svgtransform
import javafx.event.{Event, EventHandler}
import org.w3c.dom.{NamedNodeMap, NodeList, Document}
import javafx.scene.paint._
import javafx.scene.text.Text
import javafx.scene.image.{ImageView, Image}
import javafx.scene.shape._
import java.awt.image.RenderedImage
import org.apache.batik.ext.awt.image.codec.png.PNGDecodeParam
import org.apache.batik.ext.awt.image.codec.png.PNGImageDecoder
import javax.imageio.ImageIO
import org.apache.batik.ext.awt.image.codec.png.PNGImageEncoder
import org.apache.batik.ext.awt.image.codec.png.PNGEncodeParam
import collection.mutable.ListBuffer
import javafx.application.Application
import javafx.stage.Stage
import javafx.scene.{Scene, Node, Group}
import org.apache.batik.util.{XMLResourceDescriptor, ParsedURL}
import org.apache.batik.dom.svg._
import java.io._
trait FxEventHandler extends EventHandler[Event] {
  def setSvgToFx(sf : ISVGToFX)
trait ISVGToFX {
  def getRootNode : Group
  def getFxElementBySvgId(svgId : String) : Option[Node]
  def getSvgIdByFxElement(fxElement : Any) : Option[String]
  def getImageStrByImageId(imageId : String) : Option[String]
  def getSvgElementBySvgId(svgId : String) : Option[SVGOMElement]
class SVGToFX(svgDocument : Document) extends ISVGToFX {
  var eventHandler : FxEventHandler = null
  var fxElementToSvgIdMap = Map.empty[Any, String]
  var svgIdToFxElementMap = Map.empty[String, Any]
  var imageIdToImageStrMap = Map.empty[String, String]
  var svgIdToSvgElementMap = Map.empty[String, SVGOMElement]
  var eventHandlerNodes = Set.empty[Node]
  val rootElement = toFx(null, svgDocument)
  def setEventHandler(eventHandler : FxEventHandler) {
    this.eventHandler = eventHandler
    for(eventHandlerNode <- eventHandlerNodes)
      eventHandlerNode.setOnMouseClicked(eventHandler)
    eventHandler.setSvgToFx(this)
  def getSvgIdByFxElement(fxElement : Any) : Option[String] = fxElementToSvgIdMap.get(fxElement)
  def getFxElementBySvgId(svgId : String) : Option[Node] = svgIdToFxElementMap.get(svgId) match {
    case Some(el) => {
      if(el.isInstanceOf[Node])
        Option(el.asInstanceOf[Node])
      else
        None
    case None => None
  def getImageStrByImageId(imageId : String) : Option[String] = imageIdToImageStrMap.get(imageId)
  def getSvgElementBySvgId(svgId : String) : Option[SVGOMElement] = svgIdToSvgElementMap.get(svgId)
  def getRootNode : Group = rootElement.asInstanceOf[Group]
  protected def traverse(nl: NodeList, level: Int): Unit = {
    for (i <- 0 until nl.getLength)
      val n = nl.item(i)
      if(n.isInstanceOf[SVGOMElement]){
        val svgElem = n.asInstanceOf[SVGOMElement]
        val id = svgElem.getId
        val attr : NamedNodeMap = svgElem.getAttributes
        val range = 0.until(attr.getLength)
        val sp = space(level)
        println(sp + "-----------------------------")
        println(sp + "class = " + svgElem.getClass.getName)
        for(k <- range){
          val node = attr.item(k)
          println(sp + "name = " + node.getNodeName + "; value = " + node.getNodeValue)
        println(sp + "BPMNDItoSVG: ID = " + id)
        println(sp + "-----------------------------")
      traverse(n.getChildNodes, level + 1)
  protected def space(level : Int) : String = {
    var sb = new StringBuffer("")
    for(x <- 0 to level)
      sb = sb.append("   ")
    sb.toString
  var noIdCounter : Int = 0
  protected def toFx(parentId : String, obj : Any): Any = {
    def doGroup(svgId: String, nl: NodeList, g : Group){
      for (i <- 0 until nl.getLength){
        val el = toFx(svgId, nl.item(i))
        if(el != null){
          el match {
            //            case i : ImageView => refToImageMap = refToImageMap + (svgId -> i)
            case n : Node => {
              if(svgId != null && !"".equals(svgId ) && !fxElementToSvgIdMap.contains(n))
                fxElementToSvgIdMap = fxElementToSvgIdMap + (n -> svgId)
              g.getChildren.add(n)
    def getId(id : String) : String = {
      id match {
        case id : String => id
        case _ => {
          noIdCounter = noIdCounter + 1
          "noid_" + noIdCounter
    def getAttribute(attrs : NamedNodeMap, attr : String) : String = {
      val range = 0.until(attrs.getLength)
      for(k <- range){
        val node = attrs.item(k)
        if(attr.equals(node.getNodeName))
          return node.getNodeValue
        //println("name = " + node.getNodeName + "; value = " + node.getNodeValue)
      null
    var returnValue : Any = null
    val svgId : String = obj match {
      case e : SVGOMElement => {
        val svgEl = obj.asInstanceOf[SVGOMElement]
        getId(svgEl.getId)
      case _ => null
    obj match {
      case e : Document => {
        returnValue = new Group
        doGroup(svgId, e.getChildNodes, returnValue.asInstanceOf[Group])
        svgIdToFxElementMap = svgIdToFxElementMap + ("root" -> returnValue)
      case e : SVGOMDefsElement => {
        val nl = e.getChildNodes
        for (i <- 0 until nl.getLength)
          toFx(svgId, nl.item(i))  // ending up in fxElementMap because they only will be referenced and are not used directly
      case e : SVGOMLinearGradientElement => {
        val stopList = new java.util.ArrayList[Stop]()
        val nl = e.getChildNodes
        for (i <- 0 until nl.getLength){
          val el = toFx(svgId, nl.item(i))
          el match {
            case st : Stop => stopList.add(st)
            case _ =>
        val attr = e.getAttributes
        val startXStr = getAttribute(attr, "x1")
        val startYStr = getAttribute(attr, "y1")
        val stopXStr = getAttribute(attr, "x2")
        val stopYStr = getAttribute(attr, "y2")
        val startX = strToValue(startXStr).asInstanceOf[Double]
        val startY = strToValue(startYStr).asInstanceOf[Double]
        val stopX = strToValue(stopXStr).asInstanceOf[Double]
        val stopY = strToValue(stopYStr).asInstanceOf[Double]
        returnValue = new LinearGradient(startX,startY,stopX,stopY,false,CycleMethod.NO_CYCLE, stopList.asInstanceOf[java.util.List[Stop]])
        returnValue = new LinearGradient(0,0,0,1,true,CycleMethod.NO_CYCLE, stopList.asInstanceOf[java.util.List[Stop]])
      case e : SVGOMStopElement => {
        val attr = e.getAttributes
        val colorStr = getAttribute(attr, "style")
        val offsetStr = getAttribute(attr, "offset")
        val color = strToValue(colorStr).asInstanceOf[String]
        var offset = strToValue(offsetStr).asInstanceOf[Double]
        if(offset > 1.0)
          offset = 1.0
        returnValue = new Stop(offset, Color.web(color))
      case e : SVGOMImageElement => {
        val attr = e.getAttributes
        val imageDataStr = getAttribute(attr, "xlink:href")
        val widthStr = getAttribute(attr, "width")
        val heightStr = getAttribute(attr, "height")
        if(parentId != null)
          imageIdToImageStrMap = imageIdToImageStrMap + (parentId -> imageDataStr)
      case e : SVGOMEllipseElement => {
        val attr = e.getAttributes
        val transformStr = getAttribute(attr, "transform")
        val fillStr = getAttribute(attr, "fill")
        val rxStr = getAttribute(attr, "rx")
        val cxStr = getAttribute(attr, "cx")
        val ryStr = getAttribute(attr, "ry")
        val cyStr = getAttribute(attr, "cy")
        val strokeStr = getAttribute(attr, "stroke")
        val strokeWidthStr = getAttribute(attr, "stroke-width")
        val rx = strToValue(rxStr).asInstanceOf[Double]
        val cx = strToValue(cxStr).asInstanceOf[Double]
        val ry = strToValue(ryStr).asInstanceOf[Double]
        val cy = strToValue(cyStr).asInstanceOf[Double]
        val ellipse = new Ellipse(cx, cy, rx, ry)
        getFill(fillStr) match {
          case p : Paint => ellipse.setFill(p)
          case _ =>
        setTransforms(ellipse, transformStr)
        if(eventHandler != null)
          ellipse.setOnMouseClicked(eventHandler)
        returnValue = ellipse
      case e : SVGOMTextElement => {
        val attr = e.getAttributes
        val xStr = getAttribute(attr, "x")
        val fontSizeStr = getAttribute(attr, "font-size")
        val yStr = getAttribute(attr, "y")
        val fillStr = getAttribute(attr, "fill")
        val textAnchorStr = getAttribute(attr, "text-anchor")
        val fontDecorationStr = getAttribute(attr, "font-decoration")
        val fontFamilyStr = getAttribute(attr, "font-family")
        val fontWeightStr = getAttribute(attr, "font-weight")
        val x = strToValue(xStr).asInstanceOf[Double]
        val y = strToValue(yStr).asInstanceOf[Double]
        val t = new Text(x, y, e.getTextContent)
        //        val t = new Text(x - 30, y, e.getTextContent)
        //        t.setTextAlignment(TextAlignment.LEFT)
        eventHandlerNodes = eventHandlerNodes + t
        returnValue = t
      case e : SVGOMRectElement => {
        val attr = e.getAttributes
        val xStr = getAttribute(attr, "x")
        val yStr = getAttribute(attr, "y")
        val transformStr = getAttribute(attr, "transform")
        val fillStr = getAttribute(attr, "fill")
        val widthStr = getAttribute(attr, "width")
        val rxStr = getAttribute(attr, "rx")
        val ryStr = getAttribute(attr, "ry")
        val heightStr = getAttribute(attr, "height")
        val strokeStr = getAttribute(attr, "stroke")
        val strokeWidthStr = getAttribute(attr, "stroke-width")
        val x = strToValue(xStr).asInstanceOf[Double]
        val y = strToValue(yStr).asInstanceOf[Double]
        val rx = strToValue(rxStr).asInstanceOf[Double]
        val ry = strToValue(ryStr).asInstanceOf[Double]
        val strokeWidth = strToValue(strokeWidthStr).asInstanceOf[Double]
        val width = strToValue(widthStr).asInstanceOf[Double]
        val height = strToValue(heightStr).asInstanceOf[Double]
        val rect = new Rectangle(x, y, width, height)
        rect.setArcHeight(ry)
        rect.setArcWidth(rx)
        rect.setStroke(Color.GRAY)
        rect.setStrokeWidth(strokeWidth)
        getFill(fillStr) match {
          case p : Paint => rect.setFill(p)
          case _ =>
        setTransforms(rect, transformStr)
        eventHandlerNodes = eventHandlerNodes + rect
        returnValue = rect
      case e : SVGOMUseElement => {
        val attr = e.getAttributes
        val xStr = getAttribute(attr, "x")
        val yStr = getAttribute(attr, "y")
        val widthStr = getAttribute(attr, "width")
        val heightStr = getAttribute(attr, "height")
        val xlinkHrefStr = getAttribute(attr, "xlink:href")
        val x = strToValue(xStr).asInstanceOf[Double]
        val y = strToValue(yStr).asInstanceOf[Double]
        val width = strToValue(widthStr).asInstanceOf[Double]
        val height = strToValue(heightStr).asInstanceOf[Double]
        val xlinkHref = strToValue(xlinkHrefStr).asInstanceOf[String]
        returnValue = imageIdToImageStrMap.get(xlinkHref) match {
          case Some(imageDataStr) => {
            val i : Image = strToValue(imageDataStr).asInstanceOf[Image]
            val iv2 = new ImageView
            iv2.setImage(i)
            //            iv2.setFitWidth(100);
            //            iv2.setPreserveRatio(true)
            //            iv2.setSmooth(true)
            //            iv2.setCache(true)
            iv2.setX(x)
            iv2.setY(y)
            iv2.setFitHeight(height)
            iv2.setFitWidth(width)
            iv2
          case None => null
      case e : SVGOMPathElement => {
        val attr = e.getAttributes
        val fillStr = getAttribute(attr, "fill")
        val strokeWidthStr = getAttribute(attr, "stroke-width")
        val pathStr = getAttribute(attr, "d")
        val transformStr = getAttribute(attr, "transform")
        val strokeStr = getAttribute(attr, "stroke")
        val strokeWidth = strToValue(strokeWidthStr).asInstanceOf[Double]
        val svgPath = new SVGPath
        getFill(fillStr) match {
          case p : Paint => svgPath.setFill(p)
          case _ =>
        svgPath.setStrokeWidth(strokeWidth)
        svgPath.setContent(pathStr)
        svgPath.setStroke(Color.BLACK)
        setTransforms(svgPath, transformStr)
        eventHandlerNodes = eventHandlerNodes + svgPath
        returnValue = svgPath
      case e : SVGOMPolylineElement => {
        val attr = e.getAttributes
        val fillStr = getAttribute(attr, "fill")
        val strokeWidthStr = getAttribute(attr, "stroke-width")
        val pointsStr = getAttribute(attr, "points")
        val strokeStr = getAttribute(attr, "stroke")
        val transformStr = getAttribute(attr, "transform")
        val points = strToValue("points:" + pointsStr).asInstanceOf[Array[Double]]
        //        val points = Array[Double](676.0,672.0,676.0,630.0)
        val strokeWidth = strToValue(strokeWidthStr).asInstanceOf[Double]
        val polyline = new Polyline(points)
        getFill(fillStr) match {
          case p : Paint => polyline.setFill(p)
          case _ =>
        polyline.setStrokeWidth(strokeWidth)
        polyline.setStroke(Color.BLACK)
        setTransforms(polyline, transformStr)
        eventHandlerNodes = eventHandlerNodes + polyline
        returnValue = polyline
      case e : SVGOMCircleElement => {
        val attr = e.getAttributes
        val fillStr = getAttribute(attr, "fill")
        val strokeWidthStr = getAttribute(attr, "stroke-width")
        val strokeStr = getAttribute(attr, "stroke")
        val rStr = getAttribute(attr, "r")
        val cxStr = getAttribute(attr, "cx")
        val cyStr = getAttribute(attr, "cy")
        val transformStr = getAttribute(attr, "transform")
        val circle = new Circle
        getFill(fillStr) match {
          case p : Paint => circle.setFill(p)
          case _ =>
        val strokeWidth = strToValue(strokeWidthStr).asInstanceOf[Double]
        val r = strToValue(rStr).asInstanceOf[Double]
        val cx = strToValue(cxStr).asInstanceOf[Double]
        val cy = strToValue(cyStr).asInstanceOf[Double]
        circle.setStrokeWidth(strokeWidth)
        circle.setCenterX(cx);
        circle.setCenterY(cy);
        circle.setRadius(r);
        circle.setStroke(Color.BLACK)
        setTransforms(circle, transformStr)
        eventHandlerNodes = eventHandlerNodes + circle
        returnValue = circle
      case e : SVGOMSVGElement => {
        val attr = e.getAttributes
        val transformStr = getAttribute(attr, "transform")
        val g = new Group
        doGroup(svgId, e.getChildNodes, g)
        setTransforms(g, transformStr)
        returnValue = g
      case e : SVGOMGElement => {
        val attr = e.getAttributes
        val transformStr = getAttribute(attr, "transform")
        val g = new Group
        doGroup(svgId, e.getChildNodes, g)
        setTransforms(g, transformStr)
        returnValue = g
      case e => { println("Element " + e + " is not supported yet!")
    if(returnValue != null && svgId != null && !svgId.equals("")){
      fxElementToSvgIdMap = fxElementToSvgIdMap + (returnValue -> svgId)
      svgIdToFxElementMap = svgIdToFxElementMap + (svgId -> returnValue)
      if(obj != null && obj.isInstanceOf[SVGOMElement])
        svgIdToSvgElementMap = svgIdToSvgElementMap + (svgId -> obj.asInstanceOf[SVGOMElement])
    returnValue
  def setTransforms(node : Node, transformStr : String) {
    var translate : Array[Double] = null
    var rotate : Array[Double] = null
    if(transformStr != null){
      val translateIdx = transformStr.indexOf("translate(")
      val rotateIdx = transformStr.indexOf("rotate(")
      if(translateIdx >= 0){
        val translateEndIdx = transformStr.indexOf(")", translateIdx)
        val translateStr = transformStr.substring(translateIdx + 10, translateEndIdx)
        translate = listToDoubleArray(translateStr)
      if(rotateIdx >= 0){
        val rotateEndIdx = transformStr.indexOf(")", rotateIdx)
        val rotateStr = transformStr.substring(rotateIdx + 7, rotateEndIdx)
        rotate = listToDoubleArray(rotateStr)
    if(translate != null){
      node.setTranslateX(translate(0))
      node.setTranslateY(translate(1))
    if(rotate != null){
      node.setRotate(rotate(0))
      //      node.setRotationAxis(new Point3D(rotate(1), rotate(2), 0.0))
  def getFill(str : String) : Paint = {
    if(str != null){
      str.startsWith("url(#") match {
        case true => {
          val fillLink = strToValue(str).asInstanceOf[String]
          val fill = svgIdToFxElementMap.get(fillLink) match {
            case Some(element) => element match {
              case lg : LinearGradient => lg
              case _ => Color.GREEN
            case None => Color.BLUE
          fill
        case false => str.startsWith("none") match {
          case false => Color.web(str, 1.0)
          case true =>  Color.WHITE  // ToDo: make sure this is the background color
    } else
      Color.RED
  def strToValue(str : String) : Any = {
    var returnValue : Any = null
    if(str != null){
      if(str.endsWith("%")){
        val s = str.substring(0, str.length() - 1)
        returnValue = s.toDouble
      } else if(str.startsWith("data:image")){
        val pu = new ParsedURL(str)
        val pust = pu.openStream()
        var awti : RenderedImage = null
        if(str.contains("png")){
          val pngdp = new PNGDecodeParam
          val pngde = new PNGImageDecoder(pust, pngdp)
          awti = pngde.decodeAsRenderedImage()
        } else if(str.contains("gif")){
          val is = new BufferedInputStream(pust);
          awti = ImageIO.read(is);
        if(awti != null){
          val baos = new ByteArrayOutputStream
          val pngen = new PNGImageEncoder(baos, new PNGEncodeParam.Palette)
          pngen.encode(awti)
          val bais = new ByteArrayInputStream(baos.toByteArray)
          returnValue = new Image(bais)
        } else
          returnValue = null
      } else if(str.startsWith("points:")){
        returnValue = listToDoubleArray(str.substring(7))
      } else if(str.startsWith("#")){
        returnValue = str.substring(1)
      } else if(str.startsWith("url(#")){
        val endIdx = str.indexOf(")")
        returnValue = str.substring(5,endIdx)
      } else if(str.startsWith("stop-color:")){
        returnValue = str.substring(11)
      } else {
        returnValue = str.toDouble
    returnValue
  def listToDoubleArray(listStr : String) : Array[Double] = {
    val seperators = Array[Char](' ', ',', ')')
    val ps = listStr.split(seperators)
    val lb = new ListBuffer[Double]()
    for(v <- ps)
      lb +=  strToValue(v).asInstanceOf[Double]
    lb.toArray
trait SVGElement{
  val svgId : String
object SVGToFXTest {
  def main(args : Array[String]){
    Application.launch(classOf[SVGToFXTest], args)
class SVGToFXTest extends Application {
  def start(st : Stage) {
    st.setWidth(1000)
    st.setHeight(800)
    st.setTitle("SVGToFX");
    st.setResizable(true);
    val root = new Group
    val scene = new Scene(root)
    st.setScene(scene)
    val fr = new FileReader("D:\\Development\\Playground\\SvgTransform\\data\\Test2.svg")
    val parser: String = XMLResourceDescriptor.getXMLParserClassName
    val fa: SAXSVGDocumentFactory = new SAXSVGDocumentFactory(parser)
    val doc = fa.createDocument(SVGDOMImplementation.SVG_NAMESPACE_URI, fr).asInstanceOf[SVGOMDocument]
    val svgToFx = new SVGToFX(doc)
    root.getChildren.add(svgToFx.getRootNode)
    println("Test")
    st.setVisible(true)
}Edited by: user6782617 on 07.10.2011 04:56