deepsvg - DeepSVG：矢量图形生成与动画的分层网络

logo

介绍

由 LingoSub 赞助：通过观看带有AI驱动翻译的视频学习语言

这是论文"DeepSVG: 矢量图形动画的分层生成网络"的官方代码。请参阅下面部分了解引用详情。

论文：arXiv
代码：GitHub
项目页面：链接
Reshot AI：链接
BricksAR：链接
LingoSub：链接
ClipLaunch：链接
在AI Unfolded上亮相：

1分钟视频：

此存储库包括：

训练代码，用于复现我们的分层生成网络：DeepSVG。
一个用于SVG数据深度学习的库，包括导出到可微分PyTorch张量的功能。
SVG-Icons8数据集。
一个展示DeepSVG矢量图形动画的图形用户界面演示。

更新

2020年12月：添加了原始SVG数据加载器（请参阅数据加载器部分）。
2020年9月：被NeurIPS2020接受 🎉
2020年7月：添加了预训练模型和字体生成的笔记本。

安装

首先克隆此Git存储库：

git clone https://github.com/alexandre01/deepsvg.git
cd deepsvg

创建一个新的conda环境（Python 3.7）：

conda create -n deepsvg python=3.7
conda activate deepsvg

然后安装依赖项：

pip install -r requirements.txt

请参阅cairosvg的文档了解CairoSVG的其他要求。例如：

在Ubuntu上：sudo apt-get install libcairo2-dev。
在macOS上：brew install cairo libffi。

测试环境

Ubuntu 18.04，CUDA 10.1
macOS 10.13.6，CUDA 10.1，从源代码安装PyTorch

数据集

icons_dataset 使用dataset/中提供的脚本下载数据集，运行：

cd dataset/
bash download.sh

如果这对你不起作用，请从Google Drive手动下载数据集，将文件放在dataset文件夹中，然后解压（这可能需要几分钟）。

icons_meta.csv（9 MB）：https://drive.google.com/file/d/10Zx4TB1-BEdWv1GbwcSUl2-uRFiqgUP1/view?usp=sharing
icons_tensor.zip（3 GB）：https://drive.google.com/file/d/1gTuO3k98u_Y1rvpSbJFbqgCf6AJi2qIA/view?usp=sharing

默认情况下，数据集将保存为以下树结构：

deepsvg
 └─dataset/
    ├── icons_meta.csv
    └── icons_tensor/

注意：icons_tensor/文件夹包含100k个预增强的PyTorch张量格式的图标，这使得轻松复现我们的工作成为可能。然而，为了获得完全的灵活性和更多的研究自由，我们建议从icons8下载原始SVG图标，为此你需要一个付费计划。从源下载数据集的说明即将推出。

要下载Font数据集，我们建议遵循SVG-VAE的说明：https://github.com/magenta/magenta/tree/master/magenta/models/svg_vae。出于演示目的，我们还发布了一个迷你版数据集。要下载它，请运行：

cd dataset/
bash download_fonts.sh

或使用以下链接：

fonts_meta.csv (6 MB): https://drive.google.com/file/d/1PEukDlZ6IkEhh9XfTTMMtFOwdXOC3iKn/view?usp=sharing
fonts_tensor.zip (92 MB): https://drive.google.com/file/d/15xPf2FrXaHZ0bf6htZzc9ORTMGHYz9DX/view?usp=sharing

数据加载器

要处理自定义的SVG数据集，请使用SVGDataset数据加载器。要即时预处理它们，可以将already_preprocessed设置为False，但为了获得更好的I/O性能，我们建议在训练之前预处理它们。

为此，请使用dataset/preprocess.py脚本：

python -m dataset.preprocess --data_folder dataset/svgs/ --output_folder dataset/svgs_simplified/ --output_meta_file dataset/svg_meta.csv

这将以多线程方式预处理所有输入的SVG，并生成元数据文件，以便更容易进行训练筛选。

然后修改训练配置，提供正确的数据加载器模块、数据文件夹和元数据文件：

cfg.dataloader_module = "deepsvg.svg_dataset"
cfg.data_dir = "./dataset/svgs_simplified/"
cfg.meta_filepath = "./dataset/svg_meta.csv"

深度学习SVG库

