SVG AI Collaboration Workflow
Transform your SVG into an interactive, data-driven visualization using AI,
using this workshop
I've built this tool to be helpful, but can't promise it will always work perfectly. Use your own judgment when relying on results.
Step 1: Upload Your SVG
Upload your SVG file exported from Figma, Illustrator, or any design tool. No code template needed!
Step 2: Describe What You Want
Tell the AI what you want to happen. Be specific! Use the tips on the right to help structure your description.
How to Describe Your Goal
- What data source? API, localStorage, hardcoded values
- Which element(s) to animate? Provide the element ID from your SVG
- What should happen? Rotate, move, change color, etc.
- Range of values? 0-100, -180 to +180, etc.
Finding Element IDs
- Name layers in Figma/Illustrator before export!
- The layer name will become the
ID you want to manipulate
- Open your SVG in a text editor
- Search for the layer name
Common Animation Patterns
- Rotation: Needles, dials, gauges
rotate(angle x y)
- Translation: Sliders, bars, indicators
translate(x y)
- Color: Heat maps, status indicators
fill="rgb(r, g, b)"
Tips
- Really big files can confuse an AI.
- You can export a version of the SVG after deleting (not just hiding) the background, then merge back together.
- Save images as "link" not include
Step 3: Copy Prompt to AI
Your complete prompt is ready! Copy it and paste into your AI assistant.
Step 4: Choose Your AI Assistant
What to do:
- Click one of the AI services below to open in a new tab
- Paste your copied prompt into the AI chat
- The AI will generate JavaScript code for you
- Copy the code the AI gives you
- Come back here and click "I Got Code from AI" below
Step 5: Paste the Code from AI
Paste the JavaScript code that the AI generated. We'll validate it before adding to your SVG.
Step 6: Download Your Interactive SVG!
Success! Your interactive SVG is ready. Download it and open in any browser to see it in action.