图形化渲染之 - SVG

Posted 2021-06-14 张驰Terry

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元素的。