Day26 - SVG和CANVAS的区别？

[su37josephxia]

• B栈视频
• 掘金文章

[Colin3191]

(1)SVG：
SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

其特点如下：

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

(2)Canvas：
Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

其特点如下：

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的应用，其中的许多对象会被频繁重绘

注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

[zzzz-bang]

Canvas 和 SVG 都允许在浏览器中创建图形，但是它们在根本上是不同的。

• SVG

  • SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形，可以说是矢量图。
  • 特点
    • 不依赖分辨率，放大不失真
    • 支持事件处理器
    • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
    • 复杂度高会减慢渲染速度
    • 不适合游戏应用

• Canvas

  • Canvas 通过 JavaScript 来绘制 2D 图形， 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。可以说是位图
  • 特点
    • 依赖分辨率
    • 不支持事件处理器
    • 弱的文本渲染能力
    • 能够以 .png 或 .jpg 格式保存结果图像
    • 最适合图像密集型的游戏，大数据量高交互的场景

[wzl624]

SVG

1. 概念：

• SVG 是一种使用 XML 描述 2D 图形的语言。
• SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
• 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

2. 特点：

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

Canvas

1. 概念：

• Canvas 通过 JavaScript 来绘制 2D 图形。
• Canvas 是逐像素进行渲染的。
• 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

2. 特点：

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

[superjunjin]

• Canvas是使用JavaScript程序绘图(动态生成)，SVG是使用XML文档描述来绘图。
• SVG是基于矢量的，所有它能够很好的处理图形大小的改变，不会造成变形，失真等问题
• Canvas是基于位图的图像，它不能够改变大小，只能缩放显示
• Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制
• SVG提供的功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景

[Limeijuan]

<canvas> 标记和 SVG 之间的一个重要的区别就是，<canvas> 使用 JavaScript API绘图，而 SVG 使用xml元素，SVG文件就是存粹的XML。

它们实现功能上相同，可以相互模拟，但在根本上是不同的，其各自特点如下：

Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

[QbjGKNick]

各自定义
SVG(Scalable Vector Graphics 可伸缩矢量图形)，它是一种基于矢量的图形，基于XML的图形格式进行交互，它是一种矢量图。SVG图像在放大或改变尺寸时其质量不会有所损失。
Canvas是HTML5提供的新元素，通过 JavaScript 来绘制 2D 图形，它是逐像素进行渲染的。
两者区别

• Canvas依赖分辨率，而SVG不依赖分辨率
• Canvas不支持事件处理器，而SVG支持事件处理器
• Canvas能够以png或jpg格式保存图像，SVG不行
• Canvas适用于图像密集型的游戏，而SVG不适合游戏

[zcma11]

svg是矢量图，因为不是基于像素，所以可以无限放大也不模糊。svg 是一个个dom元素，所以如果一直渲染复杂的操作会触发重绘重排，影响性能。canvas是位图，基于像素，所以分辨率低会出现模糊。canvas 是一个对象，通过 JavaScript 脚本操作绘图，一帧帧的画，因为 canvas 不进行dom 操作，所以绘制图像密集切换时比svg有优势。但多个canvas可能会占用很大的内存。

[JanusJiang1]

canvas是什么

canvas是H5中新增的标签，官方解释说canvas是一块画布，可以在网页中绘制图像。

svg是什么

svg即可缩放矢量图形，什么是矢量图形呢，也就是放大或者缩小不会失真的图形。 svg绘图时，每个图形都是以DOM节点的形式插入到页面中的，我们可以通过js来直接操作这些图形

区别

• JavaScript程序绘图(动态生成)，SVG是使用XML文档描述来绘图
• canvas绘画出来的图形一般成为位图，也就是放大缩小的情况下会出现失真的情况，svg绘制的图形是矢量图，不存在失真的情况
• Canvas没有图层的概念，所有的修改整个画布都要重新渲染，而SVG则可以对单独的标签进行修改
• canvas绘制的图形不会出现在DOM结构中，svg绘制的会存在于DOM结构

应用场景

Canvas绘制出来的图形是位图具有很好的渲染性能，更适合做数据量大，图像高频率交互的动画，游戏。

• ECharts
  而SVG不失真，编辑操作简单，则适合高保真图标图表，一些小logo，icon的静态展示等等。
• 网页中的小logo，icon们
• 百度脑图

[alienRidingCat]

Canvas

