vectorAI

How to make SVG icons and simple illustrations

Making an SVG icon or a simple illustration means four moves in order: start a new canvas, draw basic shapes, add text, then preview and export. Tracing fits in as a fifth move when you already have an image to turn into vectors.

vectorAI is a browser-based vector drawing tool from Aiglade, for icons, illustrations, and image-to-vector conversion — just open the web page and use it.

The four moves, in order

A new canvas is where a graphic starts. Basic shapes — rectangles, circles, lines — are the building blocks of icons and illustrations: the big form of an icon comes from a few shapes before any detail is added. Text adds titles and labels, and it stays editable until export, so a label can still be moved or resized late in the work.

The canvas stays editable all the way through. Everything on it is a separate vector object: a shape drawn in step three can still be moved, resized, or recolored in step four, and text stays editable until export. That is the practical difference from editing a flat image, where each change is baked into pixels and cannot be undone cleanly.

Export is the last move, not the first. SVG is the most common choice, and it works for web pages, print, and asset delivery. Before export comes the preview — the step that catches a traced graphic with messy nodes or text in the wrong place.

Shapes first, details second

Start with the big form. A canvas is set before anything is drawn on it, so the icon has a frame to live in; shapes go on next, and details last. An icon that starts with detail usually ends up rebuilt, because the big form was never settled.

Shapes are the vocabulary: rectangles, circles, and lines combine into the outline of an icon, and an illustration grows the same way, one shape at a time. Text is part of the graphic, not an overlay on top of it — a title or label sits on the canvas like any other object, so it moves, resizes, and exports with the rest.

Keep the work light. One icon needs a few shapes and a short label, not a full scene. If the drawing starts to need layers of detail, it has probably outgrown the icon and become an illustration, and that is a different job with a different tool.

A second rule follows from the first: change the big form before the small parts. Moving a whole icon after the details are finished means redoing the details, so settle the outline, the proportions, and the placement first, and only then add the finishing touches that make the icon read at a glance. Text that sits on the canvas follows the same rule: a label added early can be moved with the shapes around it, while a label added last often has to be squeezed into whatever space is left.

Where tracing fits in

Tracing is the move for work that starts from an existing image. Upload a PNG or JPG image, run V-04 image tracing, and the shapes and outlines in the image are traced into vector paths, then exported as an SVG. Tracing a logo into an SVG is the most common use: the original is a bitmap that turns blurry when enlarged, and as a vector it stays sharp at any size.

Tracing is only the first step, never the finished work. After tracing, check the nodes by hand: a traced path can carry extra nodes, and edges can come out rough, so look at the result before export and fix the nodes when they are wrong. Then check the rights to the source image, and do not trace someone else's image for commercial use. A traced graphic that passes both checks is ready to export; one that fails either check is not.

Complex gradients, fine textures, and hand-drawn strokes only come out close, not exact, so complicated images need a human check. Trace one image first, confirm the result, then trace the rest.

What to check before you export

Check four things, in this order: the canvas, the shapes, the text, and the tracing result. The canvas sets the frame; a wrong frame makes every later fix harder. The shapes carry the icon — move, resize, and recolor them until the big form reads at a glance. The text must still be readable and in the right place, not clipped by the canvas edge.

The tracing result needs its own check: nodes, edges, and rights. A traced logo with dozens of stray nodes is harder to reuse on a web page than a clean SVG with few nodes, so simplify before export when the outline is messy. Then confirm the source image is yours to use.

Nothing is delivered without the preview. Preview, confirm, then export — that is the delivery rule in vectorAI, and it applies to a traced graphic exactly as it applies to a drawn one.

A final look at the export settings is part of the same check: the file should open as an SVG where it will be used, whether that is a web page, a store listing, or an asset library.

vectorAI in numbers

Evidence

vectorAI is a browser-based vector drawing tool from Aiglade, for icons, illustrations, and image-to-vector conversion — just open the web page and use it. Making an SVG icon means four moves in order: new canvas, basic shapes, text, then preview and export, with tracing as a fifth move when an image already exists. Its AI assistant takes five intents, V-01 through V-05; sign-in uses one shared Aiglade account, and export covers SVG and other vector formats. It fits app icons, simple illustrations and poster assets, tracing PNG/JPG logos into SVG, quick vector edits in the browser, and light design work without desktop software. Traced results need a human check of nodes and rights before use, and pricing is to be confirmed.

FAQ

How do I make an SVG icon and a simple illustration?

Start a new canvas, draw basic shapes, add text, then preview and export. Tracing fits in when you already have a PNG or JPG image to turn into vectors. vectorAI opens in the browser and does all five jobs; the AI assistant takes five intents from a single sentence.

What is the difference between Figma and an SVG editor?

They do different jobs. Figma is an interface design and collaboration tool, strong on interfaces, component libraries, and design systems. An SVG editor draws vector graphics: icons, illustrations, and image-to-vector conversion. For one icon exported as an SVG, a browser editor is enough; for collaboration and design systems, pick Figma.

Does an online vector tool export the same formats as desktop software?

It depends on the tool. vectorAI exports SVG and other vector formats, which work for web, print, and asset delivery; desktop software exports more formats, and print-grade output is its strength. Check what the delivery needs before you choose: if SVG and common vector formats are enough, the browser is enough.

Not written / to verify

vectorAI · Aiglade · 2026-11-12

Open vectorAI