Vector Graphics Renderer for Games (SVG?)

I recently decided to create a GUI renderer for a project I’m working on.  It should be multi-platform and high-resolution, and the source data must be created within an off-the-shelf editor.  The obvious solution is to use vector graphics, just like the web.  But unlike the web, I don’t want to rely on Adobe Flash as it requires the whole project to be built in Flash and it isn’t completely multi-platform.  To be multi-platform, I would want the renderer to be written in C++. The editor should not only allow the content creator to make images, but also define animations and interactions.  This is so the GUI can built and tested outside the game.

I started by searching for “vector graphics rendering”.  I found a lot of systems available for javascript, SVG and Canvas; thus HTML5.  Here are a couple of interesting ones.

However, creating images with these requires a significant amount of Javascript knowledge and there are no editors.  Adobe Flex is on the horizon and Sencha is an interesting HTML5 framework but still not simply for my C++ game GUIs. They require a web browser!

Some vector graphics formats that are usable for GUIs are SVG, SIF, OpenVG which could then be rendered to Canvas, Cairo, or similar.  They would hold all the information I need to render, animate and interact with the GUI.

There are a couple of vector graphics editors for these formats.

  • Inkscape
  • Synfig

These can be used to create animations and I think they can have script (javascript) properties embedded to define interactions.  Currently these sound like a couple of good starting points for editors. The SIF and SVG files they create can both have animation, interaction and rendering data encapsulated within them.

Starting with SVG I thought it should be easy to grab a C++ library for the SVG format and use that within my game.  Again, after much searching and hunting around, I’ve come to the conclusion that there isn’t such as thing.  SVG renderers do exist but they are years old and don’t look very well maintained.  However, Chrome and Firefox both interpret SVG, as does Inkscape.  The browsers use WebKit which can parse SVG into an intermediate format, and then they render from that intermediate format.  This is also true of Inkscape.  This makes sense.  So what I’m looking for is a library to interpret SVG (or SIF, or OpenVG) and then create the draw list to render to cairo, or similar.

This is where it gets interesting.  The first hit on SVG renderers is ‘librsvg’.  This is a lightweight renderer for svg but it isn’t an easy to grab library. Much of the old homepage is out of date so you have to start rummaging around in the Gnome source and I think it starts to use many other libraries like Pango, Cairo, …

Because webkit can render SVG I started to hunt around in the WebKit source.  There has probably the best SVG renderer embedded in there but again it isn’t easy to use as a library.  It also appears there are plenty of Java and Javascript SVG renderers (Batik, Salamander) and C# (  Grabbing these and porting to C++ might be an option.


Unless someone else can point me in the right direction, I don’t think there is an opensource C++ SVG Rendering library on the web.  I guess I could be approaching this from the wrong direction.  Maybe I don’t need to think about SVG and just focus on the editor which produces format XXX and then find a C++ renderer for format XXX instead.  But SVG seems to be the only acronym I can find to fit XXX.

Maybe I should be ignoring the format and just concentrate on the Vector Graphics renderer (Cairo, for example).  Getting this working first would answer a lot of questions about which format to pump into it.

Maybe I’m forgetting that I need to consider the final rasterer’s requirements. I’m assuming that any renderer would create a PixMap in some typical format, that I can just blit to the platform’s display once the image has been created.

Ultimately, unless I stumble upon a magical solution which encapsulates the XXX format, and converts that to a PixMap image for blitting; I’ve got a lot of work ahead of me.

Please comment if you know of the magical solution.






3 Responses

  1. […] Programming: Robots & Video Games […]

  2. Thanks. Within hours of posting I discovered the following. It looks a good start but that’s all at the moment. Maybe I could help?

Comments are closed.

%d bloggers like this: