Monday, March 29th, 2010

CanVG: Using Canvas to render SVG files

Category: Canvas, SVG

We love to recursively implement one technology on top of another. We have had Canvas support added to IE via VML, Flash, and Silverlight. We have had SVG implemented in Flash. Flash implemented in SVG.

The latest experiment is from Gabe Lerner and is CanVG. As you can guess, it renders SVG files via the <canvas> element. All in a few hundred lines of code!.

Check out the test playground to see it in action.


Posted by Dion Almaer at 6:23 am

3.6 rating from 22 votes


Comments feed TrackBack URI

This is pretty cool, however it borked at all of the SVGs I threw at it, such as that famous tiger image.

Comment by devongovett — March 29, 2010

Yes, canvg has a long way to go. If you can, please reduce the SVGs that cause a problem to a small enough test case and open a bug with the test file.

P.S. Someone should pay attention to the spam on this blog, it’s gotten out of hand lately.

Comment by codedread — March 29, 2010

I’ve been working on a similar parser and… it does render tiger perfectly (but shhh… don’t tell anyone yet :))

Comment by kangax — March 29, 2010

I knew this was possible! With this, you can rasterize SVG and export to PNG.

Comment by westonruter — March 29, 2010

Leave a comment

You must be logged in to post a comment.