I built a prompt to SVG workflow because AI images were hard to ship

A small problem kept showing up in my own product work.

I would need a visual asset for a page: a logo direction, an empty state, a small icon set, a docs illustration, maybe a little graphic for a launch page.

AI image tools were fast at making something that looked good in a preview. But once I wanted to use the output in an actual frontend, the workflow became annoying.

A bitmap is easy to look at. It is not always easy to ship.

why SVG still matters

For product UI, SVG has boring advantages that matter a lot:

• It scales without getting blurry.
• It can be inspected.
• It can be edited by hand.
• It can live directly in a codebase.
• It works well for icons, diagrams, marks, patterns, and lightweight illustrations.

That is why SVG keeps showing up in frontend work. Not because it is new. Because it fits the job.

If you are building a product page, a docs site, or a small SaaS interface, you usually do not need a huge generated image. You need a clean graphic that sits well inside a layout and does not become a problem later.

the bitmap problem

Most AI image generation workflows end at a preview image.

That is fine if the goal is inspiration. It is less useful if the goal is implementation.

A generated PNG might look nice, but if I want to change one shape, remove a background, adjust a stroke, recolor a mark, or place it into a React component, I am back to editing by hand or tracing the image.

That felt backwards.

The prompt was already describing the object. The final asset should be closer to something a frontend can actually use.

what I wanted instead

I wanted a workflow that starts with a prompt but ends with SVG.

Something like this:

Create a simple SVG illustration of a search dashboard empty state.
Use clean geometric shapes, 2 colors, no text, transparent background.
It should fit inside a SaaS onboarding page.

That prompt contains more useful constraints than "make a nice illustration."

The important details are:

• what the object is
• where it will be used
• how complex it should be
• whether text is allowed
• whether the background should be transparent
• what kind of visual density fits the UI

Those constraints are boring, but they make the result easier to use.

building around the output format

This is the part I think people underestimate.

When the output format is SVG, the product has to think differently from a normal image generator.

You care about different things:

• Are the shapes readable at small sizes?
• Is the SVG too complex?
• Does it include random text?
• Can the asset sit on a real page?
• Can the result be copied, downloaded, and edited?

A pretty preview is not enough. The SVG has to be usable after the first generation.

That changed how I thought about the product. The goal was not "generate art." The goal was "generate a starting point for a product asset."

the tool I built

I built GlyPho as an AI SVG generator for this workflow:

https://www.glypho.app/

The basic idea is simple. You describe the asset you need, and GlyPho tries to return an editable SVG direction for things like logos, icons, illustrations, patterns, and product graphics.

I am not trying to replace a designer. That would be the wrong framing.

The use case I care about is earlier and smaller: when a builder needs a usable visual direction before spending more time on design, or when a product page has several tiny visual gaps that slow everything down.

a better prompt pattern

The prompts that work best are not the most poetic ones.

This is usually better:

Create a minimal SVG icon for an AI writing feature.
Use a pen nib and small sparkle shape.
No text. Transparent background.
Use a single stroke style so it works in a product sidebar.

Than this:

Create a beautiful futuristic icon for an amazing AI product.

The second prompt sounds more exciting, but it gives the model less to work with.

For SVG assets, I have found that practical constraints matter more than mood words. Size, use case, visual density, color count, text rules, and background rules all help.

where this is useful

So far, the use cases that make the most sense are:

• landing page graphics
• feature icons
• empty states
• docs illustrations
• simple logo exploration
• launch visuals
• pattern and badge ideas

It is not the right tool for every kind of image. If you need photorealism, SVG is the wrong direction. If you need a highly polished brand system, you still need design judgment.

But for lightweight product visuals, SVG is a good target. It keeps the asset closer to the code and easier to adjust.

a small community experiment

I am also testing a simple community loop inside GlyPho. If people publish useful SVGs publicly, those examples can help the next person understand what a good SVG prompt looks like.

what I am still figuring out

The hard part is not only generation quality.

It is also deciding what "usable" means.

A technically valid SVG can still be bad. It can have too many paths. It can include strange text. It can look fine at 1024px and fall apart at 32px. It can be too detailed for the place it is supposed to live.

So the next part of the work is improving the feedback loop around the SVG itself: cleaner structure, better constraints, easier editing, and better defaults for real product surfaces.

That is the part I find interesting.

AI image generation made it easier to get a picture. I want to make it easier to get an asset you can actually put into a product.