An SVG file is not a picture of a drawing — it's the drawing's recipe, written in plain text. That single fact explains everything about editing them: why they scale forever, why you can fix one in Notepad, and why a browser tab is a fully capable vector editor.
A PNG stores pixels — a grid of colored dots at one fixed size. An SVG stores instructions: "a rectangle here, a circle there, this text in that font." The viewer draws the instructions fresh at whatever size you ask, which is why the same kilobyte-sized file renders crisp on a favicon and on a billboard. Two practical consequences: SVGs are usually tiny, and they're editable element by element — you can grab the circle and move it, because it's still a circle, not a smear of pixels.
The format is XML, so you can open any SVG in a text editor and read it. That's also the fastest way to stop being intimidated by vectors: the file is just a list of shapes with numbers.
| Option | Install? | Good for |
|---|---|---|
| Browser editor (SVG-Edit) | No | Everyday edits, icons, logos, learning the format |
| Inkscape | Yes (free, GPL) | Illustration, tracing bitmaps, print work |
| Text editor | No | Surgical edits: colors, coordinates, labels |
| Design suites (Figma, Illustrator) | Yes (paid) | Multi-artboard product design; SVG as an export format |
For most people most of the time, the browser route wins on friction: nothing to install, nothing to update, and files open straight from disk. Our SVG editor runs the open-source SVG-Edit engine unmodified — the same editor you'd otherwise go find, in a page with no upload and no account.
Every one of them also takes fill, stroke, and opacity. A worked micro-example: on a 200×100 canvas, <circle cx="160" cy="60" r="20"/> spans x 140–180 and y 40–80 — inside the canvas on all sides. Nudge cx to 190 and the right edge reaches 210, past the 200-wide canvas, so the circle clips. Coordinates are just arithmetic, and once you've fixed one clipping shape by reading numbers, SVG stops feeling alien.
Both, and the source view is the underrated half. Visual editing is right for drawing and arranging — dragging a shape beats typing coordinates. The source is right for precision and learning: change a fill hex, bump a radius, duplicate a group, and see exactly what happened. The habit that pays off: draw something simple visually, then read the XML it produced. Ten minutes of that teaches the format better than any tutorial, because you're matching shapes you just made to the text that now describes them.
One source-editing rule: SVG must stay well-formed XML — one wrong bracket and browsers show nothing. Edit, save, reload; browsers fail loudly, which is what you want.
Keep the SVG as your master file and export copies for targets that need them: PNG for apps that only accept bitmaps (choose 2–4× the display size for retina), PDF for print handoffs. SVG-Edit exports all three. Never round-trip through PNG and back — that's where crispness goes to die. And before sharing an SVG with a picky app (some cutters and office suites), flatten filters and masks to plain paths, since viewers outside browsers implement only part of the spec.
Open the free SVG editor — draw with the toolbar, inspect the source panel, export SVG, PNG, or PDF, all locally. Building assets for a site? Generate CSS extras with the Gradient Generator and Box Shadow Generator, and ship a proper multi-size icon set from the Favicon Generator. Need colors out of an existing logo? The Image Color Picker pulls the palette first.
The full open-source SVG-Edit engine in your browser — draw, edit source, export. Free, nothing uploaded.
Start drawing →SVG is a text description of shapes, so every edit is either moving shapes or editing text — and both are free. Use a browser editor for speed, the source view for precision, keep the SVG as your master file, and export rasters only when a target demands them. Once you've read the recipe for one drawing, you can edit any of them.