Welcome to the Advanced Vector & Icon Creator! Here's how to get started:
1. Drawing Tools (Left Panel):
- Select Tool (Arrow): Click to select a single shape. Hold `Ctrl` (or `Cmd` on
Mac) and click to select multiple shapes. Drag selected shapes to move them.
- Rectangle, Circle, Ellipse, Line, Triangle: Click a tool, then click and drag
on the canvas to draw the shape.
- Freehand Tool: Click and drag to draw free-form lines.
- Text Tool: Click on the canvas to place a text element. Edit its content and
properties in the "Properties" panel.
2. Properties Panel (Left Panel, below Tools):
- Fill: Change the fill color of selected shapes.
- Text (for Text elements): Edit text content, font size, and font family.
- Scale: Adjust the size of the selected shape(s).
- Rotation: Rotate the selected shape(s).
- Radius (for Rectangles): Appears only when a rectangle is selected. Adjust
these values to round the corners. Use the "Uniform Radius" checkbox to link X and Y radii.
- Cut Out (Visual): Check this for a selected shape to make it visually "cut out"
underlying parts of other shapes. This is a visual effect.
- Delete: Remove selected shape(s).
3. Layers Panel (Middle-Left Panel):
- Lists all shapes on the canvas (top is front, bottom is back).
- Click a layer item to select the corresponding shape on the canvas.
- Drag and drop layer items to change their drawing order (Z-order).
- Visibility Toggle (Eye icon): Click to hide or show a layer.
- **Duplicate:** Duplicate selected shape(s) at their current position.
- **Group:** Select multiple shapes (using `Ctrl`/`Cmd` + click) and click "Group" to
combine them into a single group.
- **Ungroup:** Select a grouped element and click "Ungroup" to separate its
components.
4. Alignment Panel (Middle-Left Panel, below Layers):
- Make Concentric: Select exactly two shapes. The second selected shape will move
to align its center with the first selected shape's center.
- Center on Canvas: Select one or more shapes to move them to the exact center of
the canvas (where the dashed grid lines intersect).
5. Canvas Controls (Top-Right of Canvas):
- Grid Toggle: Show or hide the background grid.
- Snap Toggle: Enable or disable snapping to the grid for drawing and moving.
6. Keyboard Shortcuts:
- Arrow Keys: Move selected shape(s) by 1 unit.
- Shift + Arrow Keys: Move selected shape(s) by 10 units for faster precise
adjustments.
- Delete / Backspace: Delete selected shape(s) (with confirmation).
- Ctrl / Cmd + Click: Add/remove shapes from current selection.
- Ctrl / Cmd + Z: Undo last action.
- Ctrl / Cmd + Y: Redo last undone action.
7. Export & View Options (Right Panel):
- Undo/Redo: Revert or reapply actions.
- Clear Canvas: Remove all shapes.
- Export (Dropdown):
- Export SVG: Download your artwork as a scalable vector graphic,
containing only your shapes.
- Export PNG/JPG: Download as a raster image. PNG (Transparent) will have
a transparent background.
- View SVG Code: See the raw SVG code for your shapes in a pop-up.
Enjoy creating your designs!
