HTML5学习教程:HTML页面直接插入SVG元素

作者: 来源: 更新时间:2012-07-15 16:13:18 点击:
网页制作文章简介:SVG是Scalable Vector Graphics的缩写。

什么SVG? SVG是Scalable Vector Graphics的缩写 用来定义web中基于矢量的图形 使用XML来定义图形 SVG图形在缩放中不会损失质量 每一个元素和每一个属性都可以生成动画 SVG是一个W3C推荐标准SVG的优势

使用SVG相对于其它类型(JPEG或者GIF)的优势在于:

SVG图片可以使用编辑器来创建和编辑 SVG图片可以被搜索,索引,脚本化和压缩 SVG图片具有伸缩性 SVG图片可以在任何分辨率下进行高质量打印 SVG图片可以无损失的缩放浏览器支持

iefirefoxchromeoperasafari

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>