What you'll need

  • A current desktop browser over HTTPS or localhost (Chrome/Edge 91+, Firefox 89+, Safari 16.4+).
  • An .svg file on disk. The test file used a rectangle, a circle and a filled path.
  • The editor open at /app/. Wait until the loading screen disappears — the first visit downloads about 97 MB of engine code.

Steps

  1. Drag the SVG onto the canvas. Drop the file anywhere over the editor workspace. The application opens it as a new document; no import dialog is shown.
  2. Confirm the import. A document tab appears with the file name and a zoom percentage, and the artboard shows each SVG element in its own colour. This confirms the geometry arrived as vectors rather than a flattened bitmap.
  3. Select an object. Click one of the shapes. The right-hand Properties panel changes from document settings to the object's transform, appearance and alignment controls.
  4. Draw a new shape. Pick the rectangle tool from the left toolbar, then drag on the artboard. The new object appears with square selection handles, and the Properties panel shows live X, Y, W and H values.
  5. Adjust it numerically. Edit the transform fields or change fill and stroke in the Appearance section. The artboard updates immediately and the edit is undoable.
  6. Save the result. Use File › Save for the layered document or the PNG export guide for a raster asset. There is no automatic cloud save.
Real editor screenshot: an imported SVG with a green rounded rectangle, a pale circle and a dark triangle on the artboard
Step 2 — the imported SVG rendered as separate vector objects on the artboard.
Real editor screenshot: a selected rectangle with anchor handles and numeric X, Y, W, H fields in the Properties panel
Step 4 — a newly drawn rectangle selected, with transform values visible in Properties.

What we verified

  • Drag-and-drop import opened the SVG and rendered all three test elements correctly.
  • The document tab reported the file name and zoom level after import.
  • The rectangle tool created a selectable object with numeric X, Y, W and H fields in the Properties panel.
  • The browser console reported no errors during the whole sequence.

About File › Open and the welcome screen's Open button: both call the same application import pipeline, but they rely on the operating system's file picker. Our automated browser could not drive that native picker, so this guide uses the drag-and-drop route, which we could verify end to end. In a normal desktop browser the picker is available as usual (Ctrl/⌘ + O).

Next

Once the artwork looks right, follow Export a PNG to produce a raster file with explicit size and transparency settings.

Follow along in the editor

Open the full-screen workspace and drop your SVG onto the canvas.

Open the editor