文章链接：
https://mp.weixin.qq.com/s/uWu4_yM5wb-eFkBlMBD-TA

什么是 SVG

SVG（Scalable Vector Graphics，可缩放矢量图形）基于 XML 标记语言，用于描述二维图形。与我们常见的位图图像（后缀名 jpg，png 等）不同，SVG 图像本质上是通过文本形式存储对形状的描述，因此其可以缩放到任意大小而不会产生失真或降低质量。让我们通过一个例子来感受一下 SVG 图像的本质。

上图是一个 SVG 图像示例，下面的 XML 代码则对这张 SVG 图像的属性进行了描述

<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V4C12.75 4.41421 12.4142 4.75 12 4.75C11.5858 4.75 11.25 4.41421 11.25 4V2C11.25 1.58579 11.5858 1.25 12 1.25ZM1.25 12C1.25 11.5858 1.58579 11.25 2 11.25H4C4.41421 11.25 4.75 11.5858 4.75 12C4.75 12.4142 4.41421 12.75 4 12.75H2C1.58579 12.75 1.25 12.4142 1.25 12ZM19.25 12C19.25 11.5858 19.5858 11.25 20 11.25H22C22.4142 11.25 22.75 11.5858 22.75 12C22.75 12.4142 22.4142 12.75 22 12.75H20C19.5858 12.75 19.25 12.4142 19.25 12ZM12 19.25C12.4142 19.25 12.75 19.5858 12.75 20V22C12.75 22.4142 12.4142 22.75 12 22.75C11.5858 22.75 11.25 22.4142 11.25 22V20C11.25 19.5858 11.5858 19.25 12 19.25Z" fill="#1C274C"/>
<g opacity="0.5">
<path d="M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L6.87359 5.81293C7.16648 6.10583 7.16648 6.5807 6.87359 6.87359C6.5807 7.16648 6.10583 7.16648 5.81293 6.87359L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z" fill="#1C274C"/>
<path d="M18.5303 5.46967C18.8232 5.76256 18.8232 6.23744 18.5303 6.53033L18.1871 6.87359C17.8942 7.16648 17.4193 7.16648 17.1264 6.87359C16.8335 6.5807 16.8335 6.10583 17.1264 5.81293L17.4697 5.46967C17.7626 5.17678 18.2374 5.17678 18.5303 5.46967Z" fill="#1C274C"/>
<path d="M6.87338 17.1266C7.16627 17.4195 7.16627 17.8944 6.87338 18.1873L6.53033 18.5303C6.23744 18.8232 5.76256 18.8232 5.46967 18.5303C5.17678 18.2374 5.17678 17.7626 5.46967 17.4697L5.81272 17.1266C6.10561 16.8337 6.58048 16.8337 6.87338 17.1266Z" fill="#1C274C"/>
<path d="M17.1266 17.1266C17.4195 16.8337 17.8944 16.8337 18.1873 17.1266L18.5303 17.4697C18.8232 17.7626 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7626 18.8232 17.4697 18.5303L17.1266 18.1873C16.8337 17.8944 16.8337 17.4195 17.1266 17.1266Z" fill="#1C274C"/>
</g>
<path d="M7 11.0595C7 13.6018 9.00971 14.9566 10.4809 16.1692C11 16.5971 11.5 17 12 17C12.5 17 13 16.5971 13.5191 16.1692C14.9903 14.9566 17 13.6018 17 11.0595C17 8.51718 14.2499 6.71421 12 9.15837C9.75008 6.71421 7 8.51718 7 11.0595Z" fill="#1C274C"/>
</svg>

可以看到，这样的一张 SVG 图像就是由这些代码所描述的，其中的每个 <path></path> 都是一条路径。

随着图像领域 AIGC 的飞速发展，我们难免会问，是否可以通过 AIGC 技术来生成 SVG 图像呢？答案是肯定的。接下来，我们将介绍几篇 SVG 图像生成方面的论文。

SVG 图像生成

DeepSVG

作为 SVG 图像生成的早期工作，DeepSVG 选用了与 VAE（Variational Autoencoder，变分自编码器） 类似的架构。但不同的一点是，DeepSVG 使用了分层编码器与分层解码器。

