还能用 AI 生成 SVG(可缩放矢量图像)?我们来聊聊 SVG

boyanx8个月前技术教程59

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

什么是 SVG

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

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










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

随着图像领域 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

标签: svg 生成

相关文章

DeepSeek怎么生成流程图?用这2个绘图软件一键绘制!

DeepSeek从小范围内流行到爆火出圈,用了不到半个月时间,其热度从目前公开的数据可见一斑,一个月内迅速斩获1.25亿用户,日活也随之突破3000万,超越此前表现亮眼的AI工具豆包。DeepSeek...

文章和PPT配图有救了!SVG绘图专家智能体大揭秘

阿里妹导读 本文分享如何使用 DeepSeek-V3-0324 和 Claude 3.5 或...

Net.Codecrete.QrCodeGenerator:.NET平台上的QR码生成利器,提前一小时关机下班

大家好,我是深山踏红叶,今天要介绍一个二维码生成的免费库 Net.Codecrete.QrCodeGenerator 用于生成二维码。非常简洁、易用,且可以生成符合二维码标准的二维码图像。前言Net...

Web开发人员的福音!8个实用的SVG工具

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...

AI驱动的文本矢量图形生成技术,转化为有层次结构的矢量图形!

NeuralSVG是创新的文本驱动矢量图形生成技术。通过一个小型的多层感知器网络,将文本提示转化为具有层次结构的矢量图形。该网络以形状索引为输入,输出形状参数,再经可微染器生成像素输出。基于分数蒸馏采...

零基础1分钟上手!AI一键生成Mermaid流程图/时序图等等实战指南

无需绘图基础! 通过AI快速生成专业图表,并直接在网站实现实时编辑、预览、导出。适用场景:需求文档撰写、技术方案设计、会议沟通等高频图表制作场景。 为什么选择「AI + Mermaid」?效率革命:从...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。