svg技术（可缩放矢量图形）介绍

公司里面的产品用图表的地方也比较多，作为平台维护的我，收到几次需求提的建议中包括图表美化的功能，要炫，要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> 标签

注释：当在 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> 标签

注释：假如您安装了最新版本的 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 src="rect.svg" width="300" height="100">
</iframe>

以上内容摘自w3c

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

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