Upload Image

Upload an image to start drawing your custom SVG path over it.

Supported formats: JPG, PNG, WebP

SVG Path Drawer

Draw custom SVG paths on top of your images and export the generated code.

Select or drag and drop an image you want to trace or draw a path over.

Click on the image to add points. The tool automatically connects them to form an SVG path.

Once finished, copy the SVG code or download the generated SVG file to use in your project.

No. This tool runs entirely in your browser, ensuring your images are never sent over the internet or stored on external servers.

Yes, you can click the 'Undo' button to remove the last point you added to the path.

Click the 'Close Path' button to automatically draw a line from your last point to your first point.

Absolutely! Use the toolbar settings to change the stroke color, fill color, and stroke width in real-time.

Yes, you can tap on your mobile screen to draw paths. However, for maximum precision, a desktop environment is recommended.

You can upload standard web image formats like JPG, PNG, and WebP.

The tool exports only the drawn SVG path to keep the code clean and strictly vector-based.

The generated SVG path uses absolute commands (M for Move and L for Line).

Currently, this tool supports straight line segments (polygons and simple paths). Curves (Bézier) may be added in future updates.

Yes! You can now add multiple paths using the '+' button in the toolbar. Each path can have its own stroke color, width, and fill settings.

Each point you click generates an 'L' (LineTo) command. Drawing many points increases the code length.

Yes, you can use the path data inside a CSS clip-path or inline SVG elements.

No, you can add as many points as you need.

Click 'Clear Path' to remove all points and start over.

Yes, this tool is completely free and has no limitations.