【SVG 生成系列论文（七）】如何生成 svg logo？IconShop: 通过自回归 Transformer 实现文本引导的矢量 Icon 生成

• SVG 生成系列论文（一） 和 SVG 生成系列论文（二） 分别介绍了 StarVector 的大致背景和详细的模型细节。
• SVG 生成系列论文（三）和 SVG 生成系列论文（四）则分别介绍实验、数据集和数据增强细节。
• SVG 生成系列论文（五）介绍了从光栅图像（如 PNG、JPG 格式）转换为矢量图形（如 SVG、EPS 格式）的关键技术-像素预过滤（pixel prefiltering）， Diffvg 这篇论文也是 SVG 生成与编辑领域中 “基于优化”方法的开创性研究。
• SVG 生成系列论文（六） 简要介绍了 IconShop 的背景和应用

本文将进一步介绍技术细节：SVG 表示与 Token 化，以及掩码方案。

论文名：IconShop: Text-Guided Vector Icon Synthesis with Autoregressive Transformers (Siggraph Asia 2023)
文章提出的模型输入为文本，模型输出为单色的、相对简单的矢量图 icon。

技术细节主要分为 4 块：

1. SVG 表示与 Token 化：介绍用于表示 SVG 图标的数据结构以及将 SVG 脚本转换为离散标记序列的策略。
2. 掩码方案：掩码方案的实现细节，该方案使自回归模型能够基于双向上下文进行中间填充（FIM，Fill-In-the-Middle）。
3. 模型架构：详细阐述了 IconShop 的主要框架和嵌入策略。
4. 训练：介绍整个流程的训练目标。

1. SVG 表示与 Token 化（分词）

1.1 SVG 表示 (简化为 Path + 3 种 Command)

背景：SVG 文件规范提供了多种功能和语法，用户可以灵活地实现他们的设计。例如，Rect 命令创建一个矩形，其控制参数包括起点、宽度和高度，如 <Rect x="80" y="90" width="100" height="100"/>；Transform 属性对现有形状元素应用仿射变换，而不是创建新元素，如 <Rect Transform="rotate(-10 50 100)" x="80" y="90" width="100" height="100"/>。

然而，如果为每个命令和属性开发一个数据结构并将其纳入训练过程，输入数据将非常复杂。这种复杂性会增加模型训练的难度，导致准确性下降。为了解决这个问题，需要限制命令和属性的数量以保持模型的性能。选择的命令和属性应能够准确捕捉 SVG 图标中的关键信息。简而言之，我们需要一个简洁明了的表示方式，传达 SVG 图标的关键方面。

受 DeepSVG${}^{[1]}$ 启发，我们通过去除所有属性并仅使用三个基本命令 (Command)：Move To、Line To 和 Cubic Bézier（参见表 1 了解解释和示例）来简化每个 SVG 图标。其他复杂命令（如 Rect、Circle、Ellipse 等）可以通过这些基本命令的组合来近似而不损失细节。例如，可以用直线组合来构建一个矩形，用四条贝塞尔曲线来形成一个圆。

如上图所示，每个 SVG 被分为不同的 Path，每个 Path 中包含若干个 Command。通过上述方式简化 SVG 图标后，它们现在有了统一的表示形式。下一步是将基于文本的 SVG 脚本转换为离散的标记序列，以便 Transformer 进行预测。

1.2 SVG Token 化

在之前的工作中，矢量量化算法（如 VQVAE${}^{[2]}$）广泛用于将高分辨率光栅图像转换为离散标记。这些量化方法无法应用于矢量图形，因为它们在表示上与光栅图像有本质区别。本文提出了一种直观且高效的 SVG 文本脚本 token 化方法，包括以下步骤：

(1) 将多个路径 𝑃${}_i$ 的命令合并为单一路径；
(2) 为每种命令类型（即 M、L、C）分配不同的编号；
(3) 将二维坐标转换为一维格式；
(4) 添加一个表示 SVG 图标完成的结束标记 。

