svg

可缩放矢量图形 (SVG) 是一个基于

XML

语法的 2D 矢量图形格式。基于

XML

语法,可以使用

CSS

指定 SVG 的样式,并使用

JavaScript

进行交互。

https://docs.corp.kuaishou.com/image/api/external/load/out?code=fcAA4l5yToL8PgPOhJZ7aTDqI:687714442231362968:1622348170770

svg 适用场景

SVG功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景,

svg 不足

但是,SVG 图表也有缺点。在渲染引擎中,SVG 元素和 HTML 元素一样,在输出图形前都需要经过引擎的解析、布局计算和渲染树生成。而且,一个 SVG 元素只表示一种基本图形,如果展示的数据很复杂,生成图形的 SVG 元素就会很多。这样一来,大量的 SVG 元素不仅会占用很多内存空间,还会增加引擎、布局计算和渲染树生成的开销,降低性能,减慢渲染速度。这也就注定了 SVG 只适合应用于元素较少的简单可视化场景。

svg 优点

  • 不失真,放大缩小图像都很清晰
  • 学习成本低,也是一种 DOM 结构
  • 使用方便,设计软件可以直接导出
  • 从操作对象上说,SVG则是基于XML元素的。