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.
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>
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:
Good for icons, arrows, chart glyphs, and boilerplate. Bad for anything organic.
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.
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.
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.
viewBox
exists, or it will not scale where you embed it.Full version with the comparison table and the FAQ: https://svglab.app/blog/how-to-create-svg-files-with-ai