网络图形标准概览-优快云博客

本文介绍了主流的网络图形标准，包括VML、SVG和Canvas。详细解释了这些标准的特点、应用场景及浏览器支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网络图形标准

前端绘图有几种方式，主流的网络图形标准有：

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" 
        
 
             
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
        
 
         <
         svg 
         xmlns
         =
         "http://www.w3.org/2000/svg" 
         version
         =
         "1.1" 
        
 
             
         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博客在数日后将不再更新。