svg 和 canvas 的区别？
回答·11
最热
最新
- 绘制的图片格式不同 Canvas 不支持事件处理器，SVG 支持事件处理器 适用范围不同
- SVG 意为可缩放矢量图形，可被单独的存储为文件，此时类似PNG\JPG等。 SVGS也是HTML中的标签之一，也可使用 XML 格式定义图像（支持绘制矩形、圆形、椭圆、直线、多边形、多段线、路径、文本、滤镜、模糊效果、阴影、渐变等） canvas是HTML中的一个图形标签，也是一个图形容器，可使用使用脚本来绘制图形。 canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 相同点：都可是HTML的标签、都可绘制矢量图形、都可加装外部图形文件等... 不同之处：加装的文件类型不同、绘制图形的方法不同等...
- canvas 是画布，放大会失真，svg 是 xml 的子集，俗称矢量图，放大之后不会失真，都是 h5 新引入的！canvas 比较吃内存，canvas 用多了页面会卡，svg 相对 canvas 会好很多！
- svg xml 格式图像 可以直接使用展示图像 canvas 画布 只是一块白板 需要操作才可填充图像
- 1.canvas 是点阵形式的像素图，svg 是 xml 格式的矢量图 2.canvas 写在 js 里除了渲染容器外没有多余的 dom，代码全在 js 里；svg 存在大量 dom，部分代码在 html 3.canvas 适合颜色丰富的图形展示，svg 适合结构化强的图形展示 4.svg 去掉一个 symbol 直接删除 dom，canvas 擦除功能不好用，会有毛边 5.canvas 事件写起来费劲，不熟悉的会搞得内存溢出，svg 方便很多 如果颜色没有什么渐变滤镜什么的建议用 svg；如果数据超级大，dom 渲染会死机，建议用 cavans 分区渲染
- canvas 可以看做一个画布，其绘制出来的图形为标量图。可以在 canvas 中引入 jpg 等格式的图片。很多大型的网络游戏都是用 canvas 画布做出来的。而 Svg 所绘制的图形为矢量图，不能引入普通的图片，因为矢量图的不会失真,所以项目中我们会用来做一些小图标
- svg 用 xml 描述，矢量图，canvas 用 js 写的放大会失真
- canvas 只能通过脚本绘制图形 SVG 支持脚本和 css
- svg 输出的是元素，canvas 输出的是画板
- Canvas 是啥都能画的画板，但是需要代码来绘制，所以强大到无所不能，毕竟还能用到 webgl。svg 是一种类似 xml 的文件格式，用描述性语言加数据属性来绘制图形，无须 js 操作便能显示图像啦