How to Create an SVG File From Scratch or Convert an Image

What an SVG file is and why you might need one

An SVG file (Scalable Vector Graphics) is a text-based image format that stays sharp at any size — whether you zoom in on a logo or display it on a billboard. Unlike JPG or PNG files, which are made of pixels and get blurry when enlarged, SVG files contain mathematical instructions that tell your computer how to draw lines, shapes, and colors. This makes them ideal for logos, icons, diagrams, and anything you plan to resize or edit later.

You create SVG files in three main ways: drawing directly in design software, converting an existing image, or writing the code by hand. The method you choose depends on what you're starting with and how much control you want over the final result.

Key Takeaways

SVG files are vector graphics that stay sharp at any size, making them better than pixel-based images for logos and icons.
You can create SVGs using free design tools like Inkscape, paid software like Adobe Illustrator, or online editors like Figma.
Converting a JPG or PNG to SVG requires tracing software like Potrace or the auto-trace feature in Inkscape, which works best on straightforward images with solid colors.
SVG files are actually text code, so you can edit them in any text editor if you know basic SVG syntax.
Save your SVG file with the .svg extension so programs recognize it as a vector graphic rather than a regular image.

Drawing an SVG in Inkscape (free desktop software)

Inkscape is a free, open-source program that works on Windows, Mac, and Linux. read it from inkscape.org, install it, and open the program. You'll see a blank canvas in the center with a toolbar on the left side.

To draw a straightforward shape: click the circle tool, rectangle tool, or pen tool from the left toolbar, then click and drag on the canvas to create your shape. Use the color palette at the bottom to fill or outline your shapes. The pen tool (looks like a fountain pen) lets you click multiple points to draw custom paths — click once to place a point, click again to place the next point, and double-click to finish the path.

Once you've finished your drawing, go to File > Save As, choose a location on your computer, type a filename, and select "Scalable Vector Graphics (.svg)" from the format dropdown. Click Save. Your file is now an SVG and will stay sharp no matter how large you display it.

Creating an SVG in Figma (online, free tier available)

Figma is a browser-based design tool that requires no installation. Go to figma.com, create a free account, and start a new file. The interface is similar to Inkscape: tools on the left, canvas in the center, and properties on the right.

Draw shapes using the toolbar on the left (rectangle, circle, pen tool). Combine multiple shapes by selecting them, right-clicking, and choosing "Union" or "Combine" to merge them into a single object. When you're done, click the menu icon (three horizontal lines) in the top left, select File, then Export, and choose SVG format. Figma will read the file to your computer with the .svg extension.

Figma's free tier includes everything you need to create basic SVGs. The paid tier adds features like advanced prototyping and team collaboration, but you don't need it for straightforward vector graphics.

Converting an image to SVG using Inkscape's trace feature

If you have a JPG or PNG image you want to turn into an SVG, Inkscape can trace it automatically. Open Inkscape, go to File > Open, and select your image. The image will appear on the canvas as a regular picture, not yet a vector.

With the image selected, go to Path > Trace Bitmap. A dialog box will open with options. For most images, the default settings work fine — just click OK. Inkscape will analyze the image and create a vector version on top of it. You can delete the original image underneath (select it and press Delete) and save the vector version as an SVG.

This method works best on images with solid colors and clear shapes — logos, straightforward illustrations, and line drawings. Photos and complex images with many colors and gradients usually produce messy results because the tracing creates too many paths. For those, you're better off redrawing the image by hand or using a professional conversion service.

Converting an image using online tools

If you don't want to install software, several websites will convert your image to SVG. Go to convertio.co, select "Image" as your file type, upload your JPG or PNG, choose SVG as the output format, and click Convert. The site will process your image and let you read the SVG file.

Other options include CloudConvert (cloudconvert.com) and Online-Convert (online-convert.com). These tools use the same tracing technology as Inkscape, so results are similar — they work well for straightforward images and less well for photos. None of these sites require you to create an account for a single conversion.

Be aware that uploading images to a website means the site temporarily stores your file. If your image contains sensitive information, use Inkscape's offline tracing instead.

Writing SVG code by hand in a text editor

Since SVG files are actually text code, you can create them in any text editor — Notepad on Windows, TextEdit on Mac, or any code editor like Visual Studio Code. Open your text editor and type the basic SVG structure:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="blue" /></svg>

This code creates a blue circle. The viewBox sets the coordinate system (0 0 100 100 means a 100-by-100 unit canvas), cx and cy position the circle's center, r sets the radius, and fill sets the color. Save the file with a .svg extension, and you can open it in any web browser or image viewer.

Hand-coding SVGs is useful for straightforward shapes and when you want precise control, but it becomes tedious for complex images. Most people use design software instead and let the program write the code for them.

Saving and using your SVG file

Once you've created your SVG, save it with the .svg extension so your computer and other programs recognize it as a vector graphic. You can then insert it into documents, websites, presentations, or print it at any size without losing quality.

To use your SVG in Microsoft Word, go to Insert > Pictures > This Device, find your SVG file, and click Insert. In Google Docs, use Insert > Image > Upload from Computer. On a website, use the <img> tag: <img src="yourfile.svg" alt="description">. Most modern programs and browsers support SVG files natively.

If a program doesn't recognize your SVG, you can convert it to PNG or PDF using Inkscape (File > Export As) or an online converter. However, converting from SVG to a pixel-based format means you lose the scalability advantage — the file will have a fixed size.

Frequently Asked Questions

Can I edit an SVG file I downloaded from the internet?

Yes. Open it in Inkscape, Figma, or any design software, and you can modify the shapes, colors, and text. If you only need to change colors or text, you can also open the SVG in a text editor and edit the code directly. Save your changes with the .svg extension to keep it as a vector file.

Why does my converted image look messy or have too many lines?

Automatic tracing works best on straightforward images with solid colors and clear edges. Photos, gradients, and complex artwork produce messy results because the software creates many tiny paths to match every detail. For those images, redraw them by hand in design software or simplify the original image before tracing.

What's the difference between saving as SVG and exporting as SVG?

In most design software, "Save" keeps your work in the program's native format (Figma's native format, Inkscape's native format), while "Export" converts it to SVG. Always export as SVG when you want a final file you can use elsewhere. Save in the native format if you plan to edit the file again later.

Can I use SVG files on a website?

Yes. SVG files display in all modern web browsers and are ideal for websites because they scale perfectly on any screen size and have smaller file sizes than PNG images. You can insert them using the <img> tag, as a background image in CSS, or inline directly in your HTML code.

What if I need to print my SVG file?

SVG files print at any size without losing sharpness, which is one of their main advantages. Open the SVG in any design software or web browser, go to File > Print, and choose your paper size. The image will scale to fit and print with crisp, clean lines.

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.