html矢量图 SVG VML 介绍

观看者：想了解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

html矢量图 SVG VML 介绍相关推荐

论文矢量图svg文件绘画工具以及保存方法
小虎最近写论文时遇到插入论文的图片很糊的问题,但是在绘制软件中可以放大多倍而不失真,那是不是保存方式不对?确实,小虎在将图片保存为矢量图svg文件后,发现放大超多倍都不会糊哟. 示意图 Microso ...
android 加载外部矢量图SVG
转自:http://blog.csdn.net/jiabailong/article/details/53736689 android加载矢量图的方式主要有以下两种: 一.Web方式利用WebVIe ...
html+引入svg矢量图,SVG 矢量图的加载
一.什么是 SVG SVG 是可缩放矢量图形,用户可以用代码来直接描绘图像.区别于 JPG 和 PNG 的需要用引擎来加载的图片,它直接用画布绘制,所以是无损失的. 二.SVG 的优点 SVG文件时纯 ...
Sketch编辑阿里矢量图svg的导入和切图
阿里矢量图阿里图标库下载一个icon 直接复制到Sketch软件中这个时候我们可以看到,此时我们可以对这个icon进行自己需求的定制化比如我们觉得这样的比较好看当然很明显这个是很难看的,我只 ...
虚幻引擎logo矢量图svg源码!
由于网上很难找到虚幻引擎的矢量图logo,自己画又太麻烦,偶然间发现官方的ContentExample仓库(内容示例)中有一个用样条线spline实现的logo: 这个logo完全使用三次贝塞尔曲线( ...
iconfont+svg矢量图使用与介绍
目录准备工作三种基本的使用方法 Unicode引入 font-class引入 Symbol引入彩色模式总结准备工作首先进入阿里巴巴的iconfont的官网,如果没有账号的话就先注册账号找 ...
xml矢量图:svg的viewBox和vml的coordsize决定的虚坐标系简说
SVG: viewBox是SVG的虚坐标系,比VML的简单不少. 为根节点svg元素加上viewBox属性后,在svg下的各图形元素的大小和位置都是按viewBox限定的坐标,而不是页面的实际坐标. ...
SVG矢量图（粗略介绍）
利用SVG作图圆形代码: <svg xmlns="http://www.w3.org/2000/svg"><circle cx="200" ...
python matplotlib输出矢量图svg(可插入word,仍为高清)
import matplotlib.pyplot as plt x=[1,2,3,4,5] y=[2.4,8.2,9.3,1.3,2.0] plt.scatter(x,y) plt.savefig(f ...

html矢量图 SVG VML 介绍

html矢量图 SVG VML 介绍相关推荐

最新文章

热门文章