Skip to content

Latest commit

 

History

History
71 lines (52 loc) · 4.74 KB

SvgSupport.md

File metadata and controls

71 lines (52 loc) · 4.74 KB

This idea came up on the piccolo2d-dev maillist.

TODO: insert the options Michael mentioned and the example from the comment below.

See also issue#61 (on Google Code) issue#81 (on Google Code)

And have a look at http://wiki.svg.org/JSR_226 and http://wiki.svg.org/JSR_287

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.

  1. Proof a concept 1. Sax Parser to read the svg xml 1. The following Basic Shapes with styling via attributes (no CSS, no "style" attribute)
    1. <rect />
    2. <circle />
  2. CSS, step I: 1. "style" attribute
  3. Complete the basic shape module 1. <ellipse /> 1. <line /> 1. <polyline /> 1. <polygon /> 1. <path /> without elliptical arcs
  4. CSS, step II: 1. "style" element
  5. <use /> Element
  6. Basic Text
  7. Images
  8. evtl. Basic Font

Obstacles

Links