Screenshot 2023-08-07 at 08.37.24.png

Vector-based imagery is the quiet workhorse of the digital art world. While raster-based photography and illustrations grab all the headlines, vector art — clean, scalable, performative — is found everywhere. It’s in your logos, in your icons, even in your language-learning app (remind me to tell you how bad my Turkish is btw).

And while some of the newer AI vector art generators show some promise, I’ve recently discovered that trusty ol’ ChatGPT is actually great at making REALLY BAD SVG ART. And all you have to do is ask!

Please return SVG code depicting a man.

Then ChatGPT returns something like this:

<svg xmlns="<http://www.w3.org/2000/svg>" width="100" height="200" viewBox="0 0 100 200">
  <!-- Head -->
  <circle cx="50" cy="40" r="20" fill="black" />

  <!-- Body -->
  <line x1="50" y1="60" x2="50" y2="120" stroke="black" />

  <!-- Arms -->
  <line x1="50" y1="70" x2="30" y2="90" stroke="black" />
  <line x1="50" y1="70" x2="70" y2="90" stroke="black" />

  <!-- Legs -->
  <line x1="50" y1="120" x2="30" y2="160" stroke="black" />
  <line x1="50" y1="120" x2="70" y2="160" stroke="black" />
</svg>

Which you can then just copy and paste into an HTML file using an online sandbox like CodeSandbox or Stackblitz and end up with something like THIS:

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c11nsjf4x8lw6mjwxrt3.png

Not much of anything yet, but you can iterate with ChatGPT. Let’s start with a background:

Please add a blue background,
and make the SVG have a 3:2 aspect ratio.
Also make the man's limbs thicker.

…which returns code depicting this:

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q86zx682m7kt5if4y2y9.png

Still looks like a 3-year old drawing on MS Paint. Let’s get more detailed:

Now give the man joints -- elbows and knees.
Also turn the background into a cityscape at night.

We get this:

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5o3lq6wog4gdurz9xa56.png

…and now it’s getting weird. But it can get even weirder!

Please make the background a lighter blue-grey.
Make the man standing in a superhero pose.
Also give him yellow slits for eyes,
a tan jaw and black mouth.
Also put a yellow horizontal ellipse on his chest.
Also give him two black triangles on top of his head.
And add some clouds and stars to the sky.

Which returns this:

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4w1y1o60gffr8ch57wz.png