公司里面的产品用图表的地方也比较多,作为平台维护的我,收到几次需求提的建议中包括图表美化的功能,要炫,要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的发展似乎已经停顿,很多年没有再出新的东西。也许是因为现在的都不能被支持,更新也就没意义了。相关的开发文档和技术介绍也少之又少。不浪费时间和经历了。但学习的过程是快乐的。。