什么是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中,一旦图形背绘制完成,他就不会继续得到浏览器的关注,如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或者已被图形覆盖的对象