动态web图形的8种实现方式(转)

原文地址：http://softwareas.com/ajaxjavascript-8-ways-to-create-graphics-on-the-fly

Tuesday, October 3rd, 2006

Dynamic Graphics in the Browser

Category: UI, Canvas, Programming

Dynamic graphics inside the browser are starting to become a little bit more practical, thanks to increased support for Canvas and SVG. I recently discussed eight competing techniques for generating dynamic graphics in an Ajax application, each with their own implications for portability, usability, and performance.

The following techniques are descibed:

1. SVG
2. Canvas
3. Dynamic images from the server
4. VML
5. Richer Plugin (e.g. Flash)
6. CSS/DOM
7. data: resource
8. XBM

Ajax/Javascript: 8 Ways to Create Graphics on the Fly

October 1st, 2006 · 28 Comments

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;">

<a href='http://digg.com/programming/Ajax_Javascript_8_Ways_to_Create_Graphics_on_the_Fly'>Ajax/Javascript: 8 Ways to Create Graphics on the Fly - digg this</a>

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!!!

1. 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:
   PLAIN TEXT
   XML:
   

   1. <svg width="100%" height="100%" version="1.1"