HTML5 内联SVG

最新推荐文章于 2024-11-06 12:47:03 发布

IMU_Pandade

最新推荐文章于 2024-11-06 12:47:03 发布

阅读量443

点赞数

文章标签： html5 矢量图

本文链接：https://blog.csdn.net/Pandade520/article/details/52494078

版权

HTML5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

什么是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格式保存结果图像	复杂度高会减慢渲染速度
最适合图像密集型的游戏，其中许多对象会被频繁重绘	不适合游戏应用