On this page
Chapter 06 · Vector & text
Photopea is unusual among browser editors in having a real vector engine alongside its raster tools. Paths are Bézier curves with anchors and handles, shape layers keep their geometry indefinitely, boolean operations combine paths properly, and a bitmap can be vectorised into editable paths. The text engine is similarly complete: point and paragraph text, text on a path, vertical type, variable fonts, OpenType features, a glyphs panel and bidirectional typesetting. For logo work, icon design, social templates and any job where type must stay editable, this is the chapter that matters.
Drawing tools
| Tool | Key | Behaviour |
|---|---|---|
| Pen | P | Knot-by-knot path creation; click-drag to pull handles; click the first knot to close |
| Free Pen | P | Freehand stroke converted to a smooth Bézier curve; tolerance controls smoothing |
| Rectangle | U | Click-drag geometric rectangle |
| Ellipse | U | Click-drag ellipse; Shift constrains to a circle |
| Polygon | U | Regular polygon with a configurable corner count |
| Parametric Shape | U | Polygons, stars, spirals and more with custom parameters |
| Custom Shape | U | Built-in gallery plus CSH import |
| Path Select | A | Select, move and delete whole paths; Shift for multiple |
| Direct Select | A | Select and move individual knots and handles |
Every drawing tool operates in one of three modes, and choosing the right one before you start saves a lot of correction. Path mode adds the new geometry to the current path, whether that path belongs to a shape layer, a vector mask or a selection in the Paths panel. Shape mode creates a new shape layer. Pixels mode rasterises immediately into the current raster layer, which is the mode to avoid unless you specifically want to lose the vector data.
The Free Pen is worth a mention because it is not a Photoshop tool. You draw a rough freehand stroke and Photopea fits a smooth Bézier curve to it, with a tolerance setting controlling how closely the curve follows your hand. For tracing a logo from a scan, or for anyone who finds the Pen tool's handle manipulation awkward, it is a faster route to a clean path than placing knots by hand.
Path structure
Paths are hierarchical: a shape contains paths, and a path contains knots. Each knot has an anchor point and two handles. A smooth knot is drawn with a circular anchor and its handles move together, producing a continuous curve. A corner knot is drawn with a square anchor and its handles move independently, producing a sharp change of direction. Understanding that distinction is most of what there is to know about Bézier editing, and the visual difference between the two anchor shapes is the fastest way to diagnose why a curve is not behaving.
The Paths panel, from Window > Paths, lists the paths in the document and lets you browse them, convert a path to a selection, or create a path from a selection. That last operation is how you turn a carefully made pixel selection into resolution-independent geometry, which is a genuinely useful bridge between the raster and vector halves of the application.
Boolean operations and shape properties
Paths support union, subtract, intersect and exclude. Applied to overlapping shapes on a single shape layer, these produce compound paths that behave as one object with holes and cut-outs. This is how you build a ring, a letter with a counter, or an icon made of several merged forms without resorting to masks.
Shape layers carry independent fill and stroke settings. Fill can be none, a solid colour, a gradient or a pattern. Stroke can be none, a solid colour, a gradient or a pattern, with controls for thickness, position inside, centre or outside, corner shape and dash gaps. That is a fuller set than most vector editors offer at this level, and it means a shape layer can be restyled completely without redrawing it.
Vectorising a bitmap
Image > Vectorize Bitmap converts a raster layer into vector paths, with parameters for the number of colours and for noise reduction. The output is vector layers that can be exported as SVG or PDF. This is the feature that turns Photopea from a raster editor with vector tools into something closer to a full design tool, because it means a scanned logo or a screenshot of a mark can become editable geometry rather than a traced approximation.
Results vary with source quality. A clean, high-contrast logo vectorises well at a low colour count. A photograph vectorises into a large number of paths that are technically vectors but practically useless. The noise-reduction parameter is the control that decides whether the output is clean or speckled, and it is worth experimenting with before accepting a result.
Text
There are two kinds of text object. Point text has a single origin point and continues on one line until you press Enter, which makes it the right choice for headlines and labels. Paragraph text is drawn as a rectangle and wraps automatically inside it, with resizable corners, which makes it the right choice for body copy and anything whose length you do not control.
Text on a curve works by clicking on a path contour with the type tool. Two symbols, X and O, mark where the text begins and ends along the path, and the Path Select tool can move those bounds or flip the text to the opposite side of the contour. Vertical type is available as a separate tool. Together these cover the typographic treatments that most design work actually needs: curved badges, seals, ribbons and vertical labels.
| Typography feature | Status and detail |
|---|---|
| Font library | 7,600+ royalty-free fonts, about 2.75 GB, available from inside the editor |
| Custom fonts | TTF and OTF loaded via File > Open or drag and drop; appended to the end of the font list |
| Variable fonts | Supported |
| Glyphs panel | Supported, including alternate glyphs |
| OpenType features | Ligatures, subscript, superscript and alternates |
| Character panel | Size, colour, kerning, tracking, leading and more, applied per character |
| Paragraph panel | Alignment, margins, indents and base direction for bidirectional text |
| Bidirectional text | Writing direction auto-detected; base direction settable for mixed Arabic or Hebrew |
| Convert to shape | Right-click a type layer; each character becomes an editable path |
The font library is a bigger deal than it sounds. Having seven thousand fonts available without leaving the editor, and without licensing anxiety, removes a whole category of friction from design work. The caveat is that fonts are loaded from Photopea's server, so the font list is one of the features that needs a network connection. If you are working offline, stick to fonts already cached or loaded from your own device.
Convert to Shape is the operation that bridges typography and vector work. Right-clicking a type layer and choosing Convert to Shape turns each character into an editable path, after which you can distort individual letters, merge them with other shapes, or apply boolean operations. It is destructive in the sense that the text is no longer editable as text, so duplicate the layer first if you might need to change the wording.
What this chapter means in practice
The vector and type tools are complete enough for professional logo, icon and layout work, and the bitmap vectoriser is a capability that most competitors at this price do not have at all. The limits are in the depth of the typographic controls rather than their presence: the Character and Paragraph panels are good but not as exhaustive as InDesign's, and there is no text-frame linking for flowing copy across multiple boxes. For single-artboard design work that is rarely a problem. For long documents, use a layout application.