前端绘图有几种方式，主流的网络图形标准有：
- VML，IE支持；
- SVG，FF、Safari和Opera支持；
- Canvas，HTML5规范支持。
后端生成图形较为便捷，但是没法生成能够响应用户行为的动态图形（比如生成一个地图，用户点击地图上的某个城市，要显示城市信息，这通过后端图形生成很不容易做到），而且生成图形会吃掉服务端的性能。前端生成图形方面，有用Applet、ActiveX（这两个都不是什么好东西），Flash等等，但是现在，我们有纯文本的更好的选择。
下面会就这几种标准做一个介绍：
VML
Vector Markup Language（矢量标记语言）是一种XML语言，用于绘制矢量图形。1998年VML建议书由微软、Macromedia等向W3C提出审核。VML 遭到拒绝，因为Adobe、Sun等提出了PGML计划书。这两套标准后来合并成更具潜力的SVG。尽管VML规格一度遭到W3C的拒绝，并为大多数使用者所遗弃，但微软依然将VML的标准规格实现到Internet Explorer 5及之后的版本。
这里可以找到许多VML的例子。
以这段代码为例，在IE浏览器下将展示一个蓝色实心的椭圆 ：
<html xmlns:v>
<style>v\:*{behavior:url(#default#VML);position:absolute}</style>
<body>
<v:oval style="left:0;top:0;width:100;height:50" fillcolor="blue" stroked="f"/>
</body>
</html>
|
上面 xmlns:v 指的是VML的命名空间，你当然可以写全成：xmlns:v=”urn:schemas-microsoft-com:vml”；style标签内的的v\:* 是一个css样式，表示所有以”v:”开头的标签的dom元素都继承了这个样式；v:oval则绘制了一个椭圆形。
VML支持动态脚本的调用，即可以在VML中嵌套JavaScript。其实这也没有什么奇怪的，本身是DOM对象，和JavaScript的关联与HTML并无二致。
SVG
可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。在W3C自己看来，SVG的竞争对手应该主要是Flash，它的标准被开源，并且支持浏览器传统的DOM。
SVG格式和前面提到的VML一样，支持脚本，容易被搜索引擎索引。SVG可以嵌入外部对象，比如文字、PNG、JPG，也可以嵌入外部的SVG。它在移动设备上存在两个子版本，分别叫做SVG Basic和SVG Tiny。
示例：
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" width="467" height="462">
<!-- This is the red square: -->
<rect x="80" y="60" width="250" height="250" rx="20" fill="red"
stroke="black" stroke-width="2px" />
<!-- This is the blue square: -->
<rect x="140" y="120" width="250" height="250" rx="40" fill="blue"
stroke="black" stroke-width="2px" fill-opacity="0.7" />
</svg>
|
上面的例子，将展示红蓝圆角矩形嵌套的图形，可以看到蓝色矩形的fill-opacity属性带来的透明效果：
事实上，即便作为W3C标准，不同浏览器对其支持力度还是大不相同，Opera支持比较好，对SVG特性支持得最多。IE9以下的版本如果要支持SVG，需要安装Adobe公司的一个名为Adobe SVG Viewer的插件，不过效果一定不如浏览器原生支持出色（只有IE原生不支持SVG，浏览器中IE永远是那么另类，直到IE9才算部分支持）。
矢量图形格式和JPEG等格式相比，易于读懂、无损放大以外，可以利用gzip压缩算法进行文本压缩从而获得很大的压缩比，所以大小通常要比JPEG等小很多（SVGZ）。
Canvas
Canvas标签是HTML的标签之一，允许脚本动态渲染图像。开始由苹果推出，Safari率先支持，IE上对Canvas的支持可以通过诸多JavaScript库实现。HTML5大势所趋，IE9也支持了Canvas。Canvas和SVG有相当程度互补之处，相比而言VML应该是将被淘汰的标准。
<html>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>
|
很明显，这会输出一个红色矩形。
Canvas存在一个基于JavaScript的绘图API，这是和SVG、VML的不同之处，但是基于JavaScript就意味着通常对于DOM的操作不像SVG、VML那么容易，每次对图像的修改可以移除一个DOM对象即可，而是要完全重画图形。
另外一个，Canvas具备3D图形的特性（其实VML和SVG在开源包支持下也可以具备这样的特性），虽然现在支持3D特性的浏览器还很少，支持能力还很薄弱，但是未来相信能看到App和网页的大统一。
值得一提的是，当前SVG和VML在浏览器支持度的不同，使得诸多前端矢量图形库针对IE和非IE做了两套实现，保证在IE下用VML渲染，而其他浏览器中则用VML渲染，而对于Canvas的支持目前还相对较少。但是由于HTML5 API带来的互补特性，我们会看到越来越多的矢量图形库借由其对页面图形渲染的支持，比如它。
最后，是不是不使用这样的网络图形标准就不能再网页上绘图了？当然不是！通过纯粹的HTML+CSS一样可以做到。而HTML 5+CSS 3绘图的例子就更多了。
文章系本人原创，转载请注明作者和出处
注：本博客已经迁移到个人站点 http://www.raychase.net/，欢迎大家访问收藏，本ITEye博客在数日后将不再更新。
相关推荐
网络图形标准svg的特征与实现.pdf 摘要：SVG(Scalable Vector Graphics) 是由 W3C组织开发的矢量图形标准，主要面向网 络应用，它灵活，可扩展，能表现丰富的图形内容，实现了强大的交互性，可重用性和 可伸缩性。...
tutorial_intro_svg_r1a.pdf ...网络图形标准svg的特征与实现.pdf CR-SVG-20000802.pdf SVG 技术在电网调度自动化中的应用.pdf SVG 技术在网络地图数据组织及WebGIS 中的应用.pdf SVG开发WEBGIS.pdf
SVG是W3C(World Wide Web ConSor—tium国际互联网标准组织)在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和...
为了保证各种不同设备间的良好互通，接口物理特性的一致性和兼容性就显得特别重要，因此在《IEEE Std 802.3-2000》标准中规定了接口的物理特性、指标以及测试方法。本文结合作者在以太网领域多年的测试经验，介绍了...
JBT5056.1-2006网络计划技术 术语 图形符号 JB-T5056.2-2006_网络计划技术_网络图的绘制规程 这两个标准定义了中国对网络计划制图的标准
计算机图形图像处理软件的种类很多，本书在简单介绍图形图像处理基本概念的基础上，介绍了目前流行的图像处理软件Photoshop、图形绘制软件CorelDRAW和网络图像处理软件Fireworks。其中，以图像处理软件Photoshop6.0...
SVG是W3C推出的一种基于XML的网络图形标准，有必要将AutoCAD中表达的船舶设计工程图纸转换为SVG格式，使设计图可以方便地在网上发布。研究了AutoCAD图形对象和SVG图形元素的映射机制，使用NURBS曲线的节点插入算法，...
C语言项目实践评分标准(图形程序设计)整理.pdf
建设文华学院需要重新建立一个校园网，在前面了解的知识背景之上，明确网络需求和网络性能的评价标准。具体地，包括网络建设的目的与原则、投资规模、现有网络的问题与不足等；网络系统中所包含的信息点的数量、分布...
从不同地方搜集整理出来的Viso图标，全部文件都是Visio图形库的标准格式：VSS格式，内含有51个文件，分别对应类别。内容比较全面，包括常用图表、服务器图、各种符号图表、工作流程形状、绘制图表形状、网络和外设图...
这是一套是一套非常完善的图形系统，适合在电力、煤炭、化工、仿真、网络、自动化等各种工业监控软件以及图形建模、图形管理、图形分析、中小型GIS系统、工作流、中文表格、表单、工程绘图等软件项目中应用。...
5.7 标准化向量 5.8 向量的加法和减法 5.9 距离公式 5.10 向量点乘 5.11 向量叉乘 5.12 线性代数公式 5.13 练习 第6章 3D向量类 …… 第7章 矩阵 第8章 矩阵和线性变换 第9章 矩阵的更多知识 第10章 3D中的方位与角...
SVG，即可缩放矢量图形 (Scalable Vector Graphics)，是一种基于XML的开放SVG，即可缩放矢量图形 (Scalable Vector Graphics)，是一种基于XML的开放网络标准，用于描述二维的矢量图形。它于1999年诞生，其语法与XML...
它独立于硬件和窗口系统，在运行各种操作系统的各种计算机上都可用，并能在网络环境下以客户/服务器模式工作，是专业图形处理、科学计算等高端应用领域的标准图形库。 OpenGL在军事、广播电视、CAD/CAM/CAE、娱乐、...
《LINUX操作系统》课程标准 教研室主任： 专业带头人： 系(部)主任： 教务处处长： 教学副院长： 审核批准日期： 二 一 七 年 五 月 《LINUX操作系统》课程标准 （基本信息） 课程编码： 课程类别：专业方向课程 ...
网络标准头像采集工具是一款简便好用的免费网络头像采集工具，免安装，双击即可运行。用于网上报名、论坛、QQ头像、网店头像等标准头像采集，能对图象进行简单的编辑修改，输出设定长宽的图片，如果输出JPG、JPEG...
OpenGL - 高性能图形算法行业标准 OpenGL™ 是行业领域中最为广泛接纳的 2D/3D 图形 API, 其自诞生至今已催生了各种计算机平台及设备上的数千优秀应用程序。OpenGL™ 是独立于视窗操作系统或其它操作系统的，亦是...
方案设计 12 3.1 设计标准及规范 12 3.2 整体网络拓扑结构 13 3.3 布线要求 13 3.3 网络设备选型及预算 13 3.3.1网络设备选取 13 3.3.2服务器类型 17 3.3.3网络设备选取及报价 19 3.3.4线缆报价 19 3.4 综合布线测试...
计算机应用专业 《计算机图形图像处理 CorelDRAW X6》课程标准 前言 （一）课程定位 本课程是全国中等职业学校计算机类专业的专业基础课。是平面出版、广告制作、印 刷、多媒体作品输出、软件界面设计、网站规划建设...
这是一套是一套非常完善的图形系统，适合在电力、煤炭、化工、仿真、网络、自动化等各种工业监控软件以及图形建模、图形管理、图形分析、中小型GIS系统、工作流、中文表格、表单、工程绘图等软件项目中应用。...