Intermediate

SVG & Data Artifacts

SVG Artifacts let Claude generate scalable vector diagrams that render visually in the Artifact panel — flowcharts, architecture diagrams, icons, and charts. Data Artifacts present structured tabular output you can copy directly into spreadsheets or databases.

SVG Diagrams

Claude can generate SVG directly — vector graphics that scale without quality loss and can be used in any tool that accepts SVG:

Flowcharts and process diagrams

"Draw an SVG flowchart of this process: [describe steps]. Use rectangles for steps, diamonds for decisions, and arrows for flow." Good for onboarding flows, approval processes, decision trees.

Architecture diagrams

"Create an SVG architecture diagram showing: [components and their relationships]." Good for system overviews, deployment topology, data flow diagrams.

Icons and simple graphics

"Draw a simple SVG icon of [description] using only basic shapes (circles, rectangles, paths). Use [hex colour] for the primary colour."

Data charts

"Create an SVG bar chart showing [data]. Include axis labels, a title, and a legend." Useful for simple static charts you want in vector format for inclusion in documents or slides.

Prompting for Good SVG Output

SVG generation quality improves significantly with clear visual specifications:

Specify dimensions: "Create a 800×600 SVG..." or "Make it square, 500×500 pixels." Without dimensions, Claude uses defaults that may not suit your use case.
Define the visual language: "Use rounded rectangles, a white background, and a colour palette of [colours]."
Describe layout explicitly: "Left-to-right flow with 3 columns." or "Circular arrangement with the central node at the center."
Specify label requirements: "Label every element clearly. Use a sans-serif font at 14px."

Iterating on SVG Diagrams

SVG Artifacts update with modification requests like any other Artifact:

"Change the arrow between Step 2 and Step 3 to a dashed line indicating it's optional."
"Add a new node ‘Audit Log’ connected to the Database node."
"Increase the font size for all labels to 16px."
"Change the colour scheme to use only greys and a single accent colour of #00827f."

For complex diagrams, iterate in multiple passes: get the structure right first, then fix labels, then adjust colours and styling.

Exporting SVG

Download as .svg: Use the download button in the Artifact panel. Produces a clean SVG file.
Use in Figma: Drag the .svg file into a Figma canvas — it imports as a vector group you can further edit.
Use in presentations: Google Slides and PowerPoint both accept SVG imports — your diagram scales cleanly at any size.
Embed in HTML: Copy the SVG source code and paste it inline into an HTML file — no image hosting needed.
Convert to PNG/JPG: Open the SVG in a browser, right-click → Save as image, or use an online SVG-to-PNG converter.

Data Artifacts

For structured data output (tables, CSV-format lists, structured extraction results), Claude can create data Artifacts that are clean and ready to copy:

"Extract all action items from this meeting transcript as a table with columns: Action, Owner, Deadline. Format as CSV."
"Compare these 5 products across criteria: Price, Features, Support, Integration. Return as a Markdown table."
"List all API endpoints from this codebase with their method, path, and description. Format as a table."

Markdown tables in data Artifacts copy correctly into tools that understand Markdown (Notion, GitHub, Confluence). For spreadsheet import, request CSV format — paste directly into Excel or Google Sheets.

Checklist: Do You Understand This?

SVG Artifacts generate scalable vector diagrams — flowcharts, architecture diagrams, icons, charts
Specify dimensions, colour palette, layout direction, and font requirements for clean diagrams
SVG exports to Figma, presentations, HTML, and PNG/JPG without quality loss
Data Artifacts present structured tables and CSV — copy to Notion/GitHub (Markdown) or Google Sheets/Excel (CSV)
Iterate on SVG in passes: structure first, then labels, then styling