SVG Editor – User Guide

Welcome to the SVG Editor! This tool lets you create and edit vector graphics with ease. Below is a comprehensive guide to its features, including detailed instructions for the pencil tool and keyboard shortcuts.

Getting Started

  1. Access the Editor: Load the page with the SVG Editor. You’ll see a toolbar at the top and a canvas below.
  2. Canvas: The white area is your workspace for creating and editing objects.

Toolbar Overview

The toolbar is split into sections:

  1. Upload Section
    • Upload SVG: Upload an .svg file to edit.
  2. Grouping Tools
    • Group: Combine selected objects into one.
    • Ungroup: Break a group into individual elements.
    • Color Picker: Set the color for selected objects or new drawings.
  3. Save Options
    • Save SVG as ZIP: Export as a vector SVG file in a ZIP.
    • Save PNG as ZIP: Export as a high-resolution PNG in a ZIP.
  4. History Controls
    • Undo: Revert your last action.
    • Redo: Restore an undone action.
    • Delete All: Clear the canvas (with confirmation).
  5. Text Tools
    • Text Input: Enter your text.
    • Font Selector: Pick a font.
    • Bold: Toggle bold for text.
    • Add Text: Place text on the canvas.
  6. Shape and Drawing Tools
    • Shape Selector: Choose Rectangle, Circle, Triangle, or Line.
    • Add Shape: Add the selected shape.
    • Pencil: Toggle freehand drawing mode.
    • Pencil Width: Select line thickness (1px, 2px, 5px, 10px, 15px).

How to Use the Editor

  1. Uploading an SVG
    • Click the file input and select an .svg file.
    • It appears centered and scaled on the canvas.
  2. Adding Shapes
    • Pick a shape from the dropdown.
    • Click “Add Shape” to place it.
    • Set its color with the “Color Picker” beforehand.
  3. Adding Text
    • Type in the “Text Input”.
    • Select a font and toggle “Bold” if needed.
    • Click “Add Text” to add it.
  4. Using the Pencil Tool
    • Enable: Click “Pencil” (it highlights when active).
    • Freehand Drawing: Click and drag to draw freely with the selected color and width.
    • Straight Lines: Hold Shift, click where you want the line to start, drag to the end, and release—creates a straight line.
    • Width: Choose from 1px, 2px, 5px, 10px, or 15px in the “Pencil Width” dropdown.
    • Color: Set via the “Color Picker”.
    • Disable: Click “Pencil” again to exit drawing mode.
    • Edit: Drawn lines (both freehand and straight) can be selected, moved, scaled, or deleted.
  5. Editing Objects
    • Select: Click an object (red corners appear).
    • Move: Drag to reposition.
    • Scale: Drag corner handles (Shift to maintain proportions).
    • Color: Select and use the “Color Picker”.
    • Delete: Press Delete or Backspace.
    • Deselect: Click outside the canvas or empty space.
  6. Grouping
    • Select multiple objects (Ctrl+click or drag).
    • Click “Group” to combine.
    • Click “Ungroup” to separate.
  7. Saving
    • Use “Save SVG as ZIP” or “Save PNG as ZIP” to download your work.
  8. Clearing
    • Click “Delete All” and confirm to reset.

Keyboard Shortcuts

  • Ctrl+C: Copy selected object(s).
  • Ctrl+V: Paste copied object(s) with a slight offset.
  • Ctrl+A: Select all objects on the canvas.
  • Ctrl+Z: Undo last action.
  • Ctrl+Y: Redo undone action.
  • Delete/Backspace: Remove selected object(s).
  • Shift (with Pencil): Draw straight lines instead of freehand.
  • Shift (while scaling): Maintain object proportions.

Pencil Tool Details

  • Freehand Mode: Click and drag to draw curves and shapes freely.
  • Straight Line Mode: Hold Shift to draw precise straight lines—click to start, drag to set direction, release to finish.
  • Width Options: Choose 1px (thin), 2px (default), 5px, 10px, or 15px (thick).
  • Color: Matches the “Color Picker” setting.
  • Interaction: Drawn lines become editable objects you can move, scale, or delete.

Tips and Tricks

  • Precision: Use Shift with the pencil for straight lines or while scaling for proportional resizing.
  • Zoom: Use browser zoom (Ctrl +/-) to adjust your view.
  • Layering: New objects appear on top; drag to reorder if needed.
  • Undo Safety: Every action (drawing, moving, etc.) is undoable.

Troubleshooting

  • SVG Fails to Load: Check if it’s a valid .svg file.
  • Pencil Not Drawing: Ensure “Pencil” is active (highlighted).
  • Straight Lines Not Working: Hold Shift before clicking to start the line.

Enjoy designing with the SVG Editor! Contact support if you need assistance.