How Do You Create an SVG File? Three Ways That Work

Which way to create an SVG file

Method	Tool	You start from	Best when
Draw it in a browser editor	SVG Lab (svglab.app), free tier	A blank artboard	You need an icon, logo or diagram and do not want to install anything
Draw it on the desktop	Inkscape (free) or Adobe Illustrator (paid)	A blank canvas	You already run a desktop suite, or the job is print or heavy illustration
Write the markup by hand	Any text editor (VS Code, Notepad, TextEdit)	A shape you can describe in numbers	Simple geometric icons, generated graphics, learning the format
Trace an image	SVG Lab auto-trace, Inkscape Trace Bitmap	A PNG or JPG	You have a flat logo or line drawing and need real vector paths from it
Generate from a prompt	SVG Lab AI Generate (Pro), or ChatGPT for raw markup	A text description	You want a starting point to edit, not a finished file

Best for creating an SVG file 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 file from the same tab. Best for hand-written markup: a text editor, because a rectangle or a circle is one line of XML and no editor beats typing it. Best for desktop-native vector work and print: Inkscape or Illustrator, because print prepress and a 200-layer poster are their home turf and a browser editor is not the right tool for that. Best for turning an existing PNG into vectors: an auto-tracer, with the honest caveat that traced paths are only as clean as the source image.

Way 1: Draw it in the browser and export

This is the route for anyone who wants a real file at the end and does not want to learn XML first. SVG Lab (svglab.app) is a vector editor that runs in the browser tab, so the whole loop, draw, check, export, happens on one page.

1. Open svglab.app. The editor loads in the tab. No account is needed to start drawing, and if you never sign in, nothing you draw is uploaded anywhere.
2. Set the artboard size. Pick a preset from the artboard menu or type a width and height. A 24 by 24 artboard is the usual choice for an icon; a 1200 by 630 one suits a social card.
3. Draw the basic shapes with the shape tools: Rectangle (R), Ellipse (E), Line (L), plus rounded rectangle, triangle, polygon, star and arrow. Drag on the artboard to place each one.
4. Draw custom outlines with the Pen: click to place a corner anchor, click and drag to place a curved one, and close the path back on the first anchor. Use the Pencil (B) for freehand strokes; SVG Lab auto-smooths them as you draw.
5. Add text with the Text tool and set fill and stroke colors in the Properties panel. Gradients, patterns and a drop shadow live in the same panel if you need them.
6. Open the live source panel (the </> button). SVG Lab shows the SVG markup of what you have drawn, updating as you work, and you can edit the source there and apply it back to the canvas. This is the fastest way to learn what the markup in Way 2 means.
7. Click Export and choose SVG. The download is a plain .svg file you can open in any browser, hand to a developer, or re-import later. PNG and PDF sit in the same export menu. The free tier includes 3 exports a month.

If you would rather draw on the desktop, Inkscape does the same job for free and saves SVG natively (use Save As, then Plain SVG to drop its editor-specific attributes). Illustrator can also export SVG, but treat that export as a handoff copy rather than your master file, because Illustrator flattens raster effects on the way out.

Way 2: Write the SVG file by hand

An SVG file is a text file. That is the whole trick. You can open a text editor, type a few lines of XML, save with a .svg extension, and a browser will draw it. Here is a complete, valid SVG file that draws a lime circle with a dark outline:

<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>

To turn that into a file:

1. Open any text editor. VS Code, Notepad, TextEdit and nano all work.
2. Paste the markup above, or write your own using the elements listed below.
3. Save the file as circle.svg with UTF-8 encoding. In Notepad, set the file type to "All files" so Windows does not append .txt. In TextEdit, switch the document to plain text first.
4. Open the file in a browser (drag it onto a tab) to check that it renders. If the tab shows XML text instead of a drawing, the file is missing the xmlns attribute or has a typo in a tag.
5. To keep editing visually, import the file into SVG Lab with the Import button, or paste the markup into its source panel and apply it. The circle becomes a selectable shape on the artboard.

