Scalable Vector Graphics (SVG) are the backbone of modern icons and illustrations: unlike raster images, they are resolution-independent, lightweight, and fully editable as code. Yet most visual assets exist only as flattened pixels, with their underlying vector source long lost. This project asks whether a model can reverse that process — taking a rendered icon together with a short natural-language caption and reconstructing its SVG source code. The task sits at the intersection of computer vision and structured-code generation: the model must perceive fine geometric detail (strokes, curves, arcs) and then express it as long, precise, syntactically-valid markup. Success would enable automatic vectorization, editable design assets, and a new bridge between visual understanding and program synthesis.
I built the training corpus from the MMSVG collection of icons and illustrations — approximately 695,000 (image, caption, SVG) triples, each pairing a 512×512 rendered PNG with its ground-truth SVG markup and a descriptive caption. Raw SVGs were cleaned and normalized for learnability: nonstandard attributes were stripped, long floating-point coordinates were rounded, malformed or non-parseable samples were filtered out, and the markup was re-tokenized to keep sequence lengths tractable. Each example was then reformatted into an instruction-following structure — an image placeholder and caption as the prompt, and the cleaned SVG as the target response — with the data split into training and a held-out validation set of ~2,000 examples. A token-length analysis of the full corpus confirmed that the cleaned SVG targets fit comfortably within the model's context budget (median ~850 tokens, 99th-percentile ~4,100), ensuring no target was silently truncated during training.
The system is built on Qwen2.5-VL-7B-Instruct, a unified vision-language model that couples a natively-trained, dynamic-resolution Vision Transformer image encoder with a dense Qwen2.5 language decoder, joined by a lightweight MLP patch-merger connector. The rendered icon is encoded into visual patch tokens, fused with the tokenized prompt and caption into a single multimodal sequence, and the decoder autoregressively generates the target as a discrete SVG token grammar — special tokens for canvas size, path commands (M/L/C/A/Z), quantized fills, and per-axis coordinate bins (<c0>…<c1023>) — which is then decoded back into SVG XML. Rather than fully fine-tuning all 7B parameters, I use LoRA (Low-Rank Adaptation) under a 4-bit QLoRA setup (rank 64, α 128) applied across the decoder's attention and feed-forward projections and the vision-tower linear layers, while the base weights stay frozen; the token-embedding and output-projection layers are additionally untied and trained in full to accommodate the ~1,040 new SVG vocabulary tokens. Training runs on a single NVIDIA H100 80GB (PSC Bridges-2) via Unsloth's memory-efficient single-GPU pipeline with gradient checkpointing and BF16 compute, optimized with 8-bit AdamW under a standard teacher-forced next-token cross-entropy objective applied only over the SVG output span (image, prompt, and caption tokens are masked from the loss). A particular engineering focus was sequence-length handling — the spaced token format doubles target length, so the context window was extended to accommodate the longest coordinate streams without truncating their terminal <EOS_SVG> — paired with decoding controls (repetition-penalty / no-repeat-n-gram, and reliance on the trained <EOS_SVG> stop token) to keep long coordinate streams from degenerating into loops.
Because the goal is faithful reconstruction rather than next-token accuracy alone, the model is evaluated on three complementary axes.
(1) Validity — the fraction of generated outputs that are well-formed, renderable SVG, measuring whether the model has learned the syntax of the format.
(2) Visual fidelity — each predicted SVG is rendered back to a raster image and compared against the ground-truth icon using perceptual similarity, quantifying how closely the reconstruction matches the original geometry.
(3) Qualitative inspection — side-by-side comparisons of input icons and predicted renders to surface characteristic failure modes (e.g., loss of fine detail or coordinate drift). Training convergence is tracked via the validation cross-entropy loss across checkpoints.