canvas是html5提供的新元素，canvas可以看做是一个画布，其绘制出来的图形为标量图，会受到分辨率的限制，也由于Canvas 是逐像素进行渲染的，如果Canvas 图层的位置发生变化，那么整个场景也需要重新绘制，包括任何已被图形覆盖的对象；
可以在canvas中引入jpg或png这类格式的图片，一般用来做游戏和图表类的展示；
另外我们通常是通过javascript来绘制canvas，并且canvas里面绘制的图形是不能被引擎抓取的。

特点

● 依赖分辨率
● 不支持事件处理器
● 弱的文本渲染能力
● 能够以 .png 或 .jpg 格式保存结果图像
● 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

svg的出现要比canvas更早，最初svg是用xml技术描述二维图形的语言；
由于svg是超文本扩展语言，包含DOM节点信息，可以自定义标签或属性，因此里面的图形可以被引擎抓取，支持事件的绑定
它所绘制的图形为矢量图，不能引入普通的图片，因为矢量图不需要依赖分辨率，不会失真，在项目中我们会用来做一些动态的小图标，比较适合用来开发地图。

特点

● 不依赖分辨率
● 支持事件处理器
● 最适合带有大型渲染区域的应用程序（比如谷歌地图）
● 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
● 不适合游戏应用

[partiallove]

1、svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布；

2、svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

[rachern]

SVG

SVG 意为可缩放矢量图形（Scalable Vector Graphics），基于 xml 绘制图形，SVG DOM中的每个元素都可以单独添加事件处理器和属性

canvas

canvas 是使用脚本语言（javascript）在画布上动态绘制图形，HTML5提供的 canvas 标签只是一个绘制的容器

两者的区别

canvas：

• 依赖分辨率
• 大量图形高频率交互
• 适合数据量比较大
• 能够以 .png 或 .jpg 格式保存结果图像
• 适合图像密集型的游戏

svg：

• 矢量图放大不失真
• 支持事件处理器
• 文字可搜索

[qytayh]

canvas

canvas是基于像素进行渲染的，通过javascript进行绘制。所以一旦图形被绘制完成，就不会再得到浏览器的关注，不支持事件绑定。canvas标签本身并没有绘制图像的能力，是通过javascript绘制的。

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

SVG叫可伸缩的矢量图形，它是基于XML格式的，特点是不管放大多少倍都不会失真。它可以直接插入网页，然后用css和js控制。所以支持事件处理器

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

[chunhuigao]

• 兼容性：svg是xml，canvas是html5,兼容性svg更好
• 事件处理：svg是xml,可以对部分节点绑定事件，canvas是标签
• 渲染：canvas是基于js绘制的，有像素的概念，清晰度依赖分辨率；svg是xml不依赖分辨率
• SEO： canvas是基于js绘制的，不会被搜索引擎抓取到
• 性能：canvas适用于图像密集型的游戏，SVG是xml节点，任何操作节点都会非常消耗性能，所以SVG不适合游戏
• 其他：canvas可以保存为.jpg .png图片

[aiuluna]

可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。因其是矢量图标，所以不会失真。SVG的最大优势在于便捷的交互性和可操作性

• 基于形状
• 多个图形元素，这些元素成为 DOM 的一部分
• 通过脚本和 CSS 修改
• 对象数量较小、图面更大（或同时满足这二者）时性能更佳

canvas 是 HTML5 新定义的标签，通过使用脚本（通常是 JavaScript）绘制图形。 标签只是图形容器，相当于一个画布，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，相当于使用画笔在画布上画画。Canvas在像素操作方面有着强大的优势

