DEV Community

Usman Bashir
Usman Bashir

Posted on Originally published at svglab.app

AI can write SVG. Only one route gives you paths you can edit.

#svg #ai #webdev #design

Ask an AI for an SVG and you can get three completely different things back: a code block, a PNG, or actual vector paths. They are not interchangeable, and the difference shows up at the worst moment, usually when something needs to scale.

Here is each route, what it outputs, and the failure mode that comes with it.

Route 1: a chatbot writes the markup

SVG is text, so ChatGPT, Claude, and Gemini can all write it. You get XML in a code block, you save it with a .svg extension, and it opens in any browser.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
  <path d="M12 5v14M5 12h14"/>
</svg>
Enter fullscreen mode Exit fullscreen mode

That plus icon is four numbers and it lands every time. Now ask for a bird. The model is writing bezier control points without ever seeing where they land, so the wing crosses the body, and you start the loop where you paste the render back and say "move it slightly left" ten times. Each fix is another blind guess.

What makes route 1 usable:

  1. Prompt with constraints, not adjectives: canvas size, stroke width, flat colors, "no gradients, no text".
  2. Save the code block, or paste the markup straight into an editor.
  3. Open it somewhere it renders, so you see the overlap in one second instead of arguing about it.
  4. Fix it by dragging the point, not by describing the point.

Good for icons, arrows, chart glyphs, and boilerplate. Bad for anything organic.

Route 2: generate a raster, then trace it

Midjourney, DALL-E, and Stable Diffusion output pixels. To get vectors out of a PNG you auto-trace it: the tracer follows color boundaries and draws outlines along them.

  • Ask the image model for flat colors, hard edges, plain background. Shading and gradients are what wreck a trace.
  • Trace it. In SVG Lab (svglab.app) you drop the image on the artboard, select it, and click Auto-trace. The free plan includes 12 auto-traces a month, Pro 50 a week, Studio 250 a week.
  • Clean up: delete stray paths, simplify, flatten the palette.

The trap: a trace of a shaded illustration is technically vector and practically unusable, because it is hundreds of stacked paths no human will edit. Judge the trace by whether you can move a shape in it. Also worth knowing before you upload client work: SVG Lab's auto-trace sends the image to a tracing service, it does not run in your tab.

Route 3: generate the vector directly

The third route skips the raster entirely. SVG Lab AI Generate takes a prompt or an uploaded PNG, JPG, WebP, or GIF and returns real paths, placed centered on the artboard and selected, with a preview before anything is committed.

The reason this matters for a developer workflow is not the generation, it is where the correction happens. Route 1 corrects in a chat window. Route 3 corrects in an editor with anchor points, so a wrong curve is a drag rather than a paragraph.

SVG Lab exports gradients, masks, and filters without flattening them, and text on a curved path exports as a real textPath, so the file survives being reopened in Illustrator, Figma, or Inkscape.

Cost, plainly: the free plan includes one AI generation as a locked preview you can unlock for $3 for that design; Pro is $3.99 a month for 10 a month; Studio is $11.99 a month for 40.

Which route wins what

  • Editable vector from a prompt: SVG Lab. Real paths on the artboard, preview first, corrections in the editor.
  • A geometric icon you can describe exactly: a chatbot. Free, and it lands on the first try.
  • Painterly or photographic art: an image generator. Trace it only if you truly need vectors.
  • Print prepress and heavy illustration: Illustrator or Inkscape. No AI route replaces them yet.

Preflight before you commit the file

  • Render it large. Blind errors hide at 24px.
  • Check the file size. A 40 KB icon is a traced mess.
  • Confirm a viewBox exists, or it will not scale where you embed it.
  • Convert live text to paths unless the font is guaranteed.
  • Diff the hex values. AI output is full of near-duplicate colors that read as one.

Full version with the comparison table and the FAQ: https://svglab.app/blog/how-to-create-svg-files-with-ai

Top comments (0)