HTML5学习教程:HTML页面直接插入SVG元素
http://www.itjxue.com 2015-08-05 23:40 来源:未知 点击次数:
什么SVG？
- SVG是Scalable Vector Graphics的缩写
- 用来定义web中基于矢量的图形
- 使用XML来定义图形
- SVG图形在缩放中不会损失质量
- 每一个元素和每一个属性都可以生成动画
- SVG是一个W3C推荐标准
SVG的优势
使用SVG相对于其它类型(JPEG或者GIF)的优势在于：
- SVG图片可以使用编辑器来创建和编辑
- SVG图片可以被搜索，索引，脚本化和压缩
- SVG图片具有伸缩性
- SVG图片可以在任何分辨率下进行高质量打印
- SVG图片可以无损失的缩放
浏览器支持
IE9，Firefox，Chrome和Safari 5都支持行内SVG。
直接插入SVG到HTML页面
在HTML5中，你可以直接插入SVG元素到页面中：
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>