Motivation

Piccolo2d is a scenegraph ZUI toolkit, svg is a 2d vector graphics description language. Both share the idea of a scene graph and the grouping and transformation concepts also look similar at a first glance.

Is it possible to use svg documents e.g. generated by inkscape as input and convert them to piccolo2d scenegraphs?

History

There was some idea to build svg support into jazz. The v1.1 API has some svg classes.

Requirements

parse svg xml (e.g. using the super-lightweight XPP3 min xml pull parser).
parse css and build up a hierarchy.
parse svg paths and convert to generalpaths (shapes)
look up nodes in a piccolo2d scenegraph according to their ID (tree search)

Concepts

keep it as lean as possible (<100K ?)
do NOT add any new runtime/build requirements
use a factory/strategy to parse the svg input
add a css manager class
create a scenegraph (PNode) using out-of-the-box PNode, PPath, PText, PImage classes
attach node id, css classes etc. as attributes.

Steps

Aim for for SVG 1.1 Tiny and use the examples from the specification as test input. Development happens in the svg2009 branch.

As I develop this in a local git repo and merge to svn, a finer-grained commit history can be obtained from the git://github.com/mro/piccolo2d.java.git repository.

Proof a concept

Sax Parser to read the svg xml
The following Basic Shapes with styling via attributes (no CSS, no "style" attribute)

CSS, step I:

"style" attribute

Complete the basic shape module

CSS, step II:

"style" element

<use /> Element
Basic Text
Images
evtl. Basic Font

Obstacles

css parsing: more than rudimentary support is a terrible lot of code. See http://www.w3.org/Style/CSS/SAC/, http://cssparser.sourceforge.net/ and http://today.java.net/pub/a/today/2003/10/14/swingcss.html
the "path" element arcs require complex code. See Batik ExtendedGeneralPath
the "use" element requires cloning and re-application of the CSS on every node. The PNode.clone() implementation is rather slow.
the "text" element will be only rudimentary (no text along a path, rotated glyphs etc.)
graceful failure for unexpected svg features?
fatal failure for invalid svg (validating parser?)

Links

http://www.elementengine.com/

Comment by nls...@gmail.com, Aug 23, 2008

Here is a simple example how Batik can be used to display SVGs with Piccolo:

import java.awt.Graphics2D;
import java.io.IOException;
import java.io.FileInputStream;

import org.apache.batik.bridge.BridgeContext;
import org.apache.batik.bridge.DocumentLoader;
import org.apache.batik.bridge.GVTBuilder;
import org.apache.batik.bridge.UserAgentAdapter;
import org.apache.batik.dom.svg.SAXSVGDocumentFactory;
import org.apache.batik.util.XMLResourceDescriptor;
import org.w3c.dom.svg.SVGDocument;
import org.apache.batik.gvt.GraphicsNode;

import edu.umd.cs.piccolo.PNode;
import edu.umd.cs.piccolo.util.PPaintContext;

public class SVGNode extends PNode {
	
	private GraphicsNode svg;
	
	public SVGNode(String path) throws IOException {
		FileInputStream is = new FileInputStream(path);
		SAXSVGDocumentFactory f = new SAXSVGDocumentFactory(XMLResourceDescriptor.getXMLParserClassName());
		SVGDocument doc = (SVGDocument)f.createDocument(null, is);
		
		UserAgentAdapter ua = new UserAgentAdapter();
		DocumentLoader loader = new DocumentLoader(ua);
		BridgeContext bridge = new BridgeContext(ua,loader);
		
		GVTBuilder builder = new GVTBuilder();
		svg = builder.build(bridge,doc);
		setBounds(svg.getBounds());
	}
	
	protected void paint(PPaintContext paintContext) {
		Graphics2D g2 = paintContext.getGraphics();
		svg.paint(g2);
	}
}

Comment by oliver.g...@gmail.com, Aug 27, 2008

I have experiment batik solution to include SVG in piccolo, like the code above. But it's not usable because it's very very slow. I think SVG Tiny is a good way to include SVG.

Comment by openco...@gmail.com, Nov 7, 2009

I thing much better would be SVG Salamander. It can only read, not writte SVG. Jar file is 256 kb. Simple integration can be done with SVGIcon, all stuff you discusses can be done via SVG Universe.

Comment by openco...@gmail.com, Nov 7, 2009

I made implementation for SVG Salamander. http://kotek.net/blog/piccolo_and_svg

Comment by GreggI...@gmail.com, Apr 26, 2011

Please check the link to http://www.elementengine.com/ and remove it, as appropriate. When I clicked it on 4/16/11, it was all in some Asian script and had an inappropriate photo. Thanks.

► Sign in to add a comment