编码器部分分为 ， 用来为每条路径生成相应的隐变量，而 则根据所有路径的隐变量生成一个最终的隐变量，作为编码器部分的最终输出。

解码器部分与编码器部分类似，分为 。 接收编码器部分输出的隐变量，都解码出每一条路径的隐变量，而 则是接收每条路径的隐变量，解码出最终结果。

但是，由于 SVG 图像有着路径间无顺序的特点，DeepSVG 使用了一个 来指派这种顺序，具体有字典序和匈牙利算法两种。

Im2Vec

说完了 DeepSVG，我们来看 Im2Vec。很明显，DeepSVG 的训练过程需要 SVG 图像来作为训练数据与监督信号，这并不有利于更大规模的模型的训练。因此，Im2Vec 提出了使用位图来监督 SVG 图像生成的方法。

Im2Vec 的结构如上图所示。位图会首先通过一个 Encoder 得到一个全局的隐变量，然后通过一个 RNN 为每条路径生成一个隐变量和一个深度信息。每条路径的隐变量会通过 PathDecoder 来得到向量化的输出。然后每一部分的向量化输出会经过光栅化转换为位图，并根据深度信息进行叠加，输出重建后的位图。这样一来，便实现了输入和输出均为位图的自监督方法。

PathDecoder 包含两个 1D circular 卷积。首先根据隐变量在圆上均匀采样一些点，第一个卷积来实现自适应密度采样，以调整采样点的密度，实现更多细节；第二个卷积来实现采样点的位移。

ClipGen

ClipGen 则是采用了与 Clip 类似的方法，在生成过程中融入了类别信息。ClipGen 的整体逻辑是自回归式生成，其中 target shape 是可选项。

当前画布会首先通过一个函数以获得曲线信息，曲线信息和类别信息会一起输入到 CNN 中，输出接下来要绘画的内容的概率图，并决定是否增加新图层。如果增加新图层，那么曲线信息、类别信息、概率图会一起输入给下一个 Network，得到新图层的绘画结果，并叠加到原画布上。

StarVector

StarVector 则是使用了 CLIP+CodeLLM 的 MLLM 来生成构成 SVG 图像的代码。

在训练时，位图和对应的 SVG 版本的代码会分别通过 CLIP 和 tokenizer 转换为 token，然后使用 next token prediction 的方法进行训练。

而在推理时，由于输入只有 image 部分，因此输入变为 image 转换为 token，由 CodeLLM 来预测 SVG 代码部分的所有 token，实现输出 SVG 的效果。

SVGDreamer

SVGDreamer 则是使用了文生图的 Diffusion Model 来实现这一过程。首先根据文本提示生成出相应的图片，并根据相应文本 token 得到注意力 heatmap。再根据 heatmap 对控制点、起止点进行采样，并使用 SIVE 损失函数进行优化，最终得到分层的 SVG 图片。

然后对 SVG 图片中的每条路径进行随机选择，并进行光栅化，然后在使用 LoRA 微调原文生图模型的过程中，使用 VPSD 优化对 SVG 图的路径进行优化。

T2V-NPR

T2V-NPR 也是使用了 Diffusion Model，但思路构建上却与 SVGDreamer 不一样。

T2V-NRP 首先构建了一个 VAE 架构的模型，来初步训练 Diffusion，如上图 a 部分。SVG 图会渲染为位图，并提取为隐变量。隐变量会通过两个 Diffusion 以分别生成 SVG 图的重建以及位图的重建。

将第一步中的 SVG Diffusion 拿出来，在第二步中使用 VSD 方法对 SVG 的路径进行优化，这一部分与 SVGDreamer 中的 VPSD 过程是类似的。

最后，SVG 的路径会在第三步中迎来逐层优化，最终得到更好观感的 SVG 图。

参考文献：

[1] DeepSVG，NIPS 2020，https://arxiv.org/abs/2007.11301

[2] Im2Vec, CVPR 2021 Oral, https://arxiv.org/abs/2102.02798

[3] ClipGen, TVCG 2021, https://arxiv.org/abs/2106.04912

[4] StarVector, Arxiv 2023, https://arxiv.org/abs/2312.11556

[5] SVGDreamer, CVPR 2024, https://arxiv.org/abs/2312.16476

[6] T2V-NPR, SIGGRAPH 2024, https://arxiv.org/abs/2405.10317