Steve Turbek

Make It Go! Designing Interactive SVGs with AI Code Help

Make It Go! Designing Interactive SVGs with AI Code Help

A short intro for designers on making interactive SVGs with AI help.

For the best experience, go to the article

This article will be presented as a Creative Mornings FieldTrip in January 2026.

Designers can create interactive, data-driven experiences—they just need a little help. This workshop shows how to combine classic design tools like Figma and Illustrator with a guided AI workflow to add animation, interactivity, and live data to SVGs. We’ll explore a new hybrid way of making rich digital experiences, no coding experience required.

“Should designers learn to code” has been discussed for decades, ever since early web design split into people who draw the UI and people who code it. In years past, designers also created complex interactive experiences using tools like Macromedia Director and Flash, which blended the line between sketching and making, designing and programming.

When Steve Jobs killed Flash on the iPhone in 2010 for being a “closed system” 🤔, complex JavaScript-driven websites took over. The web effectively became the domain of programmers with Computer Science degrees rather than English majors who learned design along with scrappy HTML skills.

The many cheesy restaurant websites made with Flash in the 2000’s have been replaced with centralized restaurant and delivery websites. I’m sure the coding standards are higher, but we also lost something local and handmade. In any case, are those websites and apps really earning a 30% cut of each meal?

Flash had many issues as a technology, but we should mourn the loss of a tool that let designers create directly, rather than write specs for others. This workshop is about reclaiming a piece of that power.

Oxygen Gauge SVG — An example data-driven interactive SVG, animated with AI in the workshop.

**Click buttons to adjust oxygen level**

TLDR

Design is all about precise communication, yet designers have struggled to communicate with computers. What if there was another way?

Designers know design tools, but coding and interaction is often a challenge
The SVG file format, known for icons, is unexpectedly, a powerful format similar to HTML.
Designers can use SVGs to include interactivity and delight in a project without breaking dev resources or code rules.
SVG is a vector format, but is written in a language like HTML
LLMs are great at manipulating language
With proper set up, a designer can upload an image and collaborate the interaction into life.
The style sheets and javascript are INSIDE the file, and sandboxed (isolated from interacting or breaking web page code).
One can ‘round trip’ between design programs and AI, made easier with the tools included here

I present a SVG AI Helper tool, used in this workshop to add interactivity to a SVG.

Note: All code on this site works solely in the browser, no data is retained. You can download these open source web pages on Github. They are designed to also work locally on your computer in Chrome.

Background

I teach the “Tangible Interfaces” Senior Design Studio in the Industrial Design program at Pratt Institute. In my class, the students designed a personal submarine design, which included working steering controls and UX instruments dashboard.

These students had no coding experience, so I wrote a “Skill” to prep the AI to focus on the right things. The results were pretty magical and led to this workshop.

This workshop is not solely about dashboard design, but demonstrating a new way for designers to use AI, and rediscovering the power in the tools we designers always had.

What is SVG and can it be cured?

(A little history note) Human language is an incredibly flexible communication tool, but that flexibility comes at the cost of precision. Sometimes the flexibility ends up in poetry, sometimes in bar fights. In any case, computers have struggled with human language until the current era of Large Language Models.

Markup Languages are a very old idea: “Mark up” data in <tags> so both computers and people could understand it.

A small example

<person>
   <name>Alice</name>
   <age>30</age>
</person>

SGML or Standard Generalized Markup Language was developed in the 70’s and used in newspapers and magazines. It inspired HTML Hyper Text Markup Language, XML, and SVG (Scalable Vector Graphics).

SVGs are an Graphic file format, like JPEG, GIF, PNG. But SVGs store the information as math, not pixels. The drawing tools in Adobe Illustrator or Figma make Vector shapes like lines, rectangles, circles, and any complex curved shape. This means that the file size is tiny, but they are Scalable up to a billboard size without becoming blurry like a bitmap.

Why does SVG matter today?

SVG is widely used on the web for icons and illustrations. BUT the SVG origin story gives it secret powers from those ancient times.

Style visual elements and animate them with CSS (Cascading Style Sheets)
JavaScript code can manipulate the file: Interactivity
JavaScript code can load data: Data Visualization

These styles and code are carried inside the SVG file.

SVGs matter because:

