Creating SVGs with AI

SVGs are great in general, light, vectorial... In a world of AI-generated content, they are especially practical: AI content is great, but it always has some artefacts, and it isn‘t great at maintaining consistency. If we have SVGs, we can fix those tiny defects and ensure consistent assets across our application.

AIs are extremely good at creating images, and somehow fail miserably when creating SVGs. There‘s a rumour that Fable is good at it, but who can actually verify that? The good news is you don‘t need it to create great, simple, and consistent SVG icons for your application. Here‘s how to do it:

The process to obtain SVGs is dead simple:

• Create PNGs

• Vectorize the PNGs

First Step: Raster SVGs

Instead of generating SVGs with AI, we will ask the AI to generate raster images that look like SVGs. Beyond that, there are a couple of subtle tricks at play here:

• Use Codex for this task; it’s miles ahead of Claude Code.

• It’s super important that we forbid the AI from even trying to create an SVG.

• Split the task into two agents, the judge and optimizer, and the executor. The main agent judges the quality and consistency of the images, and optimizes the prompt. This prompt is handed to a subagent that does the image creation. I believe this is in essence what “looping” is about, but with Codex it works out of the box without using /goal or /loop.

The actual prompt for my PNGs was the following (it was a one-shot):

The end goal is to generate some images for me. This will be a family of svgs that I want to have a similar style and motif, so you should do in two phases. You should optimize the prompt that you later handle to a subagent. Iterate until the result is good. You will create a clean svg-like icon style sheet. The goal is generated icons that look like polished vector SVG marks, not hand drawn chunky svg paths and not detailed AI concept art. Each svg will be represented in a consistent shared circular segment ring. Once you have this. The end goal is to have a png for each combination of animal in animals.txt and instrument in instruments.txt, for example an otter playing a violin

Second Step: Deterministically convert to SVGs

There are a lot of tools to convert a PNG to an SVG. But there is only one that works: vectorizer.ai.

As a quick experiment, I ran the same image through three different tools. The difference is abysmal. This comparison is not to bash anybody; vectorizing is a seriously complicated problem. In fact, the owner of vectorizer.ai has a PhD from Stanford on this topic.

Third Step: Profit!

As you can see, creating SVGs is just a matter of using the right tools for the job. You can check all the animal and instrument combinations here!