Tuesday, December 13, 2011

Esvg, Ecss

Sometime ago I started creating a library for SVG parsing and rendering. It was called Esvg. The initial version didn't do much, it was just using cairo to actually draw the different SVG tags. Now, a new version of Esvg has arrived into Enesim's repository, thanks to Vincent and his great effort to make this library a success.

The main ideas we had in mind for this library were:

  1. We should not only parse the SVG tags and render them, but create a fully statefull scene of SVG elements where you can manipulate each element by a C API, change the properties, make an element be a child of another, etc.
  2. Make every SVG element an Enesim Renderer, this way we can use all the already available stack (Escen, Ender, Emage ...) to interact and manipulate such elements.
  3. Create a simple parser for the SVG tags but make it optional in a sense that the rendering elements can be created without the need of an existing XML file.
So far all our goals have been achieved, even if the results are not graphically perfect it should be straightforward to fine tune it. This also helps the Enesim project reach its final 1.0 release.

In the process of building this library we required a CSS parser too, the options out there did not satisfied us, we needed a CSS parser which will let us (from the library's user point of view) provide an implementation of the DOM interface. That is, a way to traverse the tree: getting a tag's parent, its childs, its sibling, etc to match the CSS rules easily and be able to apply this library not only for SVG based XML but for any other tree based library as long as it provides such interface.
Another requirement was that the CSS library must not assume that every tag or property is HTML only, but any kind of tag name or attribute definition. I mean, the library should be DOCTYPE agnostic.

Sadly the above requirements were not met by any library, so we decided to create our own: Ecss, which of course has all the above features.

As a simple example of what the library can do, check out this SVG example parsed by our library and rendered using Emage into a PNG (the rendering is not perfect but is a very good start):


No comments: