HTML5 内联 SVG

什么是SVG?
1.SVG 指可伸缩矢量图形
2.SVG 用于定义用于网络的基于矢量的图形
3.SVG 使用XML格式定义图形
4.SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
5.SVG 是万维网联盟的标准

SVG 优势
与其他图形格式相比(比如 JPEG GIF),使用SVG 的优势在于:
1.SVG 图像可通过文本编辑器来创建和修改
2.SVG 图像可悲搜索、索引、脚本化或压缩
3.SVG 是可伸缩的
4.SVG 图像可在任何的分辨率下被高质量的打印
5.SVG 可在图像质量不下降的情况下被放大

实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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两者间的区别
1.SVG是一种使用XML描述2D图形的语言
2.Canvas通过JavaScript来绘制2D图形
3.SVG基于XML,这意味着SVG DOM中的每个元素都是可用的,你可以为某个元素添加JavaScript事件处理器
4.在SVG中,每个背绘制的图形均被视为对象,如果SVG对象的属性发生变化,那么浏览器能够自动重现图形
5.Canvas是逐像素进行渲染的,在Cnvas中,一旦图形背绘制完成,他就不会继续得到浏览器的关注,如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或者已被图形覆盖的对象

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML5 支持内联 SVG。 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Gra...
    鹿守心畔光阅读 418评论 0 2
  • svg核心学习 svg是什么呢?百度是这样说的:svg(可缩放矢量图形)是基于可扩展标记语言(标准通用标记语言的子...
    Yytg阅读 482评论 0 0
  • 一、什么是SVG? SVG指可伸缩矢量图形(Scalable Vector Graphics); SVG用来定义用...
    清心挽风阅读 1,413评论 1 3
  • 一:什么是SVG? 对于SVG的定义如下: ①:SVG 指的是可伸缩矢量图形 (Scalable Vector G...
    GreenHand1阅读 828评论 0 1
  • WhatsApp下载了好久没用,今天拉人专门体验了一把,感觉真的很不错,细节上的体验做的非常认真。 1、文本信息发...
    gentleming阅读 1,487评论 2 50