svg技术(可缩放矢量图形)介绍

时间:2023-03-08 16:42:56

公司里面的产品用图表的地方也比较多,作为平台维护的我,收到几次需求提的建议中包括图表美化的功能,要炫,要3d,立体感,功能要强大等到;平台现有控件都是用的一个开源flash,我对flash虽然会一点但本身没什么兴趣,要美化我估计成本不划算,所以平时也留意观察一些做的好的图表插件,能够找到功能合适的,开源的,免费的那就巴适了。

最近浏览网页时无意间看到一个外表简洁但效果还炫的统计图表,它支持各种鼠标事件,还有动画,起初以为是用flash做的,用浏览器自带的web开发工具查看了一下dom结构,发现一些陌生的标签,代表之一就是svg,我心生好奇,通过查资料原来是用svg一种可缩放的矢量图形技术实现的。但这么技术已经早在2003年就已经成为w3c标准了,我感叹的同时,毕竟是我不会的,就可以学习,还是咬着牙把介绍看完吧。以下都是些口水话,w3c官网上也有介绍的。。

什么是SVG?

  SVG 指可伸缩矢量图形 (Scalable Vector Graphics SVG 用来定义用于网络的基于矢量的图形;SVG 使用 XML 格式定义图形;SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失;SVG 是万维网联盟的标准;SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。SVG 的历史和优势 在 2003 年一月,SVG 1.1 被确立为 W3C 标准与其他图像格式相比,使用 SVG 的优势在于 SVG 可被非常多的工具读取和修改(比如记事本 SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图) SVG 可以与 Java 技术一起运行 SVG 是开放的标准 SVG 文件是纯粹的 XML。

SVN能做什么   

  先看这个腾讯做的统计图表:http://v2.ta.qq.com/summary/index?sId=7835836#!1-0

  画矩形、 圆形、椭圆、线条、多边形、折线、路径、滤镜、渐变、动画等等

如何使用SVG

1、使用 <embed> 标签

<embed> 标签被所有主流的浏览器支持,并允许使用脚本。

注释:当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法!然而,如果需要创建合法的 XHTML,就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。

语法:

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

注释:pluginspage 属性指向下载插件的 URL。

2、使用 <object> 标签

<object> 标签是 HTML 4 的标准标签,被所有较新的浏览器支持。它的缺点是不允许使用脚本。

注释:假如您安装了最新版本的 Adobe SVG Viewer,那么当使用 <object> 标签时 SVG 文件无法工作(至少不能在 IE 中工作)!

语法:

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

注释:codebase 属性指向下载插件的 URL。

3、使用 <iframe> 标签

<iframe> 标签可工作在大部分的浏览器中。

语法:

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

以上内容摘自w3c

  SVG的主要用途,通过下面这篇过去的文章可以看出,它主要用与一些图形图像处理的系统中,比如GIS 地理信息系统(GeographicInformationSystem或Geo-Informationsystem,GIS),文章个地址:http://blog.****.net/feisy/article/details/2458835

个人觉得开发应用没必要用SVG开发,要是兴趣的话建议只是一个了解,深入学习就可以打消这个念头额。 如果想开发基于web的图形方面的东西,着眼现在的话还是flash,更何况现在都有HTML5了,其中测canvas功能无比强大。svg的使用在ie下还需要安装插件才能使用,虽然这次我测试没有发现太大的兼容性,同时安装多个插件会出问题。最常用的adobe的插件不支持鼠标形状的变化,而且在ie浏览器中没有滚动条,当svg图形较大或在较低分辨率下你需要自己用svg绘制滚动条,拖动滚动条的事件等也要自己写。即使是支持svg的浏览器也不是完全支持的。比如svg中用于文本换行的指令在火狐中无效。svg的发展似乎已经停顿,很多年没有再出新的东西。也许是因为现在的都不能被支持,更新也就没意义了。相关的开发文档和技术介绍也少之又少。不浪费时间和经历了。但学习的过程是快乐的。。