您的位置：首页 > Web前端 > HTML

html矢量图 SVG VML 介绍

2012-05-08 15:06 381 查看

观看者：想了解html矢量图知识的同学

目标：了解html矢量图知识，svg和vml 兼容方案。

实现方式：代码及相关文字解释。

最近web项目需要一些流程图的支持，于是研究了一下这部分东西，觉得很好玩，分享给大家。由于内容比较多而且涉及到很多细节的东西，所以我可能得分很多篇来介绍，这节就介绍一些基础知识。

矢量图形：也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象，每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

优点：由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。矢量图形最大的优点是无论放大、缩小或旋转等不会失真。

HTML里面的矢量图：最早引用的应该是微软于1999年9月附带IE5.0发布的。可能是方便word和html互相转换，为解析word中的图形而产生的。后来W3C于2001年9月4日发布SVG 1.0 也开始支持html中的矢量图形。

HTML中矢量图形的优点：1，用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等，适合任何分辨率的显示设备。

2，文本独立，没有任何字体或其他限制，你编辑的时候什么样子，解析的就是什么样子的。

3，矢量文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。

HTML里面的矢量图用途很广，特别是流程图，报表，地图等，但是由于技术限制可能没我们想象的多，现在更多的可能是flash。

限制：1，由于是使用 XML 来描述二维图形和绘图程序的语言，所以嵌入方式有一定的限制，以svg为例，vml也是类似的。

第一，使用 < embed > 标签但是不是合法的XHTML；

< embed src="example.svg" width="300" height="300" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" / >

第二，使用 < object > 标签。这种情况下不能使用脚本。

< object data="example.svg" width="300" height="300" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" / >

第三，使用 < iframe > 标签。

< iframe src="example.svg" width="300" height="300" > < /iframe >

2，标准的限制现在有两种ie的VML和W3C的SVG。

SVG：可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。

VML：VML的全称是Vector Markup Language(矢量可标记语言) 微软专用目前支持ie5-8。

好消息：对于上面的限制，关于第一条，使用 < svg > …… < /svg > 。目前的主流浏览器（firefox、chrome、IE9等）可以在网页中直接插入svg内容了，看下面的例子吧。

<!DOCTYPE html>
<head>
<title> SVG </title>
<meta charset="utf-8" />
</head>
<body>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg" >
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>

对于第二条限制，svg标准可以用上面的方式解决，vml的标准在ie5-8中支持的，ie9已经开始支持svg了，但是考虑到大多数人依然用的ie9以下的浏览器所以还有一种方式专门支持vml标准的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>VML</title>
</head>
<body>
<div class="memo" style="width:700;line-height:23px">
<v:textbox id="memo" style="font-size:10pt;color:blue;line-height:18px" inset="1,1,1,1">Hello world!<br>Hello VML!</v:textbox>
</div>
</body>
</html>

因此，我们如果们在firefox、chrome、IE9等浏览器中就用svg，ie9以下用vml创建矢量图就可以了。虽然最新的浏览器对SVG的友好支持使得html用矢量图方便了很多，但是由于ie5-8还占据市场的半壁江山，所以极大限制了矢量图发展，一来我们需要对美好未来的憧憬，但是也不能就此放弃html的矢量图，在以后的教程里我会详细分析vml和svg的差别，以及如何兼容两者来使我们现在就享受他带来的美好。

如果你实在着急用的话，我这里有一个很好的兼容方式，这是国外的一个兼容的类库，很强大哦。
http://raphaeljs.com/
我已经完成了一个svg+vml的兼容类大家可以参考一下：lizhi.js

新博客地址：l-zhi

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航