The empty-state PNG looked fine at 1x. I dropped it into a 2x hero and the edges went mushy. Brand then asked for navy instead of mustard. Figma treated the file as one locked image.

That's vector vs raster for illustrations. Not a computer-science lecture. It's whether you can still change a fill next Tuesday.

I ship product pictures in Illustro. For UI spots I open the AI SVG generator, set Style to Flat, and export SVG. For clay 3D and storybook pages I keep PNG or JPEG on purpose. The format follows the job.

What vector vs raster means for illustrations

A raster illustration is a grid of colored pixels. PNG, JPEG, GIF, TIFF, WEBP. Zoom in and you see squares. Stretch it past its size and it pixelates.

Adobe's raster vs vector comparison uses the same split. Photos and painted detail live here because the file stores every sample of color.

A vector illustration is shapes, lines, and curves stored as math. SVG is the file you put on the web. Scale it to a 24px icon or a wide hero and the edge stays a line.

MDN's SVG overview is the test I actually run. Open the file. If you see XML describing a path, you have a vector. If you see a bitmap stuffed inside a wrapper, you still have raster. The filename lied.

For illustrations, you usually need one of two things. Recolor and scale a graphic next to UI. Or keep the softness of paint, clay, and light. Pick the format that does that job. Don't pick the one that sounds more "professional."

Vector vs raster at a glance

Vector vs raster graphics is the same table. The illustration-specific row is the one teams skip. A pretty PNG of a fox is still raster. A flat fox you can recolor in Colors is a vector.

When vector is the right format for illustrations

Empty states. Feature rows. A graphic that has to sit at 24px in a nav and 1600px on a landing. I want SVG.

Figma is happier with vectors too. You get shapes, not one flattened layer. Figma's export docs cover Copy as SVG when you go the other direction.

If the pose is already right and only the yellow is wrong, a vector lets you swap the fill. That's Colors in Illustro. Free. It works when the file has SVG markup.

What a flat illustration is is the look: solid shapes, short palette, usually a cream field. Vector is the file underneath. Line art is still a vector. The read is ink, not filled shapes.

Prompt for a graphic, not a photograph. Name the subject, the pose, and two or three fills. Skip "cinematic" and "8k." That's the same rule as how to prompt for an SVG you can still recolor.

Logos are a different product. Small flat shapes can be readable. Illustro isn't a logo maker. A mark you'll print on a thousand objects still needs a designer with a pen tool.

When raster is the right format for illustrations

Clay 3D is the look of a small studio object. Matte, rounded, lit. That lighting is pixels. There's no honest SVG for it in Illustro. Download PNG if you need transparency. JPEG if a white fill is fine.

I've tried to "vectorize" a clay figurine. You get flat blobs and lose the reason you picked 3D. Read 3D characters without Blender if that's the job. Keep the raster.

Children's book art is gouache-like on purpose. Soft color is the point. Tracing it into hard paths kills the page. PNG or JPEG. Remove background costs 1 credit on children's book and 3D. It isn't offered on flat or line art.

Photos stay raster. A tracer can fake a vector logo. It won't keep photographic grain. If you only need the pose, turn the photo into a flat illustration (3 credits). That's a style conversion, then you can export SVG (1 credit). It isn't a lossless trace of the original photo.

Vector vs raster here is a style choice, not a quality ranking. Soft pictures want pixels. Hard shapes want paths.

SVG vs PNG vs JPEG

People type "PNG vs SVG" when they mean vector vs raster. Here's the actual download menu.

SVG. Real vector. Recolor a fill. Scale without mush. Export as SVG costs 1 credit on generated or converted work. Free if you uploaded your own SVG. Hidden on children's book and 3D.

PNG. Raster. Free. Keeps transparency. Fine for a still you won't recolor as paths. Illustro can rasterize an SVG to a high-res PNG in the client. Once you download that PNG, you've got pixels again.

JPEG. Raster. Free. Fills white. Useful for email, decks, and tools that choke on transparency.

SVG isn't always better. It's better when you need paths. PNG is better when the picture is already the look, and you'd only hurt it by tracing.

How I pick vector vs raster in Illustro

1. Name the job. UI and landing: flat or line art. Toy mascot: 3D Illustration. Picture book: children's book.
2. Check the mode. Illustro Light to explore (1 credit on flat or line art, 2 on 3D or children's book). Illustro MAX to ship (2 / 4). The editor defaults to Light, so look at the control before Generate.
3. Write the subject. For a vector empty state I paste something like: "Faceless person watering a hanging plant, side view, terracotta sweater, navy pants, cream background, simple geometric shapes, no facial features, no gradients."
4. Hit Generate. Check the pose.
5. Vector styles: open Colors if the palette is wrong. Edit with AI (3 credits) if you need a new prop. Colors can't draw a new object.
6. Raster styles: Edit with AI or regenerate. Remove background if you need a cutout.
7. Download PNG or JPEG free. Export as SVG (1 credit) only when the style supports it.

I run that loop in the AI SVG generator when the file has to stay a graphic. Place the SVG with the Illustro plugin in Figma, or export and drop it on the canvas.

Don't force 3D or a storybook page into SVG. You'll wait for a button that isn't there. If you're unsure, default to the vector vs raster split above: flat and line art export as SVG, 3D and children's book stay PNG or JPEG.

Frequently asked questions

Is a JPEG a raster or vector?

JPEG is a raster file. It stores a grid of pixels, usually with compression that discards some color detail. You can't recolor a path in a JPEG the way you can in an SVG. Use it for photos, clay 3D, and storybook stills that won't be scaled far past their pixel size.

Is SVG a vector or raster?

SVG is a vector format when it contains real paths. It's XML that describes shapes, not a grid of squares. Some tools wrap a PNG inside an `.svg` filename. Open the file. If you can't select a fill, you still have raster.

Is a PNG file a vector or raster?

PNG is raster. It's useful because it keeps transparency and doesn't add JPEG compression artifacts. In Illustro, PNG download is free on every style. It's the right export for 3D and children's book. It's a preview format for flat and line art if you don't need to recolor later.

Can I turn a PNG into a vector?

You can trace it. Tracing builds new shapes that approximate the pixels. It doesn't recover a drawing that was never a path. Illustro's photo-to-illustration tool turns a photo into flat art (3 credits), then SVG export is 1 credit. That's a restyle, not a perfect outline of the original PNG.

Is SVG better than PNG?

For UI illustration, yes, if you need to scale or recolor. For clay 3D and storybook art, no. Those pictures are the lighting and the softness. SVG would flatten them. Pick PNG or JPEG there, and keep SVG for flat and line art.

Is a PDF a vector?

A PDF can hold vectors, rasters, or both. A one-page PDF of a logo might be paths. A PDF of a photograph is still pixels. Don't trust the extension. Check whether you can select a shape. For web illustrations I still export SVG or PNG from Illustro, not PDF. Vector vs raster isn't the filename. It's the data inside.