SVG Vector Editor

Overview

Flowmo includes a built-in SVG vector editor that lets you create and modify SVG paths directly on the canvas. When you enter SVG edit mode, the top toolbar swaps to a specialized set of drawing and selection tools, and the right sidebar shows path-specific properties (fill, stroke, opacity). You can draw freehand paths, create precise bezier curves, manipulate individual anchor points, and switch between smooth and corner point types -- all without leaving the designer.

Prerequisites

• You have an SVG element on the canvas (imported SVG, or created using the Pen/Pencil path tools in the top toolbar).
• The element is selected.

Entering SVG Edit Mode

Double-click an SVG element on the canvas. The top toolbar changes to show the SVG editing tools, and the right sidebar switches to display Path Properties instead of the standard design panels.

To exit SVG edit mode, do one of the following:

• Click the Done button in the top toolbar.
• Press Escape.

SVG Edit Tools

When SVG edit mode is active, the top toolbar shows the following tools, separated by dividers:

Selection Tools

Tool	Shortcut	Icon	Description
Direct Select	V	Pointer arrow	Select and move individual anchor points and control handles on a path.
Path Select	A	Hand	Select entire paths or sub-paths as a whole unit.

Drawing Tools

Tool	Shortcut	Icon	Description
Pen tool	P	Pen nib	Click to place anchor points and create straight lines. Click and drag to create bezier curves with control handles.
Pencil tool	Shift+P	Pencil	Draw freehand paths by clicking and dragging on the canvas. The path is automatically smoothed.

Point Type Tools

Tool	Icon	Description
Corner point	Diamond	Converts selected anchor points to corner points (sharp angles, no smooth curve).
Smooth point	Spline/curve	Converts selected anchor points to smooth points (handles align to create a continuous curve).

Path Properties (Right Sidebar)

When in SVG edit mode, the right sidebar shows the Path Properties panel. If no point or path is selected, you see the message: "Select a point or path to see properties."

Fill

• The Fill section shows a color swatch and hex value.
• Click the + button to add a fill if none exists, or the - button to remove it.
• Click the color swatch to open the Edit Fill color picker modal, which provides a solid color selector.

Stroke

• The Stroke section shows the stroke color, width, and style.
• Click the + button to add a stroke, or the - button to remove it.
• Color: Click the color swatch to open the Edit Stroke color picker modal.
• Width: Use the number input next to the stroke-width icon to adjust thickness (in pixels).
• Style: A dropdown selector with three options:
• solid -- A continuous line.
• dashed -- A dashed line.
• dotted -- A dotted line.

Opacity

• A single number input labeled Opacity with a % suffix.
• Range: 0 to 100. The value is stored internally as a 0--1 decimal but displayed as a percentage.

Step-by-Step: Drawing a Custom Shape with the Pen Tool

1. Select an existing SVG element and double-click to enter SVG edit mode. (Or use the Pen/Pencil tool from the main toolbar to start creating a new path.)
2. In the SVG edit toolbar, click the Pen tool button (or press P).
3. Click on the canvas to place your first anchor point.
4. Click at another position to create a straight line segment.
5. To create a curve, click and drag -- this pulls out bezier control handles. The direction and distance of your drag determines the curve shape.
6. Continue clicking (or click-dragging) to add more points.
7. To close the path, click on the first anchor point.
8. Switch to the Direct Select tool (V) to adjust individual points and handles.

Step-by-Step: Editing Existing Points

1. Enter SVG edit mode by double-clicking the SVG element.
2. Select the Direct Select tool (V).
3. Click on an anchor point to select it. You will see its control handles appear.
4. Drag the anchor point to reposition it.
5. Drag a control handle to reshape the curve at that point.
6. To convert a smooth point to a corner: select the point, then click the Corner point button (diamond icon) in the toolbar.
7. To convert a corner to a smooth curve: select the point, then click the Smooth point button (spline icon) in the toolbar.

Step-by-Step: Styling a Path

1. In SVG edit mode, select a path using the Path Select tool (A).
2. In the right sidebar under Fill, click the color swatch to choose a fill color.
3. Under Stroke, click + to add a stroke if needed. Set the color, adjust the width, and choose a style (solid, dashed, or dotted).
4. Adjust the Opacity to make the path semi-transparent if desired.
5. Click Done (or press Escape) to exit edit mode and see the final result.

Tips

• Pen vs. Pencil: Use the Pen tool when you need precise control over bezier curves and anchor point placement. Use the Pencil tool for quick freehand sketches that are automatically smoothed.
• Point type switching: After drawing a path, you can select specific anchor points and toggle between Corner and Smooth to fine-tune your shape. Corner points create sharp angles; Smooth points create flowing curves.
• Path Select vs. Direct Select: Path Select (A) moves entire paths. Direct Select (V) moves individual points and handles. Use Path Select when you want to reposition a whole shape.
• Keyboard shortcuts: Learn the shortcuts -- P for Pen, Shift+P for Pencil, V for Direct Select, A for Path Select, and Escape to exit edit mode. They speed up your workflow significantly.
• Stroke for SVG Draw: If you plan to use the SVG Draw interaction action, make sure your path has a visible stroke. The draw effect animates the stroke from invisible to fully drawn.

Common Issues

Problem	Solution
Double-clicking does not enter edit mode	Make sure you are double-clicking directly on an SVG element, not a wrapper frame or group.
Path Properties panel says "Select a point or path"	Use the Direct Select (V) or Path Select (A) tool to click on a point or path segment.
Curves look jagged after drawing	Select the anchor points and click the Smooth point button to convert them to smooth curves.
Cannot see the stroke on the path	Check that a stroke is added (click + under Stroke) and the width is greater than 0.
Fill color does not appear	Some SVG paths have fill: none by default. Click the + button under Fill to add a solid fill.
Pen tool not placing points	Make sure you are in SVG edit mode (toolbar shows SVG tools) and the Pen tool is active (press P).
Opacity input does not respond	The Opacity field only appears when a point or path is selected and has at least one property (fill or stroke).

Related Articles

• Interaction Actions -- Use SVG Draw and SVG Morph actions to animate paths.
• Transitions & Easing -- Animate SVG property changes with transitions.
• Element States -- Style SVG paths differently on hover or focus.
• Layout Types -- Understand how SVG elements sit within the layout.