SVGBuilder: Component-Based Colored SVG Generation with Text-Guided Autoregressive Transformers

TL;DR

SVGBuilder tackles efficient, text-guided colored SVG generation by combining a component-based decomposition with autoregressive modeling. It introduces ColorSVG-100K to enable learning diverse colored vector graphics. The method achieves state-of-the-art FID among language-based SVG generators and delivers up to 604× faster generation than optimization-based approaches, demonstrating practical viability for scalable vector graphic design. The work highlights a path toward rapid, high-quality vector generation guided by natural language, with practical implications for web and graphic design workflows.

Abstract

Scalable Vector Graphics (SVG) are essential XML-based formats for versatile graphics, offering resolution independence and scalability. Unlike raster images, SVGs use geometric shapes and support interactivity, animation, and manipulation via CSS and JavaScript. Current SVG generation methods face challenges related to high computational costs and complexity. In contrast, human designers use component-based tools for efficient SVG creation. Inspired by this, SVGBuilder introduces a component-based, autoregressive model for generating high-quality colored SVGs from textual input. It significantly reduces computational overhead and improves efficiency compared to traditional methods. Our model generates SVGs up to 604 times faster than optimization-based approaches. To address the limitations of existing SVG datasets and support our research, we introduce ColorSVG-100K, the first large-scale dataset of colored SVGs, comprising 100,000 graphics. This dataset fills the gap in color information for SVG generation models and enhances diversity in model training. Evaluation against state-of-the-art models demonstrates SVGBuilder's superior performance in practical applications, highlighting its efficiency and quality in generating complex SVG graphics.

Figures (9)

• Figure 1: Illustration of component-based SVG generation, with each path in the SVG code considered as a component. The process demonstrates the construction of an SVG from individual components.
• Figure 2: Random samples generated by SVGBuilder.
• Figure 3: System framework overview. The framework comprises two primary steps. The first step is Component Library Construction, which includes the sub-process of Remove Colors and Normalize. The second step involves the SVGBuilder's operations, which encompass the SVG Decoder Sequence and the Recover Component processes.
• Figure 4: Examples of SVGs generated by different models. DiffSketcher represents the optimization-based model, while the others are language-based models.
• Figure 5: The construction process of the ColorSVG-100K dataset, including the steps of data collection, data cleaning, removal of <g> tags, normalization, category calibration, and dataset partitioning.