SVG
SVG (Scalable Vector Graphics) is an XML-based open standard language for describing two-dimensional graphics, defined by the W3C. It represents graphics through mathematical paths, shapes, and color attributes, supporting infinite scaling without loss of quality. SVG is suited for icons, illustrations, animations, and interactive graphics. SVG files can be rendered directly by browsers and manipulated programmatically, making them widely used in web design and data visualization.
Core Facts
The SVG format is essentially an XML text file that records path instructions rather than pixel data.
When large models generate dynamic videos, they are more likely generating code that describes the animation (such as Canvas, SVG, CSS animations, or animation frameworks) rather than directly rendering pixel-level video.
Simon Willison uses SVG generation of "a pelican riding a bicycle" as an informal benchmark test of model capabilities.
Timeline (last 90 days)
Inlining is the way to solve external resource dependencies: fonts can be embedded into CSS via @font-face with Base64-encoded woff2 data, images can be converted to Base64 data: URIs and written directly into src, and icons can be switched to inline SVG; the cost is larger file size and reduced readability.
In the test, after completing the drawing, the AI Agent exported the results in SVG and PDF formats.
PNG rasterizes text into pixels at render time, so the font only needs to exist on the rendering server; SVG keeps text as text, so the font must exist on every device that displays it.
For charts that need to be shared widely, PNG's "font self-containment" reduces cross-platform risk; SVG, though more flexible, must clearly inform users of the existence of font dependencies.
The developer in the article's case changed the default output for new users to PNG and made SVG an opt-in feature, while adding a warning to the documentation.
The SVG specification allows styles to be defined in three ways: inline style attributes, CSS embedded in a <style> element, and external CSS imported via <link> or @import.
If the target environment imposes restrictions on external styles for SVG (for example, some email clients or image-embedding scenarios), the theming capability may not be able to fully work.
Pele's difference lies in post-processing the generated SVG, removing inline styles and replacing them with CSS classes or variables, transferring style control to the user.
When SVG is referenced as a standalone image via the <img> tag, external CSS does not take effect; external styles only apply when the SVG is inlined into the HTML document or embedded via <object>/<iframe>.
In the podcast's Gemini model evaluation, using the same "Hamlet soliloquy" SVG generation prompt for comparison, the Gemini version generated a complete stage with a sidebar, emotional beat annotations and background sound effects, and provided slider adjustment panels for facial expressions and gestures.
40 more timeline events
All Facts (20)
The SVG format is essentially an XML text file that records path instructions rather than pixel data.
70%VerifiedWhen large models generate dynamic videos, they are more likely generating code that describes the animation (such as Canvas, SVG, CSS animations, or animation frameworks) rather than directly rendering pixel-level video.
65%VerifiedSimon Willison uses SVG generation of "a pelican riding a bicycle" as an informal benchmark test of model capabilities.
65%VerifiedHTML output allows AI to embed SVG charts, interactive components, in-page navigation, color coding, and inline annotations—features that Markdown cannot achieve.
65%Unverified如果背景图是一个没有设置宽高的SVG，使用background-size: auto时，SVG会自动填充整个背景区域
80%UnverifiedSVG is an XML-based vector graphics format, with its standard established by the W3C in 1999.
60%UnverifiedThe model is capable of synthesizing SVG vector visual elements on the fly rather than downloading assets from the internet.
60%UnverifiedSVG animations are typically implemented through CSS animations, SMIL, or animation libraries such as GreenSock (GSAP), capable of achieving smooth 60fps effects with file sizes far smaller than GIFs or videos of equivalent quality.
60%UnverifiedThe workflow in which a language model interprets literature to generate drawing prompts and an image model renders the output is a type of AI agent workflow that chains multiple specialized models through tool calls.
60%UnverifiedInlining is the way to solve external resource dependencies: fonts can be embedded into CSS via @font-face with Base64-encoded woff2 data, images can be converted to Base64 data: URIs and written directly into src, and icons can be switched to inline SVG; the cost is larger file size and reduced readability.
50%UnverifiedIn the test, after completing the drawing, the AI Agent exported the results in SVG and PDF formats.
50%UnverifiedThe developer in the article's case changed the default output for new users to PNG and made SVG an opt-in feature, while adding a warning to the documentation.
50%UnverifiedFor charts that need to be shared widely, PNG's "font self-containment" reduces cross-platform risk; SVG, though more flexible, must clearly inform users of the existence of font dependencies.
50%UnverifiedPNG rasterizes text into pixels at render time, so the font only needs to exist on the rendering server; SVG keeps text as text, so the font must exist on every device that displays it.
50%UnverifiedPele's difference lies in post-processing the generated SVG, removing inline styles and replacing them with CSS classes or variables, transferring style control to the user.
50%UnverifiedWhen SVG is referenced as a standalone image via the <img> tag, external CSS does not take effect; external styles only apply when the SVG is inlined into the HTML document or embedded via <object>/<iframe>.
50%UnverifiedIf the target environment imposes restrictions on external styles for SVG (for example, some email clients or image-embedding scenarios), the theming capability may not be able to fully work.
50%UnverifiedThe SVG specification allows styles to be defined in three ways: inline style attributes, CSS embedded in a <style> element, and external CSS imported via <link> or @import.
50%UnverifiedThe thumbnail tool supports AI-generated SVG assets, and after generation the style can continue to be iterated with prompts (for example, changing from childish to material design/tech style).
50%UnverifiedConverting strokes to outlines (expand strokes) before export ensures rendering results are consistent on any platform; file size on average grows from about 40KB to about 90KB.
50%