前言
如题，此处主要讨论网页上实现画图的技术，像java的swing，.net的chart不在今天的讨论范围。
下文中所有代码，在chrome 29.0测试通过。
代码下载：
讲啥SVG简介
主流的画图方式？
各方式之间的差异？
SVG 3.1 SVG简介定义
ScalableVector Graphics，可伸缩矢量图形；它是使用 XML来描述二维图形和绘图程序的语言；
它是一种与分辨率无关的矢量图形格式；
历史
SVG于2003年1月14日成为W3C推荐标准。
注：
1、XML，它遵循严格的XML格式定义，如在svg文件头部xml版本定义及编码定义代码上方加空行，浏览器访问时报错，提示xml定义必须在文档首部。
二维图形：svg更适合于处理平面图形。
绘图程序：建筑图，工程图，电路图，放大而不失真，这个应用是它最大的优势。是其它几种画图方式无法取代的。
2、来历，2000年的时候，网页上显示图形没有统一的标准，各个厂家的协议互不兼容，在这种情况下W3C就发起建立图像显示的标准，参加的公司有许多，包括一些大公司，比如SUN、Adobe、苹果。经过几年的努力，2011年9月，1.0版，2013年1月，1.1版，该版本正式被确立为标准。最新的是SVG2.0，草稿在今年6月份已经发布。
3、它是一个开放的标准，不仅仅是一个标签或者语言或者API，这些都是它的子集。
开放，即自由、免费地使用，与flash不同，flash是私有技术。
矢量，有大小、方向，位图，仅有大小。
位图与矢量图比较：
注：
简要说明位图、矢量的区别。
这张图片展示了位图和矢量图的区别。位图是由点构成的，矢量图则是由一些形状元素构成。
3.2 为什么要用SVGSVG代码示例：
<!DOCTYPE HTML> <html> <body> <div> <svg> <text id="txt" x="20" y="20" style="fill:blue">SVG</text> </svg> </div> </body> </html>分辨率无关；
注：
1、 SVG实现不管什么大小的屏幕，缩放比例或着分辨率，都不影响图形的质量。直到SVG出现之前，我们只能通过CSS和文本渲染看到清晰的元素样式。在SVG里我们可以创建各种矢量形状。
下图是它的代码，无论屏幕分辨率是多少，只要向客户端传递这些文本就可以了，比image方式节省流量。过渡到第三点。
2、每个img，都是一个需要请求的文件。如果图像用一组DOM节点来代替，可以减少额外的HTTP请求，使你的网站速度更快，对用户更加友好。一部分图表型网站，如股票、基金，采用此方案。
3、svg里每个元素都是一个对象，是DOM树的一个节点，对于其它标签通用的属性或事件，对svg包含的标签同样适用。
4、其它优点，简单交互脚本，与第二点相关，可以用JavaScript进行交互，控制某个元素的样式等。D3.js、Raphael.js库辅助。
3.3 如何入门
主流的画图方式 4.1 画图方式
注：
1、web画图主要可以分为两类：
Flash：
Fusion Charts：让数据亮瞎你的眼睛；
AnyCharts：跨平台的数据可视化解决方案，6.0以前，flash+js，最新的6.0版加入svg，实现支持html5，flash+svg；
Html5：
canvas：html5新标签；svg：html老标签；
下面四个都是采用flash+js技术，fusioncharts，anychart收费，open flash chart开源且免费，有2个java版的api，其中一个是中国人写的。
JFreeChart是JAVA平台上的一个开放的图表绘制类库。
4.2 Canvas定义
是一个标签，用来定义图形；
只是一个图形容器，必须使用脚本绘制图形；
历史
Apple公司为了客户端矢量图形而设计；
Safari中绘图能力为Dashboard组件所用；
注：
1、canvas帆布、画布之意；
2、定义中的第二点大大限制了它的受欢迎程度；
3、对HTML扩展的根本原因在于，HTML 在Safari 中的绘图能力也为 Mac OS X 桌面的Dashboard 组件所使用，并且Apple希望有一种方式在Dashboard 中支持脚本化的图形。
相关文章
精彩导读
热门资讯
关注我们
