svg 与 canvas 的区别?

1. Canvas:
   1. Canvas 通过 JavaScript 来绘制 2D 图形 。 它是逐像素进行渲染的, 一旦图形被绘制完成, 如果它的位置发生了变化, 那么整个场景都需要重新绘制, 包括任何或者已经被覆盖的对象 。
   
2. SVG:
   1. SVG 是一种使用 XML 描述 2D 图形的语言, 它基于 XML 也就是我们可以为某个元素附加 JavaScript 事件处理器, 如果 SVG 对象的属性发生变化, 那么浏览器能够自动重现图形 。

3. svg 与 canvas 的区别:
    1. SVG 是用来描述 XML中 2D 图形的语言, canvas 借助 JavaScript 动态描绘 2D 图形 。
    2. SVG 可支持事件处理程序而 canvas 不支持 。
    3. SVG 中属性改变时, 浏览器可以重新呈现它, 适用于矢量图, 而 canvas 不可以, 更适合视频游戏等 。
    4. canvas 可以很好的绘制像素, 用于保存结果为 png 或者 gif, 可做为 API 容器 。
    5. canvas 取决于分辨率 。 SVG 与分辨率无关 。
    6. SVG 具有更好的文本渲染, 而 Canvas 不能很好的渲染, 渲染中的 SVG 可能比 Canvas 慢, 特别是应用了大量的 DOM 。
    7. 画布更适合渲染较小的区域 。 SVG 渲染更好的更大区域 。

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 "前端面试题" 的相关专栏; 大概会有200+的文章。

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨 。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。