width="0" height="0" src="http://sandbox.sourcelabs.com/jsondelicious/" style="display: none;"> scrolling="no" frameborder="0" src="http://sandbox.sourcelabs.com/diggbutton/?url=http%3A%2F%2Fdigg.com%2Fprogramming%2FAjax_Javascript_8_Ways_to_Create_Graphics_on_the_Fly&title=Ajax%2FJavascript%3A+8+Ways+to+Create+Graphics+on+the+Fly&description=&css=" style="border: 0px none ; margin: 5px; overflow: hidden; width: 62px; height: 76px; float: left;">
The ability to create rich graphics on the fly is one of the critical gaps in Ajax. There are indeed techniques to do it, albeit far from perfect, and some are do-able today if you take a pragmatic view of things and keep graceful degradation in mind.
Here I list all the techniques I can think of to create graphics and images dynamically when you're creating an Ajax/DHTML/Javascript web app, with varying degrees of portability and usability. Starting with the obvious and ending with the obscure. Please submit any other techniques you're aware of!!!
- Use SVG. Current versions of Firefox, Opera, and Safari (nightly builds) support SVG natively, but with IE and older versions, users need to install a plugin. SVG is an old W3C standard that creates images based on XML. Being a vector format, it stores the image at a high level (curves, lines, etc), so it scales better than a plain bitmap. Here's an SVG circle (adapted from W3CSchools:
XML:
-
<svg width="100%" height="100%" version="1.1"
-