DeepSVG: A Hierarchical Generative Network for Vector Graphics Animation

URL

https://arxiv.org/pdf/2007.11301.pdf

TL;DR

• 深度学习在光栅图上取得了极大的成功，但在矢量图上的表示和应用未被探索，矢量图相较于光栅图有无损缩放能力
• 本文给出一种便于深度学习使用的矢量图表示方法，且将 SVG 的最小表示集合缩小为 {<path>}
• 本文提出一个 SVG 数据集 SVG-Icons8

Dataset/Algorithm/Model/Experiment Detail

SVG 图像的结构化表示

• 一个 SVG 由 $N_p$ 个 path 组成，即 $V = \{P_1, ..., P_{N_p}\}$
• 一个 path 由一个三元组表示，即 $P_i = \{S_i, f_i,v_i\},\ \ S_i:shape,\ \ f_i:fill\ property,\ \ v_i: visibility$
• 一个 shape 由 $N_c$ 个 command 组成，即 $S_i = \{N_i^1,...,N_i^{N_c}\}$
• $f_i\in\{0,1,2\}, \ \ v_i\in\{0,1\}$
• 一个 command 由一个二元组表示，即 $C_i^j = (c_i^j,X_i^j)$ ，分别表示 command type 和 argument
• command type $\in$ {<SOS>, <M>, <L>, <C>, <Z>, <EOS>}
• 一个 command argument 由一个六元组表示，即 $X_i^j = (q^j_{x_1,i},q^j_{y_1,i},q^j_{x_2,i},q^j_{y_2,i},x^j_{2,i},y^j_{2,i})$ ，默认值为 -1，使用六元组的原因是对齐 <C> 的参数长度
• 为了简化 $N_c, \ N_p$ 都采用确定值

SVG Embedding

每个 command $C_i$ 被映射到一个 $d_E$ 维的向量 $e_i^j$ ， $e_i^j = e_{cmd,i}^j + e_{coord,i}^j + e_{ind,i}^j$

• command embedding

  $e_{cmd,i}^j = W_{cmd}\ \delta_{c_i^j}\in\mathbb{R}^{d_E}$ ，其中 $W_{cmd} \in \mathbb{R}^{d_E\times 6},\ \ \delta_{c_i^j}\in\mathbb{R}^6,\ \ \delta_{c_i^j}\ is \ one \ hot \ vector$

• coordinate embedding

  $e_{coord,i}^j = W_{coord}\ vector(W_X\ X_i^j)\in \mathbb{R}^{d_E}, \ \ \ X_i^j = [q^j_{x_1,i},q^j_{y_1,i},q^j_{x_2,i},q^j_{y_2,i},x^j_{2,i},y^j_{2,i}] \in \mathbb{R} ^{257 \times 6}$

• index embeding

  $e_{ind,i}^j =W_{ind}\ \delta_j \in \mathbb{R}^{d_E}, \ \ W_{ind}\in\mathbb{R}^{d_E\times N_s},\ \ \ \delta_j\ is \ one\ hot \ vector$

path 标签使用方式

SVG-Icon8 数据集样例

DeepSVG 网络结构

• 一个 VAE 结构，由两层 Encoder 和 两层 Decoder 构成

Thoughts

• 本文提出的 SVG 结构化表示有利于应用矢量图作为神经网络的输入
• 本文的 SVG 数据集都是矢量 Icon，只包含 path 标签且无填充无透明度，对于真实光栅图应该用 path 标签 + 填充 + 透明度来表示，即拓展上述的 SVG 表示