A designer can design using your tools (Figma, Adobe Illustrator, or the open source Inkscape) and save as SVG.
SVGs are written as a language, which AIs are excellent at interpreting.
You can collaborate with the AI to add sophisticated functionality and diagnose and fix problems.

This gives the designer additional powers

They can use javascript to call out to the web and get data, like in a dashboard.
SVGs can carry their styling and interaction code inside the file, “Sandboxed”, so it can’t break the website it is on.
It is often possible to upload a SVG to a website, even locked down corporate Content Managed Sites.
During the build phase of a project (when the developers are busy and the designer has bandwidth) to make your cool interactions.

What does SVG code look like?

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#4A90E2"/>
</svg>

which gives you

For much more info on SVGs, see the references below.

Animation in SVGs

The animation capabilities in a SVG are quite powerful. I’m not going to go deep into animation as there are so many more competent people (see references). But this one is just so conceptually cool. I’m sure you have seen the animation of someone “drawing” a shape. This “drawing” animation is only a couple of lines of code - the conceptual idea was to make this outline have a dashed line style, but the dashes are really huge. The animation slides that dash along the line, making it look like a drawing.

Interactivity in SVGs

Basically, everything you can do with a webpage: rollovers, buttons, etc can be done in a SVG. It uses the browser Javascript, almost the same as the web page.

Example 1: Color Wheel : Basic Interactivity

Interactive SVGs can be a game changer for designers wanting to add some useful tool. A designer can add interactivity without developer help by uploading a SVG image, for example in Content Management Systems. I made this handy color wheel for a design system page when we had no developers available.

GS Design System Color Wheel — Hover over any color segment to view its name, RGB values, and hex code. Click to lock the color information to copy values.

Example 2: Currency Game : Data API & Game Logic

This SVG demonstrates a simple “game” that tests a user’s ability to trade the US Dollar against the Euro. In the real world, this skill could make you millions, but this toy just demonstrates using interactive button clicks and real time financial market currency prices to keep a running score. The filesize is under 4k!

Example 3: Submarine Instruments : Webpage / SVG Communication

This project started out with a desire to empower my design students to connect physical controls to a computer game. We studied car dashboard design, and the interesting pros and cons of the screen-based driver experience. The full submarine dashboard is outside the scope of this workshop, here’s the link if you’re interested.

The drag and drop layout editor, which downloads a new instruments.css file the student uses to save the layout.

The technique we use in this interactive SVG is to communicate with the app webpage via a shared data source. This game had to work locally on a laptop; a local web server was too complex for these non-technical designers. Unfortunately for me, but fortunately for you, these browser security restrictions meant we had to be creative.

Browsers today have a neat feature called localStorage to store data locally on your computer. It’s sort of like a website cookie, but can hold much more information and is more secure. The info never leaves the browser. It also works across browser windows, which was important because the game has a pop-up display window.

The basic strategy is to create an SVG, which has a built-in timer that looks for information and loads it regularly. This is essential, because otherwise extensive code needs to be written by the developers. When the code is encapsulated in the SVG, it is prevented from interfering with the rest of the webpage so you can be reasonably confident you can’t break the rest of the website.

To make the game be able to communicate with the SVG, the game saves localStorage with names like “oxygen”, or “battery”. The SVG’s were programmed to look for the information for each of the dashboard instrument.

Here is an example chat session to show the back and forth redesigning the dashboard speed instrument.

Pre-Workshop: What is the SVG AI Helper tool?

We are not going to recreate Flash in this workshop! If you want to get deep into data visualization, you should learn the tools like D3js The gallery is awesome!

What we will do:

Design an image of a data visualization
Save as SVG
Work with AI to get it right

You will need:

Design software. Adobe Illustrator is the best for this demo.
Chrome browser and the internet
AI access. They all can work, ChatGPT allows SVG upload without paying.
15-60 minutes, more if you use social media

Best Practices This workshop is all about communication. One of the reasons AI is bad at understanding your prompts, is your human language prompts are simply not detailed enough. The big enhancement of modern AIs is they just guess what you might have meant. For most people this is fine, but designers care about the details.

When designing a system, like this class, the term ‘Composability’ kept coming up. By designing the elements to work independently, but as part of a larger system, you can better manage complexity. As a designer, you are in a sense the teacher of the AI. You want to empower the AI/student/user, but in a structured way, so they don’t get lost or overwhelmed.

