svgdx - 轻松创建 SVG 图表

svgdx 是一个命令行工具，可以将 SVG 的超集转换为 SVG 图像。

此项目处于早期开发阶段，存在许多已知问题和频繁的功能更新。

特别是，输入格式目前尚未稳定。有关信息，请参阅 CHANGELOG。

在线编辑器

svgdx.net 托管了一个基于 WASM 的 svgdx 操场，您可以在其中探索 svgdx 而无需安装任何东西。

注意：文档完全存储在您的本地浏览器中使用 localStorage API。编辑器目前从该存储库的 main 分支更新，因此请注意，破坏性更改可能会影响您的图表。

安装

目前，安装需要一个有效的 Rust 工具链，例如从 rustup.rs 安装。

按照以下方式安装 svgdx

cargo install svgdx

用法

svgdx [INPUT] [-o OUTPUT] [-w]

默认情况下，svgdx 从 stdin 读取并写入标准输出，因此如果没有任何参数运行，它将简单地等待输入。

具有非 stdin 输入文件的 -w 参数（'watches' 输入）会在它更改时重新生成输出。这对于与 SVG 查看器/预览一起使用特别有用，该查看器/预览器在底层文件更改时也会刷新视图。

示例

输入

准备一个输入文件 (examples/simple.xml)

<svg>
  <rect id="in" wh="20 10" text="input" />
  <rect id="proc" xy="^:h 10" wh="^" text="process" />
  <rect id="out" xy="^:h 10" wh="^" text="output" />

  <line start="#in" end="#proc" class="d-arrow"/>
  <line start="#proc" end="#out" class="d-arrow"/>
</svg>

处理

使用 svgdx 处理输入

$ svgdx examples/simple.svg -o examples/simple.svg

输出

输出文件 (examples/simple.svg)

这是以下生成的 SVG 的渲染

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="96mm" height="22mm" viewBox="-8 -6 96 22">
  <defs>
    <marker id="d-arrow" refX="1" refY="0.5" orient="auto-start-reverse" markerWidth="5" markerHeight="5" viewBox="0 0 1 1">
      <path d="M 0 0 1 0.5 0 1" style="stroke-width: 0.2; stroke: context-stroke; fill: context-fill; stroke-dasharray: none;"/>
    </marker>
  </defs>
  <style>
    rect, circle, ellipse, line, polyline, polygon, path { stroke-width: 0.5; stroke: black; fill: none; }
    text { font-family: sans-serif; font-size: 3px; }
    text.d-tbox, text.d-tbox * { text-anchor: middle; dominant-baseline: central; }
    line.d-arrow, polyline.d-arrow, path.d-arrow { marker-end: url(#d-arrow); }
  </style>
  <rect id="in" width="20" height="10"/>
  <text x="10" y="5" class="d-tbox">input</text>
  <rect id="proc" x="30" y="0" width="20" height="10"/>
  <text x="40" y="5" class="d-tbox">process</text>
  <rect id="out" x="60" y="0" width="20" height="10"/>
  <text x="70" y="5" class="d-tbox">output</text>

  <line x1="20" y1="5" x2="30" y2="5" class="d-arrow"/>
  <line x1="50" y1="5" x2="60" y2="5" class="d-arrow"/>
</svg>

此示例仅展示了 svgdx 提供的几个功能

• 快捷属性，例如使用 wh 而不是分别指定 width 和 height。
• 相对定位，可以通过引用id（例如：#in），或者使用箭头符号（^）定位到前一个元素。
• 新属性提供额外的功能 - 在形状中提供text，或在<line>元素上定义连接点的start和end。
• 自动计算根<svg>元素的width，height和viewBox，这些值是从所有元素的边界框推导出来的。
• 自动添加样式以提供“框和线”图的有意义的默认值。

svgdx提供了许多更多功能，旨在使图成为您可以编写而不是绘制的东西。

请参阅更多示例

背景

SVGdx旨在支持“键入图表”的工作流程，其级别低于（且更灵活）诸如Mermaid或Graphviz之类的结构化工具。

一个重要的原则是，原始SVG可以在输入的任何位置直接包含。这类似于Markdown，它提供了使用内联HTML标签的“逃生口”。Markdown作为一种基于文本的格式，允许简单的文本文件携带语义和简单的样式信息。能够在一个单一的工作流程中做到这两点——只需通过键入——允许一种否则无法实现的流程。

是否可以对绘制做同样的事情——特别是对于图表？这正是svgdx旨在提供的服务。

文本文件与其他格式相比具有许多优点

• 与版本控制有明确的兼容性 - 有意义的差异
• 自我描述 - 文本文件即使在没有清晰的规范或其他工具的情况下也易于（至少近似地）逆向工程
• 应用程序独立 - 可以编写额外的工具来处理该格式
• 易于编辑 - 至少对于简单的更改来说如此

基于文本的图表工具

有几个现有的工具以文本形式传达图表信息

• Mermaid
• Graphviz
• PlantUML

在这些工具中，大多数工具针对各种特定的数据形式进行了专门化；它们对文本的语义内容应用了一定程度的智能，并渲染出代表这种内容的图表。对于它们工作的特殊情况来说，效果很好，然而，添加超出工具强加的图形结构将最终与之抗争。

Ditaa与此不同，因为输入已经提供了一个图表结构，它实际上只是渲染它。创建图表的工作已经完成。

当抽象失败时，转向底层通常是答案。我们是否可以从我们想要的结果开始反向工作，而不是从输入信息开始？

SVG是一种基于XML的语言，用于定义矢量图像。上述讨论的工具（除ditaa外）都可以输出SVG图像，SVG是图表工具的图形格式（可能甚至是唯一）最低的共同分母。

为什么是'svgdx'？

项目命名很难。

我可以写关于这个工具如何改进创建图表的开发者体验；也许说是图表体验的改进。但主要是svgdx中的dx指的是SVG的增量。

这是一个明确的SVG工具，而不是某种通用的绘图工具。当与SVG的某些经验结合使用时，它最有用。虽然SVG标准进展缓慢，但这个工具允许保留SVG的所有优点，并添加一点额外的功能。