前端绘图有几种方式，主流的网络图形标准有：
- 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的特征与实现 #### 一、引言 随着互联网技术的飞速发展，用户对于网络中的图形图像提出了更高的要求。SVG（Scalable Vector Graphics，可缩放矢量图形）作为一种新兴的矢量图形标准，正逐渐...
图形标准是图形学领域内用于规范各种图形软件和硬件系统之间交流和互操作性的规则和协议。本章将对图形标准进行详细讨论，包括应用程序接口标准和图形数据交换标准两大类。 应用程序接口（API）标准是为了使软件...
电信部分的符号主要针对电话交换设备、通信线路和终端设备，为电信网络的设计和维护提供标准化的图形表示。 九、《GB4728-10-85 电信：传输》 这部分标准涉及的是电信传输设备，如微波通信、光通信等的图形符号，有...
1. **Cacti**：作为一款开源网络图形标准工具，Cacti基于LAMP架构，能够对各种类型的数据进行图形化展示。它支持SNMP、Perl或PHP脚本进行数据采集，并提供了模板监控Linux、Windows服务器、Cisco路由器等设备。Cacti...
《Visio华为网络图形模具深度解析》 在IT行业中，网络设计与规划是至关重要的环节，而高效精准的图表绘制工具则能极大地提升工作效率。Microsoft Visio作为一款强大的绘图软件，广泛应用于网络拓扑图的制作。尤其...
Visio 2010 图形设计标准教程，顾名思义，是一本针对 Visio 2010 软件使用的教学书籍。它旨在帮助读者掌握使用 Visio 2010 进行图形设计的基本技能和高级技巧。教程内容可能包括但不限于以下几个方面： 1. Visio ...
tutorial_intro_svg_r1a.pdf ...网络图形标准svg的特征与实现.pdf CR-SVG-20000802.pdf SVG 技术在电网调度自动化中的应用.pdf SVG 技术在网络地图数据组织及WebGIS 中的应用.pdf SVG开发WEBGIS.pdf
《Visio 2007图形设计标准教程》是由作者杨继萍编写的，这本教程深入浅出地介绍了Microsoft Visio 2007这一专业绘图与图表制作软件的功能与应用技巧，旨在帮助读者掌握Visio 2007的各项功能，提升图形设计的能力。...
网络编程方面，socket是Linux中实现网络通信的基础，它提供了一种标准的接口，让程序可以发送和接收数据。在聊天软件中，服务器和客户端都会通过socket建立连接，并通过send和recv函数发送和接收消息。TCP协议通常会...
这种图形标准化不仅提升了图形的可读性，还大大提高了不同电力系统之间图形共享的效率。 电力系统图形的标准化对于提高系统操作的准确性和效率具有显著作用。例如，当需要在不同的EMS系统之间交换数据或进行故障...
### 图形设计标准教程 #### 引言 随着信息技术的发展，图形化设计工具在各行业中发挥着越来越重要的作用。在本文档《图形设计标准教程》中，我们将深入了解如何使用Microsoft Visio 2007这一强大的图形设计软件来...
SNMP是一种标准协议，广泛应用于网络设备，允许Cacti获取关于设备状态和性能的数据。 3. **Web界面**：Cacti提供了一个用户友好的Web界面，用户可以通过浏览器访问并配置Cacti，查看监控图表，管理设备模板和数据...
标准还规定了如何表示和处理网络连接和拓扑信息，这对于电力系统图形来说尤其重要。正确的网络连接信息有助于系统理解和处理电力网络的物理结构。 #### 八、SVG文件描述 - **文件头**：包含文件的基本信息，如版本...
SVG，全称为Scalable Vector Graphics，是一种基于XML的矢量图形标准，由W3C（万维网联盟）制定。它的主要特点是能够无损地缩放图像，保持图形的清晰度，这使得SVG在网页设计、数据分析、地图绘制等领域有着广泛的...
"思科网络拓扑图标准图标" 在网络拓扑图绘制中，选择合适的图标是非常重要的。以下是思科网络拓扑图标准图标的相关知识点： 一、网络设备图标 * 路由器（Router）：Cisco Product Icons中提供的路由器图标，表示...
2. **地理信息系统（GIS）**：由于涉及到铁路，这个工具可能集成了GIS技术，用于管理和分析地理空间数据，帮助用户理解和操作铁路网络。 3. **数据转换**：“车辆转换”可能是指将不同车型、规格的数据进行转换，...
这些模具设计标准，颜色搭配得当，大大提高了绘制效率，减少了手动绘制图形的时间和精力。对于科研人员、教师或学生来说，这是一个非常实用的工具，能够帮助他们快速、准确地表达复杂的思想和概念。 在实际操作中，...
然而，这同时也催生了基于深度学习，尤其是卷积神经网络（Convolutional Neural Networks, CNNs）的图形验证码识别研究。 卷积神经网络是深度学习中的一种关键模型，特别适合处理图像数据。在图形验证码识别任务中...
在压缩包文件中，“272电气图形符号实用手册2.rar”和“271电气图形符号实用手册.rar”可能是手册的不同版本或者补充资料，可能包含了更深入的内容、更新的标准或更多的案例研究，以供读者进一步学习和参考。...
JavaScript中的WebGL也是基于OpenGL标准，用于在浏览器中实现3D图形渲染，对于网页游戏和互动应用特别重要。 **交互式图形**和**用户界面设计**是计算机图形学的另一大应用。Ajax技术允许网页在不刷新整个页面的...