如何绘制自适应HTML容器宽度且文本尺寸固定的SVG图？

问题背景 #

我在GUI绘图应用中绘制了一张图，导出为SVG后插入HTML页面作为左对齐块级图像，特意缩放让图中文字和页面16px可回流正文大小一致。但在23英寸显示器的最大化浏览器窗口中，正文列比图宽很多，图右侧留了大片空白。

我希望图能响应式适配空间：空间充足时填充可用宽度，但不能直接缩放整个SVG（否则文字会放大，和周边正文脱节）；也不想只缩放非文字元素（会让文字在大图形里显得过小）。理想状态是图形元素能重新排布来适配空间，尤其是形式化图结构（比如有向图，节点通过边连接）。

不同宽度下的渲染示例 #

两种场景中图内文字尺寸都和图外正文一致：

• 宽屏示例：节点间距稍大，边更长
• 窄屏示例：布局更紧凑

我也清楚，这种适配布局未必总是最优——比如简单图的话，留白可能比“蛛网式”长边图更易读，节点紧贴标签也不一定理想，但仍需要这种动态适配的能力。

核心需求 #

要实现目标，需要满足两点：

1. 图的抽象定义独立于HTML容器尺寸
2. 容器尺寸变化时，能基于定义重绘图以适配

现有基础：DOT与d3-graphviz #

DOT是一种用于定义节点、边、图、子图和集群的抽象语法，Graphviz可将DOT渲染为SVG等格式；d3-graphviz是基于Graphviz的D3插件，我已有使用经验。

以下是示例图的DOT源码（<width>和<height>为实际值占位符）：

digraph {

    ratio="fill"
    size="<width>,<height>"
    margin=0
    pad=0
    bgcolor="#f0f0f0"
    
    node [shape=box,style="rounded,filled",color="#ccccff", fontname="Arial", fontsize="12pt"]
    edge [color="#6666ff"]

    a -> d
    b -> d
    c -> d

    a [label="Alpha"];
    b [label="Bravo"];
    c [label="Charlie"];
    d [label="Width: <width>"];
}

我熟悉DOT和d3-graphviz，但也欢迎其他抽象语法或工具的解决方案。

内容的提问来源于stack exchange，提问作者Graham Hannington