用内联 SVG 做轻量数据可视化

什么时候用手写 SVG

• 页面里就几张图，引库不划算；
• 需要暗色主题精确配色、零依赖；
• 流程图、架构图、线框这类「画出来比说出来清楚」的场景。

常用套路

• 柱状图：<rect> 按数据高度排，配 text 标值；
• 折线/趋势：<polyline> 或 <path>，注意坐标系翻转（SVG 的 y 向下）；
• 流程图：rect 节点 + line/marker 箭头；
• 配色：暗底用高对比浅色，关键数据用金/蓝/绿点缀。

一个最小柱状图骨架

<svg viewBox="0 0 320 160">
  <rect x="10"  y="60" width="40" height="100" fill="#3b82f6"/>
  <rect x="70"  y="90" width="40" height="70"  fill="#22ab94"/>
  <rect x="130" y="30" width="40" height="130" fill="#f0b90b"/>
</svg>

经验：SVG 的 y 轴向下，画柱状图时 y = 基线 - 高度、height = 数值，别搞反。需要交互再上库，静态展示手写最省事。