SVG
Also written: Scalable Vector Graphics, SVGs
Scalable Vector Graphics: an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
Scalable Vector Graphics, or SVG, is a way to create images using code. Instead of pixels, it uses mathematical descriptions of shapes, lines, and colors. This means you can make an SVG image as large or as small as you want, and it will always look sharp and clear, with no blurriness.
Think of it like a blueprint for a drawing. A pixel image is like a mosaic made of tiny colored tiles. If you zoom in on a mosaic, you start seeing the individual tiles. An SVG is like a set of instructions: "Draw a circle here, fill it with blue, add a red border." You can follow those instructions at any size, and the result is always smooth.
Because they are code-based, SVGs can also be interactive or animated. This makes them great for things like diagrams, logos, icons, and even simple animations that need to be displayed on websites or in applications.
Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional vector graphics. It is an open standard developed by the World Wide Web Consortium (W3C). SVG graphics can be rendered at any resolution without loss of quality, making them ideal for responsive web design and high-resolution displays. The format supports interactivity, animation, and scripting, allowing for dynamic and complex visual elements.
Unlike raster graphics (like JPEGs or PNGs) which store image data as a grid of pixels, SVGs describe shapes, paths, text, and colors using XML elements and attributes. This programmatic description allows for smaller file sizes for simple graphics and enables manipulation of individual elements via CSS or JavaScript. Tradeoffs include potential performance issues with extremely complex SVGs and limited support for photorealistic rendering compared to raster formats.
Recent AI model updates from Google Gemini and OpenAI highlight improvements in image generation capabilities, including the creation of SVGs. OpenAI's documentation also shows a focus on using SVGs for better visualization of complex AI workflows, indicating their growing importance in representing and communicating AI outputs.
- llm-gemini 0.35Google · Simon Willison ·
- Claude Sonnet 5.5Anthropic · Simon Willison ·
- OpenAI Cookbook: Replace Agents API Mermaid diagrams with SVGs (#3109)OpenAI · OpenAI Cookbook ·
- The Pelican comparison grid for Astra is pretty interestingOpenAI · Simon Willison ·
- Can Claude produce images?Anthropic · Claude Help Center ·
- Gemini 3.1 Pro: A smarter model for your most complex tasksGoogle · Google DeepMind Blog ·
- GPT-5: It Just Does StuffOpenAI · One Useful Thing (Ethan Mollick) ·
- Anthropic Claude
- Anthropic's Claude can create interactive charts and diagrams, which are often rendered as SVGs, and can analyze uploaded images.
- Google Gemini
- Google Gemini models are showing strong image generation capabilities, with mentions of improved SVG image generation.
- OpenAI ChatGPT
- OpenAI is using SVGs to replace older diagram formats in its documentation for better developer understanding and has improved SVG image generation in its models.
- Raster Image
- Raster images, like JPEGs or PNGs, are made of pixels and lose qua
- 3D Graphics
- 3D graphics involve depth and are rendered differently, often using
- Animation
- While SVGs can be animated, animation itself is a broader concept enc
SVG was developed by the World Wide Web Consortium (W3C) starting in the late 1990s as a standard for web graphics. It was designed to be an XML-based format for scalable, interactive, and animated graphics. Source ↗
You can try creating a simple SVG by opening a text editor, typing basic SVG code like '<svg><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>', and saving it as an '.svg' file. Then, open this file in a web browser to see your scalable red circle.
The Playbook: reusable how-tos, prompts, configs and tips pulled out of the news.
- PromptRole-play a student struggling with math for AI tutor simulationSimulate a student's math struggles and uncertainty for AI tutor evaluation. · 5 min
- TemplateReusable workflow templates for healthcare teamsTeams can create and share templates for common workflows like documentation or prior authorizations. · 15 min
- TemplateTemplate for building an AI tool tailored to your workA structured approach to defining and building a custom AI tool for specific business needs. · 15 min
- TemplateEvals CSV prompt list for agent skillsA CSV file template for listing prompts used in evaluating agent skills. · 20 min
- HeuristicDouble coding agent task completion with docs linksProviding coding agents with a documentation link significantly increases their task completion rate. · 2 min
Questions people ask
- Can AI generate SVG images?
- Yes, some advanced AI models are beginning to generate SVG images, offering a way to create scalable graphics programmatically.
- What's the difference between SVG and JPEG?
- SVG is a vector format defined by code, scaling perfectly, while JPEG is a raster format made of pixels, which can become blurry when enlarged.
First seen on Subvolts Aug 7, 2025. Updated Oct 14, 2026. Written by an AI model from the items above and reviewed against them weekly; report an error.