Jun 14 2011

Render SVGs to Textures!

Category: AndEngine,AndEngineSVGTextureRegionExtensionNicolas Gramlich @ 17:39

Hello Community,

having visited Google I/O in May one thing I had put to my ToDo list was adding a feature to AndEngine that allows you to easily render SVGs (Scalable Vector Graphics) onto a Texture(Region). Romain Guy dropped a hint on the svg-android project on GoogleCode, which I started looking over about 2 weeks ago.

I was amazed by the simplicity of how many features of SVG can be easily mapped to the Canvas API in Android. I had started off with their original code but soon noticed that they primarily supported a kind of limited SVG format called SVG Basic 1.1 that is not supported as an export format of Inkscape, while it could not parse InkScapes SVG output :( .

Besides that limitation, a couple of bugs, some missing object orientation and literally hundreds of SVG special cases, I basically came up with a complete recode, that supports the following features: (fixes and feature-wise differences from the original are colored red)

Features

  • Groups
    • Inheritance of group-transformations and attributes/properties
  • Colors
    • Opacity
    • Formats:
      • rgb(rrr,ggg,bbb)
      • #RRGGBB
      • #RGB
  • Gradients
    • Inheritance (lazy initialization, including transform/stop-inheritance)
    • Types:
      • LinearGradients
      • RadialGradients
  • Rectangles
    • RoundedRectangles
  • Circles
  • Ellipses
  • Polygons
  • Polylines
  • Paths
    • SubPaths
    • Fillrule
      • even-odd
    • Commands:
      • M/m – Move to
      • Z/z – Close path
      • L/l – Line to
      • H/h – Horizontal ine to
      • V/v – Vertical line to
      • C/c – Cubic bezier to
      • S/s – Smooth cubic bezier to
      • Q/q – Quadratic bezier to
      • T/t – Smooth quadratic bezier to
      • A/a – Arc to

Supported formats

  • Optimized Inkscape-SVG (Recommended Format)
  • Inkscape SVG
  • Adobe Illustrator SVG

And this is what you can do with it:

Quite nice, hm? :)

The code to make use of this is (as always) absolutely trivial:


final int size = (isHighResDevice()) ? 128 : 64;
ITextureRegion textureRegion = SVGTextureRegionFactory.createFromAsset(this.mBuildableTexture, this, “gfx/vector.svg”, size, size);


A full example is available here: http://code.google.com/p/andengineexamples/source/browse/src/org/anddev/andengine/examples/SVGTextureRegionExample.java

The SourceCode of the project is available here: http://code.google.com/p/andenginesvgtextureregionextension/

A precompiled, ready-to-use jar is available here: http://andengineexamples.googlecode.com/hg/lib/andenginesvgtextureregionextension.jar

 

Best Regards,
Nicolas