0044. 对比 svg 和 canvas
- 文档中提供了一张表格，记录了这俩玩意儿之间的一些差异。可以等学完了 svg、canvas 的内容之后再来回看这篇文档中提到的内容。
- 如何选择 svg、canvas？
- 如果你需要高质量的图形，如图标和矢量图，且希望它们具有良好的缩放性和可访问性，那么 SVG 可能是更好的选择。
- 如果你的项目涉及到复杂的动画、游戏或需要大量动态图形处理，Canvas 将可能提供更好的性能和灵活性。
1. 📒 对比 svg 和 canvas
| SVG | Canvas |
|---|---|
| 2003 成为 w3c 标准 | html5 新标签 |
| 绘制 矢量图 | 绘制 位图 |
| 放缩 不会导致失真 | 放缩 会导致失真 |
| 对（图形） 标签 进行操作，方便，灵活 | 对 像素点 进行操作，效果更细腻，不易操作 |
| 交互性强，容易实现动画 | 动画逻辑实现复杂 |
| 存在一定的性能问题 | 性能略高一些 |
| 适合绘制 地图、 图标 …… | 适合绘制 图表，制作 游戏 …… |
| 不易绘制 3d 图形 | 提供了绘制 3d 图形的 api |
- 在提到前端绘图时，首先会想到的两个技术就是 svg、canvas。但是它们是两个完全不同的技术，存在不少区别。在初学阶段，想要充分理解 svg、canvas 之间的区别并不容易，只能做到对它们俩有个初步的认知，比如知道它们都能用来做些什么内容。想要充分理解它们之间的区别，最好把两个技术都过一边，从各个角度去比较两者之间的差异。
- 从不同的角度来比较两者之间的差异：
- 书写体验
- 在写法上两者差异是比较大的 ——
svg ≈ html，canvas ≈ js。 - SVG：写的是 xml，写起来类似写 html，因此打开浏览器的调试工具，你可以看到一个
<svg>元素，然后这个<svg>里边包含着一个个其它的 svg 子元素。 - Canvas：仅仅是提供一个画布，所有绘图的逻辑，都交给 js 去控制，因此在浏览器的调试工具中，你只能看到一个
<canvas>标签。
- 在写法上两者差异是比较大的 ——
- 图形类型
- SVG：使用矢量图形，这意味着图形是通过数学方程式来描述的，可以无限缩放而不会失真。
- Canvas：使用像素图形（位图），它是一个矩形像素的网格，放大过多时会出现像素化。
- DOM 交互
- SVG：SVG 图形是作为 DOM（文档对象模型）的一部分直接嵌入到 HTML 中，因此可以像 HTML 元素一样用 CSS 和 JavaScript 进行控制和操作。
- Canvas：Canvas 通过 JavaScript 在一个绘图表面上动态渲染图像，它本身不是 DOM 的一部分，不能直接被 CSS 控制，所有的元素都需要通过脚本处理。
- 性能
- SVG：由于 SVG 文件是 DOM 的一部分，当 SVG 元素非常多或非常复杂时，它可能会降低页面的性能，因为每个元素都是 DOM 节点。
- Canvas：通常在处理大量或复杂动画和游戏图形时性能更好，因为它直接在位图上进行渲染，不依赖 DOM 结构。
- 可访问性和 SEO
- SVG：由于 SVG 元素是 DOM 的一部分，它们 可以被搜索引擎索引，也支持文本标签和描述，增加了可访问性。
- Canvas：Canvas 内的元素 不可搜索，对搜索引擎优化（SEO）和屏幕阅读器的支持较差。
- 应用场景
- SVG：非常适合需要高度可缩放性的应用，如图标、图表和其他复杂的交互式界面元素。
- Canvas：更适合需要大量计算和重新绘制的应用，如视频游戏、图像编辑和实时视频处理。
- 书写体验
2. 📒 svg、canvas 的应用场景
- 想要了解 svg、canvas 都能做什么，一个不错的法子就是上网找案例，看看使用 svg、canvas 技术实现的成品。比如，快速了解一下它们能够实现什么效果。
- svg 的 demos 可以看看 snapsvg demos
- canvas 的 demos 可以看看 4399 小游戏。
- 4399 中的小游戏，大多也都是通过 canvas 来制作的。
- 再比如 echarts demos
- 这里补充一嘴，实际上 echarts 图表，支持两种渲染模式 svg、canvas。默认情况下使用的是 canvas 来渲染，由此可以看出，很多图都可以用 svg、canvas 来绘制，并不是说某种图就一定得使用某种技术来实现。
