Vector graphics for beginners: how it works and where to start

Step 1

Understand vector vs raster

A raster image, such as a photo or a Photoshop painting, is made of a fixed number of pixels. Enlarge it beyond its resolution and you see blur and jagged edges. A vector image describes shapes mathematically: "a point here, a curve to a point there, a fill of this color". The app redraws it at any size, so, as Inkscape puts it, vector gives sharp printouts and renderings at any resolution.

• •vector is used for logos, icons, flat illustrations, infographics, type and diagrams;
• •raster is for photos, digital painting, textures and retouching;
• •raster can be turned into vector by tracing, but the result nearly always needs manual cleanup;
• •vector to raster is easy: any vector app exports a PNG at the size you need.

💡 Quick test: zoom in 10 times. If the edges stay perfectly sharp, it's vector. If pixels appear, it's raster.

Step 2

Learn the anatomy of a path

Every vector shape is a path. It's made of nodes (anchor points) and segments between them, straight or curved. Curves in vector apps are Bézier curves: each segment's shape is set by handles coming out of the nodes. A path can be open (a line) or closed (a shape). A path has a fill, the color inside, and a stroke, a line along the edge with a set width.

• •open any simple SVG file in a text editor: you'll see a `<path>` element with a `d` attribute;
• •`d` is a list of commands: M moves the point, L draws a straight line, C a cubic Bézier curve, Q a quadratic one, Z closes the path;
• •an uppercase letter means absolute coordinates, lowercase means relative;
• •a cubic curve has two control points per segment: those are what you drag when you move handles in an app.

💡 You don't have to write SVG by hand, but looking at the code once helps: you'll see why an extra node is an extra command, not "just a point".

Step 3

Build shapes from simple ones

Beginners often grab the Pen and draw a complex shape point by point. It's simpler and cleaner to assemble it from circles, rectangles and polygons with boolean operations. Figma has four: Union, Subtract, Intersect (keep the overlap) and Exclude (keep everything except the overlap). Inkscape has boolean operations and a Shape Builder tool.

• •a cloud: several circles and a rectangle merged into one shape;
• •a crescent: a circle minus an offset circle;
• •a drop: a circle and a rotated square merged together;
• •practice brief: a set of 6 weather icons (sun, cloud, rain, snow, lightning, moon) made only from simple shapes and boolean operations.

💡 Keep the same stroke width and the same corner radii across the whole set: that's what makes icons a family rather than a random collection.

Step 4

Learn the Pen: fewer nodes, better curves

The Pen tool is for shapes you can't build from primitives: a leaf, a wave, a letter. A click places a corner node; a click and drag places a node with handles for a curve. The principle behind clean vector work: as few nodes as possible. A smooth curve with three nodes looks better than a twenty-node saw.

• •place nodes at a curve's extremes: where it's highest, lowest, leftmost or rightmost;
• •drag handles horizontally or vertically so the curves come out even; a modifier key constrains the angle (Shift in Illustrator);
• •exercise: trace a photo of a leaf or a large letter with the Pen, then try to halve the number of nodes without losing the shape;
• •for a logo, convert strokes to paths (stroke to path) before handing off the file: then the line scales with the shape and no longer depends on stroke settings.

Step 5

Choose a format and a free app

The format depends on where the file is going. SVG is an open vector format for the web: browsers show it at any size, and the `viewBox` attribute sets the drawing's coordinate system. PDF is handy for print and handoff, since almost anyone can open it. EPS is an older exchange format some print shops still ask for. AI is Adobe Illustrator's working format. For social media and presentations, export a PNG from the vector at the size you need.

• •Inkscape: a free, open-source vector editor for Windows, macOS and Linux; its main format is SVG, and it also imports and exports AI, EPS, PDF and PNG;
• •Figma: has a free Starter plan; handy for icons and interfaces, with Copy as SVG and an Export section;
• •Illustrator: the industry standard, by subscription; see Illustrator for beginners;
• •whatever you choose, the principles from steps 2–4 are the same everywhere.

💡 Show your icon set in the community and ask specifically: are the line widths consistent, do the icons read at small sizes, are there extra nodes? Zoom the screenshot so the paths are visible.