The three attributes on the root element do specific jobs. xmlns tells a standalone viewer that this is SVG and not some other XML; leave it out and the file renders inside an HTML page but shows as raw text when opened on its own. viewBox defines the coordinate system: 0 0 100 100 means the drawing lives in a 100 by 100 grid, whatever size it is displayed at. width and height set the default display size and are optional when a viewBox is present, since anything embedding the file can size it. (Resizing rules are covered in how to resize an SVG.)

The elements you will use most: <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>, <text>, and <path>, which draws anything the others cannot. Paths take a d attribute of move, line and curve commands; the path data guide explains that syntax. Group related shapes in a <g> so you can move or style them together.

Hand-writing works well for geometric icons, charts generated by a script, and anything you want to template. It stops being the right tool the moment a shape needs a curve you cannot describe in numbers, which is when you draw it in an editor instead and read the markup SVG Lab produces.

Way 3: Trace an image into an SVG file

If the thing you want as an SVG already exists as a PNG or JPG, you do not draw it again; you trace it. A tracer scans the bitmap for regions of similar color and fits vector paths around them. Two honest limits: it works well on flat logos, icons and line art with a handful of colors, and it works badly on photographs and soft gradients, which turn into hundreds of stacked paths and a large file.

1. In SVG Lab, click Import and choose the PNG, JPG, GIF or WebP. The image lands on the artboard as a placed bitmap.
2. Select the placed image and click Auto-trace image in the panel. SVG Lab traces it, shows a review preview, and inserts the result on the artboard as a single 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 as a reference, delete it, then Export as SVG. The file now holds real paths, not an embedded picture.

Inkscape does the same through Path, then Trace Bitmap, with more knobs to turn. Whichever tracer you use, zoom in on the result before you trust it: rounded corners tend to come out as many short segments, and thin lines can break into pieces. For a logo you plan to reuse, the cleanest outcome is often to trace once, then redraw the worst paths by hand over the traced version. If you are starting from a description rather than an image, the three AI routes to an SVG cover that case, including which one gives you editable paths.

What makes a file a valid SVG

Whichever way you created it, the file should pass this check:

• It is plain text. Open it in a text editor and you see tags, not binary noise.
• It has exactly one root <svg> element carrying xmlns="http://www.w3.org/2000/svg".
• It has a viewBox, so it scales without distortion at any display size.
• Its extension is .svg. Renaming a .png to .svg does not make it vector; the file is still a bitmap and every viewer will refuse it or render nothing.
• It opens in a browser and shows the drawing you expect. The SVG viewing guide covers the cases where it does not.

One more trap: an SVG that only contains an <image> element pointing at a PNG is an SVG wrapper around a bitmap, not a vector graphic. Some converters produce exactly that and call it a conversion. If you see <image and no <path>, <rect> or similar shapes inside, the file will pixelate when scaled just like the original.

Frequently asked questions

Can I create an SVG file without Illustrator?

Yes. SVG Lab (svglab.app) runs entirely in the browser and exports a plain .svg file, so you can draw and export without installing anything. Inkscape is a free desktop alternative, and a text editor is enough for simple geometric shapes.

Can I make an SVG file in Notepad?

Yes. An SVG file is XML text, so paste the markup into Notepad, choose "All files" as the type, and save it as name.svg. It will open in any browser. To keep editing it visually, import it into SVG Lab or paste the markup into its live source panel.

How do I create an SVG file from a PNG or JPG?

Trace it. Import the image into SVG Lab and run auto-trace (12 a month on the free tier), or use Inkscape's Trace Bitmap. Tracing works well for flat logos, icons and line art, and poorly for photographs, which turn into large, messy path sets.

Is there a free SVG file maker online?

SVG Lab is a free online SVG maker: the editor is fully usable without an account, and the free tier includes 3 projects, 3 exports a month and 12 auto-traces a month. Inkscape is free too, but it is a desktop install rather than a web page.

Does an SVG file need a width and height?

No. A viewBox is enough; it defines the drawing's coordinate system and lets whatever displays the file choose the size. Width and height only set a default display size. Most icon SVGs ship with a viewBox and no fixed dimensions so CSS can size them.

Can ChatGPT create an SVG file?

It can write SVG markup you then save as a .svg file, and for simple shapes that works. It cannot see what it drew, so anything with alignment or curves usually needs fixing. Paste its output into SVG Lab's source panel to see and correct it on a real artboard.