首页风格
门户
博客

GBin1专题之HTML5教程 - 第八篇:HTML5 SVG

日期:2012-4-24  来源:GBin1.com

什么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>

生成图形如下:

在线演示

来源:GBin1专题之HTML5教程 - 第八篇:HTML5 SVG

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