An SVG file is just text. Here are the three ways to make one.

Every SVG file you have ever downloaded is a text file. Open one in your editor and you will see XML, not bytes. That single fact is why "how do I create an SVG file" has three honest answers instead of one: you can draw it in a vector editor and export, you can type it, or you can trace a bitmap into paths. Which one fits depends on what you are starting from.

Here is a complete, valid SVG file. Save it as circle.svg and drag it into a browser tab:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#B5FF3A" stroke="#0B0B10" stroke-width="4"/>
</svg>

That is the whole format at its smallest. The rest of this post is about when typing it is enough, when you want an editor, and when you should trace instead.

Pick the route by what you start from

You start from	Route	Tool
Nothing, and you want an icon, logo or diagram	Draw in the browser, export SVG	SVG Lab (svglab.app), free tier
Nothing, and you already run a desktop suite	Draw on the desktop	Inkscape (free), Illustrator (paid)
A shape you can describe in numbers	Type the XML	Any text editor
A PNG or JPG that should have been vector	Trace it	SVG Lab auto-trace, Inkscape Trace Bitmap
A sentence describing what you want	Generate, then edit	SVG Lab AI Generate (Pro), or ChatGPT for raw markup

Best for making an SVG in the browser with no install: SVG Lab, because it draws with pen, pencil, shape and text tools on a real artboard and exports a plain .svg from the same tab. Best for hand-written markup: your text editor, because a rectangle is one line of XML. Best for print and heavy illustration: Inkscape or Illustrator, which is their home turf and not a browser editor's. Best for an existing PNG: a tracer, as long as the source is flat art and not a photo.

Route 1: type it

Typing works for anything geometric. The elements you will actually use are rect, circle, ellipse, line, polyline, polygon, text, and path, which covers everything the others cannot. Wrap related shapes in a g so you can transform them together.

Three root attributes do the real work:

• xmlns="http://www.w3.org/2000/svg" tells a standalone viewer this is SVG. Leave it out and the file still renders when inlined in HTML, but opens as raw text on its own. This is the number one reason a hand-written SVG "does not work".
• viewBox="0 0 100 100" defines the coordinate system. Everything inside draws on a 100 by 100 grid no matter what size the file is displayed at.
• width and height set a default display size. With a viewBox present they are optional, and most icon sets omit them so CSS can size the element.

Saving it is the only fiddly part. On Windows, Notepad appends .txt unless you set the file type to "All files". On macOS, TextEdit saves rich text unless you switch the document to plain text first. VS Code just saves. Use UTF-8 either way.

Where typing stops being worth it: the first curve you cannot describe as numbers. A path element takes move, line, and Bezier commands in its d attribute, and writing a smooth logo outline by hand is slow and error-prone. At that point draw it and read the markup the editor produces.

Route 2: draw it in the browser and export

SVG Lab (svglab.app) is a vector editor that runs in the browser tab, so draw, check, and export happen on one page, with nothing to install.

1. Open svglab.app. The editor is usable without an account, and if you never sign in, nothing you draw is uploaded anywhere.
2. Set the artboard size from a preset or type a width and height. 24 by 24 for an icon, 1200 by 630 for a social card.
3. Drag out shapes with Rectangle (R), Ellipse (E), Line (L), or the rounded rectangle, triangle, polygon, star and arrow tools.
4. Use the Pen for custom outlines: click for a corner anchor, click and drag for a curved one, close the path on the first anchor. Use the Pencil (B) for freehand; SVG Lab auto-smooths the stroke.
5. Add text with the Text tool. Fill, stroke, gradients, patterns and a drop shadow are in the Properties panel.
6. Open the live source panel with the </> button. SVG Lab shows the markup of what you drew as you draw it, and you can edit that source and apply it back to the canvas. If you are learning the format, this panel is the tutorial.
7. Click Export, choose SVG. You get a plain .svg file. PNG and PDF are in the same menu. The free tier includes 3 exports a month.

Inkscape does the same job on the desktop for free; use Save As, then Plain SVG to drop its editor-specific attributes. Illustrator exports SVG too, but treat that as a handoff copy rather than your master, because it flattens raster effects on export.

Route 3: trace a bitmap

If the artwork already exists as a PNG or JPG, trace it rather than redrawing. A tracer finds regions of similar color and fits paths around them. It is excellent on flat logos, icons and line art, and bad on photographs and soft gradients, which become hundreds of stacked paths.

1. In SVG Lab, click Import and choose the PNG, JPG, GIF or WebP. It lands on the artboard as a placed image.
2. Select the image and click Auto-trace image in the panel. SVG Lab traces it, shows a review preview, and inserts the result as one group of vector paths. The free tier includes 12 auto-traces a month.
3. If the original bitmap is still on the artboard and you no longer need it, delete it, then Export as SVG.

Inkscape's equivalent is Path, then Trace Bitmap. Whichever you use, zoom in before trusting the result: rounded corners come out as many short segments and thin lines can break. For a logo you will reuse, trace once and redraw the worst paths over the top.

The check that catches fake SVGs

Whatever route produced the file, it should pass this:

• It is plain text with exactly one root svg element carrying the xmlns attribute.
• It has a viewBox.
• Its extension is .svg, and it was not a .png five minutes ago. Renaming a bitmap does not vectorize it.
• It renders when dragged into a browser tab.
• It contains shape elements. An SVG whose only child is an image element pointing at a PNG is a bitmap in an XML coat. Some "converters" produce exactly that, and it pixelates when scaled just like the original.

FAQ

Can I create an SVG file without Illustrator? Yes. SVG Lab runs entirely in the browser and exports a plain .svg, Inkscape is a free desktop option, and a text editor covers simple geometry.

Can I make an SVG in Notepad? Yes. Paste the markup, set the type to "All files", save as name.svg. To keep editing visually, import it into SVG Lab or paste it into the source panel.

How do I make an SVG from a PNG? Trace it: import into SVG Lab and run auto-trace, or use Inkscape's Trace Bitmap. Flat art traces well, photos do not.

Does an SVG need width and height? No. A viewBox is enough; width and height only set a default display size.

Can ChatGPT create an SVG file? It can write the markup, and for simple shapes that is fine. It cannot see what it drew, so alignment and curves usually need a fix. Paste the output into SVG Lab's source panel to see and correct it on a real artboard.