As you always name your design file layers (right??), you and the AI can have a specific conversation. “Rotate item carLogo 30 degrees” is very legible to an AI.

SVG AI Helper

The SVG AI Helper is a webpage with JavaScript that helps prep your SVG to add interactivity using AI. It combines your files and my “AI SKill” instructions to guide the AI to understand the problem holistically.

You add a SVG file and text description of what you want to happen
You then paste the text into the chat window of the AI of your choice.
It may ask follow up questions if you were not explicit enough.
It should return some javascript code, which you can copy
You paste this code back into the SVG AI Helper window
You may get a working interactive SVG!
If not: note what is wrong and you want to happen and try again. See troubleshooting section below
Iterate!

Note: All code on this site works solely in the browser, no data is retained or is visible to anyone except yourself. You can download these open source web pages on Github. They are designed to also work locally on your computer in Chrome. All the AI Skill instructions text is freely accessible in the web page code.

The SVG Code Transplant tool is a webpage that copies SVG code from one SVG file to another. A typical use is if you make a working SVG, then edit in Illustrator (which deletes the code). This tool will copy it from the older working version to the new version. Assuming nothing important got changed, like layer names, it should work again.

Workshop: Chart the International Space Station’s location on a map

Let’s start with a Equirectangular World Map Thanks Sven nestle2 at Wikipedia

Equirectangular means they stretched a round globe proportionally into a rectangle. TIL! (The Mercator projection is more common, but the math would be way to complicated for this project.)

Let’s edit the image to crop and simplify the colors

Let’s add a red circle in the middle, to represent the International Space Station. Do it in your design program OR better yet just open the file in TextEdit and simply pasting this right before the </svg>

<g id="ISS">
    <circle id="circle" class="st6" cx="0" cy="0" r="5"/>
</g>

(It makes a circle, in a group named ISS.). This is in a group, so when you open it in Illustrator it shows the group. Also, you could add more to the group layer later.

Let’s use my SVG AI Helper. This workflow enables you to drop a SVG and describe what you want to happen. It combines it with special code instructions that can be pasted into a AI chat window. The AI is instructed to produce

Here’s the prompt used to animate this SVG

There's an API for the International Space Station at
http://api.open-notify.org/iss-now.json
It returns: `{"timestamp": 1764169128, "iss_position":
   {"longitude": "12.3732", "latitude": "51.2351"}, "message": "success"}`
In my SVG there is an element with ID `ISS`
I want to position it on my equirectangular map based on lat/long from the API.
It doesn't need to be pixel-perfect.
I want it to update once a second

It may not get it right at first, but iterate!

Claude got it right on the first try, but ChatGPT took a second try. Here is an example chatGPT session using workflow tool.

It made a version ISS Map - broken
I explained it wasn’t working and it diagnosed the problem.
It made a fixed version. ISS Map - fixed

Working ISS Tracker!

Current Position of ISS — The working ISS tracker

Wrap up

I hope this is demonstrated some fun and thought-provoking new tools for designers. To make the thing and not just design the thing. To use some old tools in a new way to empower designers to create richer experiences, even if they don’t have a programmer handy.

For many years, there has been a debate about whether designers should “learn to code”. Being a full programmer is a deeply skilled role, that neither a designer nor an AI will easily replace. But knowledge of the syntax of a programming language is only part of what it programmer does. It is routine in a design project that programmer will uncover the hidden cases while trying to write robust code. “where do we mail the check, if the person has no address, because they are homeless?” Far too often designers stick to the “happy path” when our job is to solve the problems our end-users have.

There is some irony in AI being created by programmers, who focus on programming problems, to develop AIs whose strongest skill is programming. But AI can be transformative for the designer, if harness properly. Any AI that is used to generate a design from scratch, necessarily means a generic design, as AI is fundamentally and averaging of the ideas of from the past.

Ultimately design is the communication of ideas, whether it is the idea about a product yet to be made, or the ideas in a product communicated to the end user. If we designers become better communicators, using our visual design tools with our new skills of working with AI coding assistants, both we and society will benefit.

Tips and Notes

