Raster images (PNGs, JPEGs) are the slow, bloated relics of a previous web era. For modern web projects—loading spinners, icons, infographics, decorative elements—SVGs (Scalable Vector Graphics) are objectively superior. They scale infinitely without pixelation, they're lightweight, and they can be animated using nothing but CSS.

The problem? Writing SVG code by hand is tedious, error-prone, and deeply unintuitive. This is where Gemini 3.1 Pro excels—not as an image generator, but as a code generator.

SVGs Are Code, Not Images

This distinction matters. When you ask Midjourney or DALL-E to "generate an icon," you get a raster image—a fixed grid of pixels. When you ask Gemini 3.1 Pro to generate an SVG, it writes the actual XML, CSS, and JavaScript code that renders the graphic in a browser. The output is a text file, not a picture.

This means:

  • Infinitely scalable: Looks perfect on any screen size, from mobile to 4K.
  • Tiny file size: A complex animated SVG might be 5KB. The equivalent GIF would be 500KB.
  • Fully editable: You can change colours, sizes, and animations by editing the code—or by asking Gemini to modify it.
  • Web-native: Embed directly into HTML. No image hosting required.

How to Prompt for SVGs

The key to getting quality SVG output from Gemini is to treat it like a frontend development task, not an art request.

Good prompt:

"Write clean, self-contained SVG code for an animated loading spinner. Use a circular path with a gradient stroke. Include CSS keyframes for smooth, infinite clockwise rotation. The spinner should be 64px by default. Use viewBox for scalability."

Bad prompt:

"Make me a cool loading animation."

Specificity in dimensions, animation behaviour, colour values, and technical requirements produces dramatically better results.

The Iteration Workflow

  1. Generate the base SVG with your initial prompt.
  2. Preview it by pasting the code into your browser or an SVG viewer.
  3. Refine iteratively: "Slow the rotation to 2 seconds per cycle. Change the stroke colour to #3B82F6. Add an ease-in-out timing function."
  4. Add interactivity if needed: "Add a hover effect that pauses the animation."

Google AI Studio's Canvas feature allows you to preview the rendered SVG alongside the code in real time, making the iteration cycle extremely fast.

Practical Applications

  • UI Components: Loading spinners, progress indicators, toggle animations
  • Brand Assets: Animated logos, icon sets that respond to user interaction
  • Data Visualisation: Animated charts, infographic elements
  • Decorative Elements: Animated backgrounds, section dividers, hero illustrations

For consultants building client-facing dashboards or marketing sites via vibe coding, AI-generated SVGs eliminate the need for stock icon libraries or expensive design software. You describe what you need, refine the output, and embed the result directly into your project.