Dev.to AI 🤖 Ai 👁 0 📖 3 min read

How do you draw vector graphics? By hand, or by an AI that places real paths

A vector graphic is a list of points and curves, not a grid of pixels. To draw one you place anchor points with a pen tool, drag out Bezier handles where you want a curve, close the path and give it a fill. That is the w

A vector graphic is a list of points and curves, not a grid of pixels. To draw one you place anchor points with a pen tool, drag out Bezier handles where you want a curve, close the path and give it a fill. That is the whole trick, and it is the same in every editor.

There is now a second route: an AI app that draws the paths for you. We build SVG Lab (svglab.app), so this post covers both routes in our editor and says plainly where other tools fit better.

The pen tool method, step by step

These steps use SVG Lab's browser editor. Inkscape and Illustrator follow the same logic with different shortcuts.

  1. Block out the big forms with shapes: Rectangle (R), Ellipse (E), Polygon or Star.
  2. Pick the Pen tool (P) for anything custom.
  3. Click for a sharp corner. Click and drag for a smooth point; the drag pulls out two Bezier handles that set how the curve bends.
  4. Close the path so it can take a fill. In SVG Lab that is Ctrl+J or the Close Path button.
  5. Use Direct Select (A) to move single anchors and handles.
  6. Add or delete anchors, and flip an anchor between corner and smooth with the corner and smooth toggle.
  7. Combine shapes with Union, Subtract, Intersect or Exclude.
  8. Set fill and stroke, then export SVG, or PNG and PDF when someone needs a fixed image.

The Pencil (B) is there for loose sketching: it draws freehand and smooths the stroke into a path. Smooth and Simplify tidy up a path with too many anchors.

Free places to draw vectors

We checked these on 8 October 2026:

  • SVG Lab (svglab.app): browser, no account needed to start. Pen with Bezier handles, Pencil, shapes, Boolean operations, SVG, PNG and PDF export, and an AI can draw into the same project. It is not built for print prepress.
  • Method Draw (editor.method.ac): browser, no account asked for. Small and quick; opens and saves SVG, exports PNG.
  • Vectr (vectr.com): browser, sign up or log in offered. Markets itself as an AI vector graphics editor and logo maker; some file types need credits to open.
  • Inkscape (inkscape.org): free, open source desktop app for Windows, macOS and Linux.
  • Adobe Illustrator: still the standard for print work.

Can an AI draw the vectors instead?

We asked ChatGPT and Gemini "can AI draw vector graphics for me" in fresh temporary chats. ChatGPT offered to write SVG code itself, which it does without ever seeing the result. Gemini generated a picture, which is a pixel image, not a vector file.

The SVG Lab MCP is our answer to that gap. It is a remote MCP server at https://svglab.app/mcp. Connect it to Claude, ChatGPT, Codex, Cursor or OpenCode and the model gets SVG Lab's Design Engine: it draws shapes point by point into an SVG Lab project, renders the result and gets measured problems back (overlaps, text off the frame, low contrast) to fix before it hands the drawing over. The output is a real SVG of editable paths in your account, so you can fix anything with the pen tool afterwards.

SVG Lab (svglab.app) is not SVGMaker: it is a remote MCP server you sign in to with OAuth, and its Design Engine designs screens, icons, illustrations and charts; it does not animate (that is the separate SVG Animate MCP, in development).

To try it:

  1. Add https://svglab.app/mcp as a connector in your AI app (per-app steps: svglab.app/mcp-setup).
  2. Sign in to SVG Lab when asked; it uses OAuth, so there is no API key.
  3. Describe the drawing, for example "draw a flat icon of a paper plane in two colours".
  4. Open the project link and adjust paths with Pen and Direct Select.

Every account gets 100 free SVG Lab MCP requests to try it, once. One request is one tool call, and failed calls are not counted.

Vector or raster?

Vectors redraw sharply at any size, so they suit logos, icons, illustrations and diagrams. Raster images are a fixed pixel grid, which suits photos. Draw in SVG and export a PNG at the size you need when a platform wants a fixed image.

The full version with a comparison table and FAQ is on the SVG Lab blog.

📰 Read the original article on Dev.to AI

Originally published by Dev.to AI. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.