These ideas are not the solution to every problem, they’re more like a sketch of a recipe.
The most important tip is to have as much patience as an AI. Ask it to explain.
Be a good communicator: your prompt to the AI should be at least a paragraph long.
Be a scientist, document each step. save versions.
If you’re trying something new start with something that works and make small changes in the direction you want.
Don’t be afraid to start over with a new prompt. You can always ask it to summarize the conversation to start a new prompt. This can be useful to understand misconceptions it may have.
Try other AIs. They each have strengths and weaknesses.

Technical tips

Organize your files. Name your layers!!
Check: If a layer is named yourElementName, Open your SVG in a text editor and search for id="yourElementName"
Some AIs have restrictions against uploading SVGs, at least on free plans. But pasting the SVG text is apparently fine.
One can use custom fonts in SVG. Google fonts, Adobe fonts, or the many paid and free fonts online. You need to tell the SVG where to find the file. See the Speed gauge code for more.

Speed Gauge SVG — An example data-driven interactive SVG using a custom font. Thanks, Anthony Robinson for this cool font!

Exporting SVGs

Adobe Illustrator Export Illustrator is the superior program for this specific workflow. It can import and edit SVGs directly.

Tips:

It does have an annoying habit of renaming element IDs and the CSS styles, so be careful!
It will delete the javascript code from the file, so use my Code Transfer Tool to copy it back.

Figma Export

Figma exports SVGs very well, but it is not a native SVG editor. You can import and export the files, but it is harder. There are plugins that help.

Make sure to enable ‘include “ID” attribute’ in the details pop up

Troubleshooting

You WILL break the SVG at times. Don’t panic! Usually it is some extra character or a missing “. Upload to an AI and give it the error message. They are VERY good at this.

Test by opening SVG directly in browser. File > Open
Sometimes you will see pinkish area with an error text. Usually it will say where the error is. Share the file and error with the AI.
Check: Open browser console (View > Developer > JavaScript Console) Look for: Red error messages
Element IDs must match layer names from Figma/Illustrator
Common error: “Cannot read property ‘setAttribute’ of null” means element ID not found

Problem: “The SVG works when opened individually, but not on a page”

The <img> HTML tag blocks javascript, use <object data="file.svg">.

Problem: “I re-exported from Figma and my code disappeared”

Figma exports a fresh SVG without your previous code

Use my Code Transplant Tool with:

Your OLD SVG (has working code)
Your NEW SVG (updated design, no code)

Problem: “Element IDs changed after re-exporting”

Figma/Illustrator sometimes generates new random IDs.

In your design tool, explicitly name your layers BEFORE exporting
Use simple names: “needle”, “indicator”, “bar”
If IDs changed, update the code:
- Old: document.getElementById('path_12345')
- New: document.getElementById('needle')

Code Quick Reference

Intro to Error Messages in the Chrome Javascript Console

Sometimes the problem is quite simple, though the language is unfamiliar. These are a couple of common issues. Ask the AI for help.

“Cannot read property ‘setAttribute’ of null”

Means: Element with that ID doesn’t exist
Fix: Check element ID spelling in code and SVG

“Uncaught SyntaxError: Unexpected token”

Means: Missing quote, bracket, or parenthesis
Fix: Check that all quotes and brackets are paired: ( ) { } ' ' ` `

“value is not defined”

Means: Variable name used before being created
Fix: Make sure const value = ... line comes before you use value

Animation Inspiration - things you can animate with simple javascript code.

These examples can help you speak precisely to request your vision from the AI.

// Rotation
element.setAttribute("transform", `rotate(${angle} centerX centerY)`);

// Translation (move position)
element.setAttribute("transform", `translate(${x} ${y})`);

// Scale (change size)
element.setAttribute("transform", `scale(${size})`);

Common Attribute Changes

// Fill color
element.setAttribute("fill", "red");
element.setAttribute("fill", `rgb(${r}, ${g}, ${b})`);

// Opacity
element.setAttribute("opacity", "0.5"); // 0=invisible, 1=solid

// Stroke color
element.setAttribute("stroke", "blue");

Console Logging (for debugging)

console.log("My value is:", value);
console.log("Calculated angle:", angle);

Then check Console in browser to see the values.

Security Note

Like all code, javascript can be used to harm people. Some websites have strict rules against SVG or disable javascript in SVG to prevent people from stealing other people’s data. Don’t be evil.