SVG
介绍
SVG
🎉 SVG 是 Scalable Vector Graphics 的缩写。它使用 XML 格式来表达矢量图形。矢量图形与使用像素表示图像的位图不一样，放大后不会失真。主流浏览器都支持 SVG。
相比 Canvas，SVG 的优点有：
- 可缩放：SVG 图形是基于矢量的，可在不丢失清晰度的情况下任意放大、缩小，放大不会导致文件变大。
- 文本形式：SVG 文件是以 XML 格式编写的，其中的文字就是文本，有利于 SEO，也方便选中复制和修改。
- 支持绑定事件
- DOM 集成：SVG 可以嵌入到 HTML 文档中的其他元素中。
- 支持 CSS 调整样式，支持 CSS 动画。
相比 Canvas，SVG 的缺点有：
- 如果图形描述起来很复杂，SVG 可能会很大，加载和渲染会有性能问题。
- 即便 SVG 中的 DOM 结点数量没有很多，当更新频率高时，也可能会有性能问题。
通过上面的描述，我觉得 SVG 最适合的场景是：要支持高精度展示并且图形本身描述起来不复杂的场景。