• 基于像素
• 单个 HTML 元素
• 仅通过脚本修改
• 图面较小时、对象数量较大 (或同时满足这二者）时性能更佳

[yanzefeng]

canvas 通过 JavaScript 来绘制 2D 图形,canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

特点

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

特点

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

[ruixue0702]

svg 是通过 xml 描述的矢量图，不受像素大小的影响，可以任意地进行放大和缩小，常用于地图等复杂度比较高的情况下

canvas 是通过 js 描述的位图，非常依赖像素，在游戏中用的比较多，渲染到浏览器中只有一个带有很多属性的 canvas 标签，一旦有一处需要变动的话，就需要整个 canvas 元素重新渲染

[792472461]

Canvas 和 SVG 都允许在浏览器中创建图形，但是它们在根本上是不同的。

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形，可以说是矢量图。

特点

• 不依赖分辨率，放大不失真
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度
• 不适合游戏应用

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形， 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。可以说是位图

特点

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，大数据量高交互的场景

[jj56313751]

svg

• 绘制：用XML描述的二维图形，在标签中直接定义样式
• 特点：可伸缩矢量图，标签形式支持事件处理器，其中的文字可搜索可编辑
• 场景：适用于地图

canvas

• 绘制：通过js动态绘制图形
• 特点：非矢量图，渲染性能高，可以导出jpg/png图片
• 场景：适合高频率交互的场景，适合3D可视化，游戏

[theoZia]

SVG是可伸缩矢量图形，SVG是使用XML来描述二维图形和绘图程序得语言。
canvas是用javascript来描述的动态图形，其实就在网页上实时绘制，一个个像素，不是矢量的，放大会失真，就是位图
canvas优点就是有很好的渲染性能，适合数据量比较大的图形开发，可高频交互适合游戏，而且可以到处jpg/png图片
成熟的应用: echart
SVG优点是，因为是矢量图片放大不失真，SVG的字可以搜索到，canvas的字是搜索不到的, SVG本质就是tag可以支持事件处理
成熟的应用: hchart

[yaoqq632319345]

svg 和 canvas 都是用来做2d可视化的
svg是一种矢量图，是用xml语言来描述的，canvas是H5新出的画布标签，canvas只负责描述画布，而具体内容则是通过js来绘制的
svg因为是矢量图，所以放大缩小不会失真，svg他相当于一个dom元素，可以用标签属性和样式来控制，也可以通过事件来操作，并且可以被搜索引擎捕捉，但是因为是以标签的形式展示，所以当数据量过大，或者渲染频繁会影响性能
而canvas则是通过js逐像素来绘制在画布上，渲染性能比svg要好，一般用作数据量大或者渲染频繁，而且canvas还可以直接另存为图片

[crazyyoung1020]

HTML5 提供了 Canvas 和 SVG 两种绘图技术，也是多数 Web 图表库使用的渲染技术。

Canvas 是基于脚本的，通过 JavaScript 指令来动态绘图。
而 SVG 则是使用 XML 文档来描述矢量图。两者有不同的适用场景。

Canvas 提供的绘图能力更底层，适合做到像素级的图形处理，能动态渲染和绘制大数据量的图形。
而 SVG 抽象层次更高，声明描述式的接口功能更丰富，内置了大量的图形、滤镜和动画等，方便进行文档元素的维护，也能导出为文件脱离浏览器环境使用。

Canvas 的性能受画布尺寸影响更大，
而 SVG 的性能受图形元素个数影响更大

[alec1815]

canvas 依赖分辨率比较适合交互比较多的场景；svg不依赖分辨率不会失真，合适交互较少的场景。

[zhenyuWang]

svg 是可伸缩矢量图，所以在放大的情况下其图形质量不会有损失。
svg 是 dom 元素，所以可以对它进行创建、编辑以及绑定事件。
同时因为 svg 是 dom 元素，所以和其他元素一样，如果多次渲染不同的内容，涉及到样式和大小变化的时候，会触发浏览器的重绘重排，增加浏览器开销。
canvas 也是 dom 元素，但是它是一块独立的画布，可以通过 JavaScript 脚本绘制图形。因为它是独立的一块画布，所以多次绘制和渲染是不涉及 dom 操作的，可以适用于频繁渲染更新的场景，比如动画，图表，还可以读取图片，然后对图片进行编辑。

[guoshukun1994]

svg和canvas都是在浏览器中的绘图工具：

1. svg是通过xml语法绘制的可伸缩矢量图，放大不会失真，可以使用css样式加标签进行绘制，绑定事件对象，可编辑内容方便seo

2. canvas是用Javascript绘制的像素位图，适合大数据量高频交互的图形绘制，渲染性能强，而且canvas还可以导出jpg,png图片使用。

[rhythm022]

canvas 在HTML里面的确是有这样一种节点，这种节点占据一块页面区域，称之为画布，在这个画布上要进行任何的绘制都必须通过 JS 来完成，而且画出来的是位图，也就是说，他不会因为这块儿绘图区域的大小缩放而导致浏览器的重新绘制，那么因此他就不会有相应的性能问题。所以，可以通过 canvas 进行大数据量的绘画，正因为如此，它的使用场景会可以允许做像地图，像游戏这样的东西。

而 SVG 的话正相反，它不需要使用 JS 来绘图，他只要用 SVG 类型的节点嵌套去描绘所要绘制的图形，并且，在这些节点上面也可以像其他的普通DOM元素一样去触发事件，而且绘制出来的图片它是矢量图，意味着区域缩放的时候他会动态重新绘制，这两点意味着它的交互性会更好。因此，他会用来做一些小图标，做一些小规模的可视化。