HTML HTML5 PHP Mysql Linux 缓存技术 工具 资讯 读书 其他

HTML5 行内可伸缩图像(Inline SVG)


HTML5支持内联SVG.

SVG 对不起,您的浏览器不支持内联SVG.

什么是SVG?

  • SVG代表可缩放矢量图形
  • SVG是用来定义基于的网络矢量的图形
  • SVG定义了XML格式的图形
  • SVG图形放大或大小时不失去任何质量
  • 每一个元素和属性在SVG文件可以动画
  • SVG是W3C推荐的

SVG的优势

使用SVG的优势超过其它格式的图片(如JPEG 和 GIF):

  • SVG图片可以通过任何文本编辑器创建和编辑
  • SVG图像可以搜索,索引,修改,压缩
  • SVG图像是可伸缩的
  • SVG图像可以打印任何分辨率用高质量任何分辨率的图片
  • SVG可缩放(图片缩放不会影响图片质量)

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

IE9+, 火狐, 欧鹏, 谷歌, 和苹果浏览器都支持SVG.


直接在HTML页面中嵌入SVG

在HTML5中, 你可以直接在HTML页面中嵌入SVG元素:

例子

<!DOCTYPE html>
<html>
<body>

<svg width="300" height="200">
  <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>

亲自试一试 »

结果:

对不起,您的浏览器不支持内联SVG.

SVG和Canvas的不同

SVG是用XML描述二维图形的语言.

Canvas绘制2D图像和动画(使用JavaScript).

SVG是基于XML, 意味着在SVG DOM中的每个元素都是有效的.你可以引用JavaScript事件处理每个元素.

在SVG中, 每个绘制的图形都被作为对象. 如果SVG属性对象改变,浏览器会自动重新生成图形.

Canvas通过像素生成像素图形. 在canvas中, 一旦绘制了图像,会被浏览器忘记. 如果位置改变了,整个场景需要重置, 包括任何对象可能被覆盖的图形.


Canvas和SVG比较

下表展示了Canvas和SVG不同

Canvas SVG
  • 依赖分辨率
  • 不支持事件处理
  • 文本渲染能力差
  • 图片可以保存成 .png 或 .jpg
  • 较好的适用于密集的游戏
  • 与分辨率无关
  • 支持事件处理
  • 最适合与大型渲染领域的应用 (Google地图)
  • 如果复杂生成会慢(使用大量DOM会生成慢)
  • 不适合密集游戏

To Top