在步骤 (1) 中，我们将各种路径合并为一个路径。然而，这一操作是不可逆的，意味着我们无法准确地将合并的序列还原为其原始的各个路径。在我们的数据集中，每个子路径（即形成路径内笔画的基本组件）总是以命令 M（Move To）开始。因此，我们可以根据 M 命令的出现来拆分合并后的路径，从而恢复各个子路径。然而，一个路径中可能包含多个子路径（即，M 命令可以出现在路径的各种位置，而不仅仅是路径的起始位置）。为了区分这两种类型的 M 命令，我们为每个 M 添加一个额外参数：
1）如果 M 出现在路径的开头，我们复制其原始参数；
2）如果 M 出现在路径中间，我们在其原始参数之前加入其起始点。
这样，具有两个相同参数的 M 命令表示新路径的开始，我们可以成功地从合并序列中恢复各个路径。

在步骤 (3) 中，假设 SVG 图像的宽度为 𝑤，我们使用公式 𝑥${}_0$ × 𝑤 + 𝑦${}_0$ 将二维点 𝑋 = (𝑥${}_0$, 𝑦${}_0$) 转换为一维坐标。通过应用这一转换，我们可以将参数标记序列的长度减半，从而在相同长度限制下处理更多的数据样本。使用上述步骤创建的序列示例如下图所示。

2. 掩码方案

给定输入序列𝑆，首先选择一个称为 span 的随机区域，并将序列分成三个部分，表示为[Left : Span : Right]，其中“:”表示连接。

然后用一个特殊的标记替换span，得到一个新的序列𝑆${}_1$，即 𝑆 1 = [Left : <Mask> : Right]。接下来，在 span 的开头添加相同的标记，并添加一个标记（即结束标记，end-of-mask），以创建一个新的序列𝑆${}_2$，即 𝑆2 = [<Mask> : Span : <EOM>]。

最后，我们将𝑆${}_1$和𝑆${}_2$连接起来形成我们发送到模型进行训练的𝑆′：𝑆′ = [Left : <Mask> : Right : <Mask> : Span : <EOM>]。

用以下这个例子来便于理解⬇️

掩码序列𝑆′传达以下信息：

• 第一个<Mask>标记表示 span 的原始位置，
• 第二个<Mask>标记表示 span 的开始位置，<EOM>标记表示 span 的结束位置。
• 在训练过程中，我们将此掩码策略随机应用于 50% 的训练数据，而其余50%则不包含特殊标记 <Mask> 和 <EOM>。
• 作者还从交叉熵损失的计算中排除了 <Mask> 标记，因此模型在推理过程中不会生成它。

而这种掩码技术如何帮助自回归模型在不修改其架构的情况下执行左到右生成和图标填充任务呢？

• 对于生成任务，我们不需要额外注意，因为模型通常从左到右生成SVG标记，而这个过程不会产生 <Mask> 标记，因为我们在损失计算中排除了它们。
• 对于FIM任务，假设有一个序列 [Left : Right]，并且想要填充 Left 和 Right 之间的中间区域。在序列中添加两个 <Mask> 标记以创建一个新的序列 [Left : <Mask> : Right : <Mask>]，然后发送给模型。模型接着生成 token ，直到出现 <EOM> 标记，得到一个序列 [Left : <Mask> : Right : <Mask> : Span : <EOM>]。然后，我们将 Span 移动到其原始位置，即第一个 <Mask> 标记的位置，以获得最终输出 [Left : Span : Right]。由于模型使用了 Left 和 Right 信息来完成序列，Span 是通过考虑双向信息生成的，这是一种“填充”的形式。

参考文献：
[1] DeepSVG: A Hierarchical Generative Network for Vector Graphics Animation. In Advances in Neural Information Processing Systems. 16351–16361.
[2] Neural Discrete Representation Learning. In Advances in Neural Information Processing Systems. 6309–6318.