How to Generate SVGs with ChatGPT

March 31, 2023

Tory Barber

cyberpunk artist painting in 3D

Can ChatGPT Generate SVGs?

Let’s cut right to the chase, can GPT even generate SVGs?

Answer: yes… kind of?

 

GPT4 can generate very simple icons made out of basic shapes but struggles with anything not easily built with circles and squares.

ChatGPT, GPT4’s predecessor (and the most widely available version of the AI), can generate the code, but the visual results are rough.

Example 01

Compare GPT4’s simple house icon to ChatGPT’s attempt at the same thing below. Both AI’s were given the following prompt:

Write the html for an SVG house icon.

ChatGPT

GPT4

SVG House Icon

As you can see GPT4 does a pretty good job executing the prompt, but ChatGPT… struggles.

ChatGPT looks to have generated a house for Picasso! The proportions are peculiar, things are where they should be, and that’s saying nothing about the weird random black circle in the bottom left corner.

GPT created quite the standard house icon. The only peculiar thing about it was the addition of a window above the door, but I appreciate the creativity that shows. The AI even knew enough to keep all the shapes the same color as most icons are. Very impressive.

Example 02

Let’s see how the AIs hold up when we ask them to make something more complicated. Both AI’s were given the following prompt:

Write the html for an SVG shaped like a dog.

ChatGPT

GPT4

SVG Dog

I’m honestly impressed with both of these results. Both GPTs clearly understood the request, both vectors are clear attempts at creating dogs.

You see now where the AIs fall short. 

Now that we are asking ChatGPT for more than squares and triangles, both versions struggle to produce a professional looking illustration.

How to Create SVGs with GPT4?

Just ask it too!

Like everything with GPT, simply write a prompt asking the AI to create what you want.

You might get a little pushback from ChatGPT saying that it is an AI language model, not an image generator, but as long as you ask it to generate the SVG code (not just an image) in the end it will attempt to generate what you ask for.

I found the following prompt to work well for me:

Write the html for an svg shaped like a [insert subject]

Of course, you can always use GPT to generate your prompt for GPT. Here’s a great example of how to use this technique.

Conclusion

In all honesty, using ChatGPT to create SVGs is a bit of a gimmick at the moment. The AI can’t generate anything all that complicated, and there are way faster methods to create simple SVG icons; you aren’t saving time using GPT.

However, that may change, and quickly.

You only need to look at the difference between ChatGPT and GPT4’s attempts at a house icon to see how far the AI model improved between the two latest versions, and GPT4 isn’t even fully released yet!

Stay tuned, I’ll update this article as this functionality develops.

 

 

Interested in more ways to use ChatGPT for graphic design? Check out my buddy’s post on the Top 5 Ways to Use ChatGPT for Graphic Design.

Tory Barber Headshot Thumbnail

About Me

Hi I’m Tory!I’m a Graphic Designer, Web Developer, and AI OBSESSED artist from good ol’ Canada, eh!I record all the things I learn as I dive deeper into the Generative AI rabbit hole so I can teach people like you!

Follow Me

Prompt Inspo In Your Inbox!

Latest Articles

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.

Latest Posts

How to Make Stock Quality Photos in Midjourney

How to Make Stock Quality Photos in Midjourney

Why Use AI to Generate Photos for Your Project Create More Inclusive Photographs A lack of diversity is a well known fault of stock photography. Certain demographics such as the South Asian population, or anyone above the age of 40 are notoriously difficult to find....

Firefly 3 – a HUGE Update

Firefly 3 – a HUGE Update

Experience the breakthrough! Firefly 3 delivers vastly improved image quality, lets you generate graphics within Photoshop, adds stylized text to designs, and includes a revolutionary object-removal tool.