Today, we’re embarking on an exciting journey into the realm of Scalable Vector Graphics (SVGs) and exploring how we can use our friendly AI friend, ChatGPT, to generate some vector art.

What are SVGs?

SVGs, for the uninitiated, are a nifty file format for displaying vector-based graphics on the web. Unlike their raster counterparts, SVGs maintain their crispness and clarity regardless of size. That means whether you’re viewing them on a tiny mobile screen or a ginormous high-resolution display, SVGs will keep their charm intact.

The Nerdy Stuff

Unlike raster images like PNG or JPEG, which are made up of a grid of pixels, SVGs are defined using mathematical equations that describe shapes, lines, curves, and colors. This mathematical representation allows SVGs to be scaled and resized without losing any quality or clarity.

SVG files are written in XML (eXtensible Markup Language), a markup language used for structuring and describing data. This XML structure defines the elements, attributes, and properties of the SVG graphic. Being XML-based makes SVGs human-readable and editable using a text editor.

You can manipulate the SVG elements using CSS or JavaScript to add interactivity and make your artwork even more engaging.

ChatGPT and SVGs

Since SVGs are basically XML under-the-hood, Once you’ve laid out your artistic vision, ChatGPT can generate the SVG code for you.

First things first, initiate a conversation with ChatGPT and tell it to output SVG code. You can use the following prompt.

You will now act as a SVG image generator. I will describe you the object and you will give me the SVG code for it. Make sure that the code that you give me represents the object I described in realistic and detailed manner using complex shapes.

Of course, you can come up with your own custom prompts.

The next step is to describe the image or icon you have in mind. For example,

a beautiful lake view

And this is the output it gave me

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400">

  <!-- Sky -->
  <rect x="0" y="0" width="800" height="200" fill="#87CEEB"/>
  
  <!-- Mountains -->
  <path fill="#808080" d="M0 200 L200 100 L400 200Z"/>
  <path fill="#A9A9A9" d="M200 200 L400 100 L600 200Z"/>
  <path fill="#808080" d="M400 200 L600 100 L800 200Z"/>
  
  <!-- Lake -->
  <path fill="#00BFFF" d="M0 200 Q100 250 200 200 Q300 150 400 200 Q500 250 600 200 Q700 150 800 200 L800 400 L0 400 Z"/>
  
  <!-- Sun -->
  <circle cx="700" cy="100" r="50" fill="#FFD700"/>
  
  <!-- Trees -->
  <g fill="#008000">
    <path d="M100 200 Q80 100 120 200 Q100 150 140 200 Q120 170 160 200 Q140 180 180 200 Z"/>
    <path d="M200 200 Q180 120 220 200 Q200 160 240 200 Q220 180 260 200 Q240 180 280 200 Z"/>
    <path d="M300 200 Q280 100 320 200 Q300 150 340 200 Q320 170 360 200 Q340 180 380 200 Z"/>
    <path d="M400 200 Q380 120 420 200 Q400 160 440 200 Q420 180 460 200 Q440 180 480 200 Z"/>
    <path d="M500 200 Q480 100 520 200 Q500 150 540 200 Q520 170 560 200 Q540 180 580 200 Z"/>
    <path d="M600 200 Q580 120 620 200 Q600 160 640 200 Q620 180 660 200 Q640 180 680 200 Z"/>
    <path d="M700 200 Q680 120 720 200 Q700 160 740 200 Q720 180 760 200 Q740 180 780 200 Z"/>
  </g>
  
  <!-- Birds -->
  <g fill="#000000">
    <path d="M500 100 q20 -30 40 0" stroke="#000000" stroke-width="2" fill="none"/>
    <path d="M520 70 q20 -30 40 0" stroke="#000000" stroke-width="2" fill="none"/>
    <path d="M550 90 q20 -30 40 0" stroke="#000000" stroke-width="2" fill="none"/>
  </g>
  
</svg>

Copy this and save into a file that ends with the .svg extension and open the file in a browser.

This isn’t great but its not too bad for a purely language model. It demonstrates the tiny artistic vision it has.

You might have to do a few iterations telling GPT what to change and what to improve, or you might just end up with something like this hideous ‘Pikachu’.