Fork us on GitHub

Flamingo SVG Transcoder Revisited

Updated SVG Support and Graphics Primitives
Flamingo SVG Transcoder Revisited

Flamingo SVG Transcoder Revisited

A couple of years ago I wrote about our support for Flamingo which translates static SVG files to Java source files that you can treat as images within Codename One while getting pixel perfect resolution independent results. There were a few minor changes since until a month ago when Steve committed some work to address this RFE.

What’s SVG and Why Should I Care?

If you’re new to SVG here’s a quick primer. There are two types of images: Vector and Raster. Raster is what most of us work with every day. They are our JPEG, GIF, BMP and PNG images. They store the pixels of the image. There are many nuances here but I’ll leave it at that…​

Vector images are something completely different. Instead of storing the pixels they store the primitive drawing operations. If we have an image of a triangle, a raster image will store a lot of pixel values representing the triangle whereas a vector image would just store the fact that a triangle is drawn at a specific size in a given coordinate.

Vector images work great for images that were designed to be vector images e.g. logos, drawings etc. They are useless for things such as photos. They have a couple of big advantages:

  • They are smaller than raster images both on disk and more importantly in RAM

  • They can scale to any size with no degradation in image quality, this is very helpful for mobile apps

But surprisingly they might not perform as well as a raster image for all cases. This might be offset by the RAM savings so I’d still recommend SVG for most cases.

Flamingo works by translating SVG’s to Java source code that you can compile in Codename One. This means more elaborate features such as SVG animations are discarded as part of the process. It also means some SVG’s just won’t work. With the new update we added support for a lot of SVG’s and also updated the flamingo binary distribution which we didn’t have in the original project.

The recent changes include both improvement to the translation process and to the Codename One API. Our updated API now supports features such as paint and gradient drawing which is commonly used in SVG. Specifically Steve added a Paint interface, with concrete subclass LinearGradientPaint that can be used to fill a shape with a gradient via Graphics.setColor(Paint) then Graphics.fillShape(shape). There are quite a few other related changes such as MultipleGradientPaint and AffineTransform…​

With these in place you can convert a lot of typical SVG’s and use them in your app. The big question is whether we’ll integrate this deeper into Codname One by automating this process. Right now we’re not sure about that or how such integration will look. Maybe something similar to the CSS integration.

Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.