HTML5 内联SVG

来源:互联网 发布:数据分析报告怎么做 编辑:程序博客网 时间:2024/05/18 03:44

什么是SVG

  • SVG指可伸缩矢量图形(Scalable Vector Graphics)
  • SVG用于定义网络的基础矢量的图形
  • SVG使用XML格式定义图形
  • SVG图像在放大或缩小的情况下其图片质量不会有损失
  • SVG是万维网的标准

SVG优势

  • SVG图像可通过文本编辑器来创建和修改
  • SVG图像可被搜索 索引 脚本化或压缩
  • SVG是可伸缩的
  • SVG图像可在任何分辨率下被高质量的打印

浏览器的支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持内联SVG。

把SVG直接嵌入HTML页面

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我的博客</title> </head><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>

SVG与Canvas的比较

canvas SVG 依赖分辨率 不依赖分辨率 不支持事件处理器 支持时间处理器 弱的文本渲染能力 最适合带有大型渲染区域的应用程序(比如谷歌地图) 能够以.png或.jpg格式保存结果图像 复杂度高会减慢渲染速度 最适合图像密集型的游戏,其中许多对象会被频繁重绘 不适合游戏应用
0 0
原创粉丝点击