What is SVG Editor?

Draw shapes, paths, and text on a visual canvas, adjust stroke and fill colors, and export the SVG code. No desktop software needed.

Tools include rectangle, ellipse, line, freehand path, text, and a shape library (triangle, hexagon, star, arrow). Text is edited inline on the canvas — click the text tool and type, or double-click any existing text to rename it. Each element keeps its own fill, stroke colour, stroke width, and opacity, and you can type exact X, Y, width, and height in the properties panel. Import an existing SVG with one click, snap drawing to a 10px grid, and undo or redo through a fifty-step history. Export the finished graphic as plain SVG markup for HTML and React JSX, or as a rasterised PNG for places that don't accept SVG.

How to use

1. Select a drawing tool (rectangle, ellipse, line, path, or text) and draw on the canvas.
2. Select elements to move, resize, rotate, or change their fill, stroke, and opacity.
3. Export the finished graphic as an SVG file, or copy the raw SVG markup.

When to use

• Sketching a one-off logo mark, divider, or hero shape for a landing page.
• Tweaking an existing SVG by hand when you don't want to open a heavy desktop app.
• Teaching SVG fundamentals — see the markup change as you draw on the canvas.

Result

A web developer needs a simple logo mark — two overlapping circles with a gradient fill. They draw the shapes on the canvas, apply colors, and copy the SVG code directly into their HTML.

FAQ

Will the SVG I copy be safe to paste straight into my React JSX?

Yes, with one caveat: attributes like stroke-width and stop-color need to be camelCased to strokeWidth and stopColor when used in JSX. The raw SVG copied here uses kebab-case, which is correct for plain HTML and easy to convert with a search-and-replace.

Can I import an existing SVG to keep editing it?

Yes — use the Import SVG button to load any .svg file from your device. Rectangles, ellipses, circles, lines, paths, and text are turned into editable elements on the canvas. Gradients, filters, and nested groups are skipped because the editor stores each shape as a single primitive.

Why does my exported SVG look different in Illustrator or Figma?

Different renderers handle stroke alignment, gradients, and filters slightly differently. The output here matches what every modern browser renders, which is the spec-correct behaviour, so any difference is usually the other tool's interpretation.

Does the editor support paths with curves like Bezier control points?

The freehand path tool records the points you draw and outputs them as a polyline-style path. For true cubic Bezier curves, export the SVG and edit the d-attribute by hand, or paste the result into a vector tool that exposes control handles.

How many elements can I add before the canvas slows down?

A few hundred shapes are comfortable on any modern device. Thousands of elements (e.g. complex maps or icon grids) start to feel laggy because every drag triggers a full re-render. Group your art into fewer compound paths if you hit that point.

Related Tools