SVGLite Demo

A demonstration program for SVGLite, a JavaScript implementation for a small subset of SVG, a standard format for describing vector graphics.

Tags: svg, demo, graphics, html, canvas

Summary

Ideally, something like this should not be necessary at all, because there are mechanisms that, at least in theory, are meant to be straightforward ways of rendering SVG data on a HTML canvas. These include the browser’s own ability to render SVG images and then draw them on a canvas using the drawImage call, as well as some basic support for SVG shapes in Processing.JS via the PShape type.

Unfortunately, both of these methods have their limitations. The standard HTML approach doesn’t work too well in Google Chrome, for example, due to a strange bug that taints the canvas when rendering data from a dynamically generated HTMLImage element. On the other hand, using the PShape type from P.JS is unreliable, as some basic things (like e.g. the fill-rule attribute) are not supported; in addition, PShapes can’t be rendered to an off-screen canvas.

Because of this, I decided to simply implement the subset of the SVG standard that I was interested in, supporting the few things that I wanted in order to properly render some simple SVG files. Hence, SVGLite was created.

It’s very limited, as you’d imagine, but at least it helped me scratch my own itch :).

Links

• This program on Khan Academy
• This program on GitHub
• Snowflake art
• White dove art
• Jimi Hendrix art

ChangeLog

Current revision: rev1

2013-03-31

    * First version of this program. Includes three
      graphics, testing different aspects of the SVG
      rendering: a snowflake, with transparency and
      'evenodd' fill-rule, a white dove over a blue circle,
      and the portrait of a famous musical genius.

To Do

• Implement gradients, to be able to render some SVG icons.
• Add widgets to control the demo.
• Implement XML parsing.