How to Create an SVG File From Scratch

What an SVG is and why you might make one

An SVG (Scalable Vector Graphic) is a file format that stores images as mathematical instructions rather than as a grid of colored dots. When you scale an SVG up or down — make it bigger or smaller — it stays sharp because the computer is redrawing it from those instructions, not stretching a fixed image. This makes SVGs ideal for logos, icons, straightforward diagrams, and anything that needs to look crisp at any size.

You create an SVG by writing code that describes shapes: rectangles, circles, lines, paths. You do not need to be a programmer. Most people use a drawing tool that writes the code for you while you draw visually, the same way you would in any design program. The code itself is plain text, which means you can also edit it by hand if you want to fine-tune something.

The main reason to choose SVG over a regular image file is file size and flexibility. An SVG of a straightforward logo might be 5 kilobytes; a PNG of the same logo might be 50. And if a client asks you to change the color, you change one number in the code instead of redesigning the whole thing.

Key Takeaways

The easiest way to create an SVG is to draw in a vector editor like Inkscape (free) or Adobe Illustrator, then export or save as SVG format.
You can also write SVG code directly in a text editor if you know the basic shape commands, or edit existing SVG files by opening them in any text editor.
SVGs stay sharp at any size because they are built from mathematical shapes, not pixels, making them better than regular images for logos and icons.
Most vector editors let you import a photograph or sketch and trace over it to create vector shapes, which you can then save as SVG.

Using a free vector editor to draw and export

Inkscape is the most common free option. read it from inkscape.org, install it like any other program, and open it. You will see a blank canvas and a toolbar on the left with drawing tools: rectangle, circle, pen (for drawing freehand lines), text, and others. Draw your shapes on the canvas the way you would in any drawing program.

Once you have finished drawing, go to File > Save As. In the dialog that opens, change the file type dropdown from "Inkscape SVG" to "Plain SVG" or just "SVG". This removes Inkscape-specific code and makes the file smaller and more portable. Type a filename and click Save. You now have an SVG file you can use anywhere.

If you already have a design in another program — even a photograph or a hand-drawn sketch — you can import it into Inkscape and trace over it. Go to File > Import, select your image, and click Open. The image appears on your canvas. Then use the drawing tools to create vector shapes on top of it. When you are done, delete the image layer and save as SVG.

Writing SVG code directly in a text editor

If you want to write SVG code by hand, open any text editor (Notepad on Windows, TextEdit on Mac, or a code editor like Visual Studio Code). SVG code starts with an opening tag that sets the canvas size, then contains shape elements. Here is a straightforward example:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="50" fill="blue" /> <rect x="50" y="50" width="100" height="100" fill="red" /> </svg>

This code draws a blue circle and a red rectangle. The numbers describe position and size; the fill attribute sets color. Save the file with a .svg extension (for example, shapes.svg) and you can open it in any web browser or design program. The browser will display the shapes exactly as the code describes them.

Writing SVG by hand works well for straightforward geometric designs, but for anything complex — curved lines, many shapes, precise positioning — a visual editor is faster and less error-prone. Most people use a visual editor to create the design, then edit the code if they need to tweak a color or adjust a measurement.

Editing an existing SVG file

If you have an SVG file and want to change it, you have two options: open it in a vector editor like Inkscape, or open it in a text editor and change the code directly. Right-click the SVG file, choose Open With, and select your text editor. The code will appear as plain text. Find the part you want to change — for example, a color value like fill="blue" — and type the new value. Save the file and open it in a browser to see the change.

This approach works best for small changes: swapping colors, adjusting text, changing dimensions. For larger edits — moving shapes around, redrawing lines, adding new elements — open the file in Inkscape instead. Go to File > Open, select your SVG, and edit it visually the way you would any other design. When you save, it updates the SVG file.

Converting a photograph or sketch to SVG

If you have a photograph or a hand-drawn sketch and want to turn it into an SVG, Inkscape has a tool called Trace Bitmap. Import your image (File > Import), select it on the canvas, then go to Path > Trace Bitmap. A dialog opens with options for how detailed the tracing should be. Click OK and Inkscape converts the image into vector shapes. The result is usually rough and needs cleanup, but it is a fast way to get your free guide.

For cleaner results, especially with hand-drawn sketches, you can also trace manually: import the image, lock it so you do not move it by accident, then use the pen tool to draw vector shapes on top of it. This takes longer but gives you full control over the final design. When you are done, delete the image layer and save as SVG.

Saving and exporting from other design programs

If you use Adobe Illustrator, Affinity Designer, or another vector program, the process is the same: create your design, then go to File > Export As (or Save As) and choose SVG as the file type. Most programs will ask you to set options like whether to include metadata or how to handle text. For most uses, the default settings are fine. Click Export or Save and you have your SVG file.

Some programs like Figma (a web-based design tool) let you right-click a shape or group and choose Export as SVG directly, without going through a menu. This is faster if you are exporting many small pieces — for example, individual icons from a larger design.

Testing your SVG and fixing common problems

Once you have created an SVG, open it in a web browser to see how it looks. Drag the browser window edge to resize it and confirm the image stays sharp at different sizes. If something looks wrong — colors are off, shapes are missing, text is unreadable — open the file in your vector editor and check.

Common issues: text that does not display because the font is not installed on the viewer's computer (convert text to outlines in your editor before saving), colors that look different in the browser (check that you are using standard color names or hex codes like #FF0000 for red), and shapes that disappear because they are outside the canvas area (adjust the width and height values in the opening SVG tag).

If you edited the code by hand and made a mistake, the browser will usually just skip the broken line and display the rest. Open the file in your text editor, look for typos in the code, and save again. SVG code is forgiving — a missing space or a misspelled attribute usually just means that one element does not display.

Frequently Asked Questions

Can I open an SVG file in Photoshop or other image editors?

Yes, but Photoshop converts the SVG to pixels when you open it, so you lose the ability to scale it without losing sharpness. For editing SVG files, use a vector editor like Inkscape or Illustrator instead. If you only need to view an SVG, any web browser works.

What is the difference between SVG and PNG or JPEG?

SVG is vector-based (made of shapes and math), while PNG and JPEG are raster-based (made of pixels). SVGs stay sharp at any size; raster images get blurry when enlarged. SVGs are smaller for straightforward designs like logos; raster images are better for photographs. Use SVG for icons and logos, PNG or JPEG for photos.

Can I use SVG on a website?

Yes. You can embed an SVG directly in HTML, link to it like an image, or use it as a background. SVGs load fast, scale to any screen size, and can be animated with code. Most modern websites use SVGs for icons and logos.

Do I need to know code to create an SVG?

No. Use a vector editor like Inkscape and draw visually; the program writes the code for you. You only need to know code if you want to edit the SVG by hand or write one from scratch, and even then the basics are straightforward.

What if I want to add animation or interactivity to my SVG?

SVGs support animation through CSS and JavaScript. You can add code to make shapes move, change color on hover, or respond to clicks. This requires some coding knowledge, but many tutorials and code libraries make it straightforward. Start by learning the basics in a vector editor, then explore animation once you are comfortable with static SVGs.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.