CruxDevCruxDev Tools Studio Prompts
image Utility • Zero-Server Privacy • 100% Client-Side

Vector Editor (SVG, Pen Tool & Boolean Paths)

Draw and edit vector art in your browser: pen, pencil, shapes and text, gradients, boolean path operations, layers, snapping and smart guides, then export clean SVG, PNG up to 4x or a vector PDF. Nothing is uploaded.

Overview

A vector editor that runs in your browser, in the spirit of Illustrator. Draw with the pen, pencil, shape and text tools, edit anchor points and bezier handles, fill shapes with solid colours or gradients, combine them with union, subtract, intersect and exclude, and export clean SVG, PNG at up to 4x or a vector PDF. Your artwork is never uploaded.

How It Works

Pick a tool from the left toolbar or press its key: V to select, A for direct selection, P for the pen, N for the pencil, M for rectangles, L for ellipses and T for text. Drag on the artboard to draw. Select objects to move them, scale them from the eight handles or rotate them from the round handle above, holding Shift to keep proportions or snap to 15 degrees. The right panel sets position, size, fill, stroke, opacity, blend mode and effects, the Layers tab lists every object, and the Export tab downloads SVG, PNG or PDF or copies SVG or a React JSX component.

Step-by-Step Usage Guide

  1. Choose an artboard size preset in the Design panel, or keep the default 800 by 600.
  2. Draw shapes, paths and text with the toolbar tools or their keyboard shortcuts.
  3. Refine curves with the direct selection tool by dragging anchors and bezier handles.
  4. Set fills, gradients, strokes and effects, and combine shapes with the path operations.
  5. Arrange objects in the Layers tab, then export SVG, PNG or PDF from the Export tab.

Technical Specifications & Standards

Every object lives in a scene graph that is rendered as real SVG, and the same render tree feeds the canvas and the exporter, so the file matches the screen. Paths are stored as anchors with in and out handles; quadratic curves and elliptical arcs from imported files are converted to cubic beziers so every node can be edited. Boolean operations flatten curves to polygons within a fraction of a unit, split every edge where it meets another, then keep only the edges whose two sides differ under the chosen operation, which handles holes, shared edges and self-intersections. Smart guides compare the moving box against the edges and centres of other objects and artboards and label the gaps to the nearest neighbours. Undo uses a command stack in which slider drags and arrow-key nudges merge into one step. Imported SVG is parsed with DOMParser and stripped of scripts, event attributes, foreignObject, animation and any external href before objects are built from it. Documents autosave to IndexedDB, and Save .svg embeds the editable document in a metadata element so the file reopens with layers intact.

Targeted Use Cases

  • Designing a simple logo or wordmark and exporting it as a clean SVG file.
  • Building app icons on a 24 or 512 pixel artboard with pixel-grid snapping turned on.
  • Cutting a custom shape from overlapping circles and rectangles with boolean subtract.
  • Editing a downloaded SVG icon's colours and paths without installing desktop software.
  • Producing a vector PDF diagram or badge for print at its exact point size.
  • Copying a finished illustration as a React component to paste straight into a project.

Notes & Gotchas

  • Use Save .svg for work in progress, because it keeps groups, names and text editable when reopened here.
  • Turn on Minify for SVG you ship on the web, which rounds coordinates and drops ids and objects outside the artboard.
  • Group parts of a design with Ctrl+G before scaling so they keep their relative positions.
  • Check text in PDF exports, since it is set in Helvetica and only Latin characters are kept.

Frequently Asked Questions

What vector features does it have?

It covers the core vector workflow: the pen tool, node editing, shapes, text, gradients, boolean path operations, layers, artboards and SVG, PNG and PDF export. It does not have Illustrator features such as brushes, symbols, live paint or text-to-outline conversion.

How do I use the pen tool to draw curves?

Press P, click to place corner points and press and drag to pull out bezier handles for a curve. Hold Alt while dragging to break the handle. Click the first point to close the shape, or press Enter or Escape to finish an open path.

Can I edit an existing SVG file?

Yes. Use Open or import SVG, drop a file on the editor or paste SVG code. Rectangles, circles, ellipses, lines, polygons, paths, text, groups, gradients and embedded images become editable objects. Scripts, event handlers and external links are removed first.

How do union, subtract, intersect and exclude work?

Select two or more shapes and choose an operation. Union merges them, intersect keeps only the overlap, exclude keeps the parts that do not overlap, and subtract removes everything above the bottom object from it. Curves are converted to fine polygons, so the result is a path with straight segments.

Is the PDF export vector or an image?

Vector. Shapes are written as PDF paths with pdf-lib, so they stay sharp at any zoom. Gradients become their average colour, text is set in Helvetica, and drop shadows, blur and blend modes are not included.

Where is my drawing saved?

It autosaves in this browser using IndexedDB, falling back to local storage, and is restored when you return. Nothing is sent to a server, so use Save .svg to keep a copy or move it to another device.

Related tools

  • SVG Optimizer - Optimize SVG files by removing metadata, comments, and unnecessary attributes. Reduce file size.
  • SVG to PNG Converter - Render SVG code or files to PNG, JPG or WebP at any scale or exact size, with a transparent or solid background, entirely in your browser canvas.
  • Graphic Designer (Posters, Social Posts & Thumbnails) - Design posts, thumbnails, posters, flyers and newsletters from 114 editable templates. Parent pages, threaded text, columns, text wrap, CMYK swatches, preflight and vector PDF with bleed and crop marks, all in your browser.
  • Photo Editor (Layers, Masks & PSD) - Layer-based photo editor in your browser: layer masks, adjustment layers, groups, layer styles, healing brush, content-aware fill, free transform, pen tool and curves. Opens and saves PSD; exports PNG, JPG, WebP and more. Nothing is uploaded.
  • SVG Optimizer - Safely optimize SVG files in-browser with a DOM parser — remove comments, metadata and editor artifacts, round decimals, and minify without corrupting paths, CDATA or styles.
  • SVG Placeholder Image Generator - Generate custom SVG placeholder images with configurable dimensions, colors, text, fonts, and border radius — instant data URI output.