HTML5学习笔记3 内联SVG

HTML5支持内联SVG

下面来介绍一下什么是SVG

SVG可缩放矢量图形

可缩放矢量是基于可扩展标记语言(标准通用语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

使用xml格式定义图形

在放大或缩小或改变尺寸的情况下其图形质量不会有损失

SVG优势

与其他的图像格式相比（比如jpeg和gif）,使用svg优势在于

svg图像可通过文本编辑器来编辑来创建和修改

svg图像可被搜索，索引，脚本化或压缩

svg是可伸缩的

svg图像可在任何的分辨率下被高质量地打印。

svg图像在无损耗的情况被放大。

在html5中，您能够将svg元素直接嵌入html页面中：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
   <polygon points="100,10 40,180 190,60 10,60 160,180"
   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
 </svg>

记得曾经在给原来公司做项目的时候，用的是svg展示变电站、变压器、高配、配变、馈线、开关等元器件，三两个220KV的变电站组成一个环网单元，用一个svg

展示，一个svg文件差不多就30多Mb,在ie7,ie8还不支持的情况，借助abobe公司的插件，展示svg.

在网页中模拟鼠标左键操作，利用单击操作，修改svg图像 xml节点的值，然后刷新页面重新渲染图像。