DeepSVG与处理SVG数据的深度学习库一同开发。主要特点包括：

解析SVG文件。
将基本形状和命令转换为m/l/c/z子集。
路径简化，使用Ramer-Douglas-Peucker和Philip J. Schneider算法。
数据增强：SVG的平移、缩放、旋转。
转换为PyTorch张量格式。
绘图工具，包括控制点可视化和导出GIF动画。

笔记本notebooks/svglib.ipynb提供了deepsvg.svglib库的使用指南。以下是展示我们库灵活性的一小段示例代码：

from deepsvg.svglib.svg import SVG
from deepsvg.svglib.geom import Point, Angle

icon = SVG.load_svg("docs/imgs/dolphin.svg").normalize()
icon.simplify_heuristic()                                 # 路径简化
icon.zoom(0.75).translate(Point(0, 5)).rotate(Angle(15))  # 缩放、平移、旋转
icon.draw()

dolphin_png

制作SVG的GIF动画同样简单：

icon.animate()

dolphin_animate

可微分SVG形状优化

类似于PyTorch3D，可以在SVGTensor上执行可微分操作，通过梯度下降使圆形变形以匹配任意目标。有趣的是，在初始圆中使用较少数量的贝塞尔命令（n）会创造出目标形状的某种艺术近似。请参见notebooks/svgtensor.ipynb。

n	4	8	16	32
优化

图形用户界面（实验性）

在开发DeepSVG时，我们还构建了一个图形用户界面（GUI），以便更轻松地可视化我们的模型，并作为一个轻松创建2D动画的工具。该代码位于deepsvg/gui下，使用Kivy编写，UI风格受设计工具Figma启发。

免责声明：这个GUI主要是为演示目的而开发的，预期的矢量图形编辑器功能（如重新缩放）将在不久的将来添加。为了获得更大的灵活性，我们建议使用notebooks/animation.ipynb中提供的模板代码以编程方式创建动画。

gui

快捷键：

H：手工具
P：钢笔工具
Ctrl/⌘ Cmd P：铅笔工具
K：创建关键帧
空格键：播放/暂停
Ctrl/⌘ Cmd E：导出动画为GIF（默认保存在./gui_data）

训练

通过运行以下命令开始训练。

python -m deepsvg.train --config-module configs.deepsvg.hierarchical_ordered

可选的--log-dir参数让你选择保存模型检查点和tensorboard日志的目录。

推理（插值）

通过运行以下命令下载预训练模型：

cd pretrained/
bash download.sh

如果这不起作用，你可以从Google Drive手动下载它们并放在pretrained文件夹中。

hierarchical_ordered.pth.tar (41 MB): https://drive.google.com/file/d/1tsVx_cnFunSf5vvPWPVTjZ84IQC2pIDm/view?usp=sharing
hierarchical_ordered_fonts.pth.tar (41 MB): https://drive.google.com/file/d/11KBUWfexw3LDvSFOVxy072_VCFYKm3L-/view?usp=sharing

我们在notebooks/interpolate.ipynb中提供了示例代码，用于在SVG图标对之间进行插值，以及notebooks/latent_ops.ipynb用于在SVG潜在空间中进行类似word2vec的操作，如我们论文中的实验所示。

笔记本

描述	笔记本链接
SVGLib 详解	svglib.ipynb
可微分 SVGTensor 优化	svgtensor.ipynb
DeepSVG 图标对之间的插值	interpolation.ipynb
DeepSVG 潜在空间操作	latent_ops.ipynb
DeepSVG 用户绘制图像之间的动画	animation.ipynb
DeepSVG 字体生成和插值	fonts.ipynb

引用

如果您在研究中发现此代码有用，请引用：

@misc{carlier2020deepsvg,
    title={DeepSVG: A Hierarchical Generative Network for Vector Graphics Animation},
    author={Alexandre Carlier and Martin Danelljan and Alexandre Alahi and Radu Timofte},
    year={2020},
    eprint={2007.11301},
    archivePrefix={arXiv},
    primaryClass={cs.CV}
}

贡献

欢迎贡献！如果您发现了错误或开发了可能对他人有用的功能，请随时提交拉取请求。此外，如果您对这个代码仓库有任何进一步的问题，请不要犹豫，联系我。

许可

本代码根据 MIT 许可发布。