Afraid of AI taking your job? Learn svg!

ChatGPT vs Gemini: Who can create better svg?

I am currently working on recreating the Google weather widget. I'm learning React, and creating a weather widget is a great project for beginners. The temperature graph that Google's weather widget has is something new, something that I couldn't find in any tutorial online and thus would have to do on my own. All in all, it's a simple project, and I can find tons of resources online if I get stuck but it also has something that I will have to work by myself.

I immediately had a problem as soon as I began creating the layout. I don't like icons Google is using in the widget. Sure, it works for google, and their expressive design, but I personally find it too gaudy. I like minimal a little too much, I admit, so I would have to search for other icons.

To create the weather widget, I am using OpenWeatherMap's API and they do provide their icons, which I prefer over Google's. They provide a png, however, and it looks really fuzzy when scaled up.

I then started looking up icons, and came across this problem; I couldn't find consistent images. I then had the bright idea - Why not just ask AI? They can code fine. They should be able to knock out svgs, too, right?

So, I asked ChatGPT and Gemini, the two AI I most frequently use. Here's the prompt I provided both of them:

I am making a weather app, and want a bunch of svgs for the various weathers. I am going to provide you the weather conditions, and I want you to provide me the corresponding svg code (one for day and one for night). Please remember all the svg should have the same design language, and should work together with one another. I have povided you with the colours I want to use, and the idea I have for how it should look.

For all the svgs, I want you to use a 100x100 svg size and use these colours:

1. Orange (For the sun, and thunderbolts): (#FF8547)

2. Black (For the Moon, Dark clouds, Rain, Snow, and Mist): (#210F04)

3. White (For the Clouds, Moon spots, and accents(when needed))

4. Gray (Accent colour (when needed)): (#626C66)



Here are the weather conditions:

1. Clear sky - Day (Sun only) , Night [Moon only]

2. Few clouds - Day (Sun behind clouds), Night (Moon behind clouds)

3. Scattered clouds - Day and night (Some clouds)

4. Broken clouds - Day and night (Light and dark clouds)

5. Shower rain - Day and night (Light and dark clouds with rain)

6. Rain - Day (Sun behind cloud and rain), Night (Moon behind cloud and rain)

7. Thunderstorms - Day and night (Dark and light cloud behind thunder)

8. Snow - Day and night (Snow)

9. Mist - Day and night (Mist)

I used Gemini 2.5 Pro and ChatGPT(Didn't show model info). ChatGPT seems to just show the output while Gemini just shows the code. I have pasted the code in codepen, and taken screenshots, then posted here for Gemini. Here's what they provided:

1. Clear Sky (Day)

Chatgpt :

Gemini :

1. Clear Sky (Night)

Chatgpt :

Gemini : Didn't Work

1. Few Clouds - Day

Chatgpt :

Gemini :

1. Few Clouds - Night

Chatgpt :

Gemini :

1. Scattered Clouds - Day & Night

Chatgpt :

Gemini :

1. Broken clouds - Day & Night

Chatgpt :

Gemini :

1. Shower Rain - Day & Night

Chatgpt :

Gemini :

1. Rain - Day

Chatgpt :

Gemini : Didn't Work

1. Rain - Night

Chatgpt :

Gemini :

1. Thunderstorms - Day & Night

Chatgpt :

Gemini :

1. Snow - Day & Night

Chatgpt :

Gemini :

1. Mist - Day & Night

Chatgpt :

Gemini :

The results I obtained surprised me somewhat. In all the coding tasks I've performed before, I have liked ChatGPT more. This time however, there is a clear winner. Except for the clear night sky and scattered clouds, the icons that Gemini provided are just plain better.