跪拜 Guibai
← All articles
Frontend · SVG · Agent

AI-Generated SVGs Are Eating Infographics, One Token at a Time

By minorcell ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

LLMs have collapsed the cost of producing structured graphics to near zero, which changes the default answer for infographics, architecture diagrams, and technical illustrations. A format that was too tedious to hand-author is now cheaper to generate and easier to iterate than a bitmap, and it slots directly into existing developer workflows—git, diff, code review, and CI.

Summary

Switching blog illustrations from AI-generated bitmaps to AI-generated SVGs cuts per-image cost from several cents to roughly $0.0004. The price gap comes from token economics: a 1024×1024 bitmap burns over a thousand expensive image tokens, while an equivalent SVG is a few hundred cheap text tokens. Beyond cost, SVG turns an image from a fixed, opaque artifact into source code that can be diffed, reviewed, edited line by line, and version-controlled alongside prose. CSS and JavaScript embedded in SVG also make dark-mode adaptation, hover effects, and animation possible without leaving the format. Algorithm visualizations can be produced by feeding state snapshots into a single SVG template and compositing frames into a GIF—no manual drawing required. The documentation world already made the parallel move from proprietary PPT formats to HTML slides; SVG is the same story for structured graphics, and LLMs are the missing cheap production method that makes the 25-year-old standard suddenly practical.

Takeaways
— Generating a 1024×1024 bitmap costs $0.03–$0.21; an equivalent SVG from a text model costs about $0.0004.
— Image tokens are priced 10× to 300× higher than text tokens, and a single 1024×1024 image from Nano Banana Pro consumes 1,120 image tokens.
— SVG is plain text, so LLMs generate and modify it with the same precision they bring to code, not the probabilistic chaos of diffusion models.
— An SVG file is simultaneously a rendered graphic and editable source code—you can change one line to move a label without re-generating the whole image.
— Vector graphics scale to any resolution without blurring and typically weigh a few KB versus several MB for a 2K bitmap.
— CSS and JS inside SVG enable dark-mode-aware inline graphics, hover highlights, and animations that a static PNG cannot match.
— Algorithm animations can be produced by describing state snapshots as data, rendering each frame through a single SVG template, and compositing into a GIF.
— GIF is the distribution format; SVG is the design source file—the same logic as exporting SVG to PNG for publishing.
— The documentation community already shifted from proprietary PPT formats to HTML slides for the same reasons: text is cheaper to generate, easier to edit, and version-control friendly.
— SVG covers nearly all structured-graphic needs for technical blogging—infographics, architecture diagrams, flowcharts, and covers—leaving only photos and realistic illustrations to bitmap models.
Conclusions

SVG's 25-year stagnation wasn't a format problem; it was a production-cost problem. LLMs remove the bottleneck that kept it niche.

The cost asymmetry between image tokens and text tokens creates a structural incentive to represent everything possible as text, pushing the boundary of what counts as 'text generation' outward into graphics.

Treating animation as a sequence of algorithm states rendered through a fixed template inverts the traditional animation workflow: consistency becomes free, and variation is data-driven rather than hand-corrected.

The parallel between HTML-for-slides and SVG-for-graphics suggests a broader pattern: whenever LLMs make a text-based format cheap to produce, that format displaces proprietary alternatives in developer workflows.

Concepts & terms
Image tokens
A billing unit for diffusion-based image generation models. A single 1024×1024 image from Nano Banana Pro is metered as 1,120 image tokens, priced 10× to 300× higher per token than text tokens.
SVG (Scalable Vector Graphics)
A W3C standard from 2001 that describes graphics using XML markup. Shapes, text, and paths are defined as elements like <circle> and <rect>, making the format both human-readable and resolution-independent.
Diffusion model
A class of generative model that creates images by iteratively denoising random noise. This process is computationally expensive and billed separately from text generation, unlike LLM text output.
SMIL animation
SVG's native declarative animation syntax. Browser support remains inconsistent, which is why exporting animated SVGs as GIFs is often preferred for cross-platform compatibility.
From the discussion
Featured comments
ayedaren

SVG drawings are ugly, because AI currently doesn't have a good way to render engineering diagrams. AI's computational ability is lacking. Simple architecture diagrams are fine, but once many nodes are involved, AI struggles to precisely calculate the positional relationships of connecting lines, text line heights, and relative positioning. Moreover, AI's color schemes are tasteless, and it won't proactively apply human designers' techniques. Let's just say AI-generated SVG still has a long way to go... Don't ask me how I know... I've been wrestling with it for a long time.

minorcell

Simple and clear information structure diagrams are sufficient. If it's very complex, you still need to rely on other tools, like Mermaid or AI image generation.

See top comments, translated →
Source: juejin.cn ↗ Google Translate ↗ Backup ↗