How to Use the SVG Editor

Welcome to the built-in SVG Vector Editor! This tool allows you to draw, edit, and export vector graphics directly in your browser without needing external software. Here is a quick guide to help you get started.

1. Basic Navigation & Setup

• New & Save: Click New to start with a blank canvas. Use Save or Save As to store your project locally in your browser so you don't lose your progress.
• Loading Files: Click Load SVG to import an existing vector file (shapes will be flattened into editable lines). You can also use Import Image to add a PNG or JPG background.
• Navigation: Select the Pan ✋ tool or hold your middle mouse button to drag and move around the canvas. Use the + / - buttons to zoom in and out.

2. Drawing & Coloring

• Drawing Shapes: Select the Line ╱, Rect ▭, or Circle ○ tool. Click and drag on the canvas to draw. When drawing lines, they will automatically snap to nearby points or intersections.
• Strokes: Before you draw, go to the Stroke & Color tab in the right panel to set your desired line thickness and color.
• Fills: To color an enclosed shape, choose a fill type (Solid, Linear, or Radial Gradient) in the Stroke & Color tab. Then, select the Fill 🪣 tool and click inside any enclosed area to paint it.

3. Selecting & Modifying Objects

• Pointer Tool ↖: Use this primary tool to click and select an object, or drag a box in an empty space to select multiple objects. You can drag selected objects to move them around.
• Transformations: With an object selected, open the Transform tab. Here, you can precisely adjust its position, scale, rotation angle, or flip it horizontally/vertically.
• Deleting: Select the Eraser 🧹 tool and click any element to delete it immediately. Alternatively, you can use the Delete button in the toolbar for currently selected items.

4. Text & Layers

• Adding Text: Choose the Text T tool and click anywhere on the canvas. Open the Text tab on the right panel to edit the wording, font family, size, and text color.
• Layer Management: Open the Layers tab to organize your artwork. You can add, reorder, lock, or hide specific layers. To create a mask, check the boxes of the layers you want to mask, and click the mask icon (🎭) on the designated parent layer.

5. Exporting Your Artwork

• Open the Page tab to adjust your final document dimensions and toggle the transparent background setting.
• Click ⬇ SVG to download your artwork as a scalable, editable vector file, or ⬇ PNG to export it as a flat image file.