How to Create an SVG File From Scratch or Convert One

What an SVG file is and why you might make one

An SVG file is a text-based image format that stores drawings as code rather than as pixels. SVG stands for Scalable Vector Graphics. Unlike a JPEG or PNG, an SVG can be enlarged to any size without becoming blurry because it describes shapes mathematically instead of storing individual colored dots.

You might create an SVG if you need a logo, icon, diagram, or simple illustration that will appear at different sizes across websites, apps, or print materials. SVGs are also smaller in file size than raster images for simple graphics, and they can be edited in code or in design software.

The most practical ways to make an SVG are: drawing it in design software, converting an existing image, or writing the code directly in a text editor. Which route you take depends on your comfort with design tools and what you're starting with.

Key Takeaways

SVG files are vector graphics stored as code, so they scale to any size without losing quality.
You can create an SVG by drawing in design software like Inkscape or Adobe Illustrator, by converting a raster image, or by writing SVG code directly in a text editor.
Inkscape is free and open-source software that works on Windows, Mac, and Linux for drawing SVGs.
Online converters can turn PNG or JPEG files into SVG, though the result depends on how simple the original image is.
SVG code is plain text, so you can edit colors, shapes, and text directly in any text editor if you know the basics of SVG syntax.

Drawing an SVG in Inkscape (free software)

Inkscape is a free, open-source vector drawing program that saves directly to SVG format. Download it from inkscape.org for Windows, Mac, or Linux. When you open Inkscape, you get a blank canvas and a toolbar on the left with drawing tools: rectangle, circle, pen (for drawing paths), text, and others.

To create a simple shape: select the rectangle tool from the left toolbar, click and drag on the canvas to draw, then release. You can change the fill color by right-clicking the color palette at the bottom. Use the selection tool (arrow at the top left) to move or resize shapes. When you're done, go to File > Save As, choose the location, name your file, and select "Scalable Vector Graphics (*.svg)" from the file type dropdown. Click Save.

Inkscape has a learning curve if you've never used design software, but there are many free tutorials on YouTube that walk through specific tasks like drawing logos or converting text to paths. The software is powerful enough for professional work but free to use.

Converting an existing image to SVG

If you already have a simple image as a PNG or JPEG, you can convert it to SVG using online tools or desktop software. Online converters include Convertio, CloudConvert, and Vectorizer.io. Upload your image, adjust settings if the tool offers them (usually a threshold or color count), and download the SVG file.

The quality of the conversion depends on the original image. Simple, high-contrast images with solid colors convert cleanly. Photographs and complex images with many colors often produce messy results because SVG works best with defined shapes and limited colors. If the conversion looks poor, you may need to redraw the image in Inkscape or another vector tool instead.

In Inkscape itself, you can also import a raster image and use the "Trace Bitmap" feature (Path > Trace Bitmap) to convert it. This gives you more control over the conversion settings than most online tools.

Writing SVG code directly in a text editor

SVG is XML code, so you can write it in any plain-text editor: Notepad on Windows, TextEdit on Mac (set to plain text), or any code editor like Visual Studio Code. An SVG file starts with an opening tag that defines the canvas size, then contains shape elements like rectangles, circles, and paths.

A simple example: a red rectangle would look like this:

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

The width and height attributes set the canvas size. The rect element draws a rectangle; x and y position it, and fill sets the color. You can add circles with circle, lines with line, and text with text. Save the file with a .svg extension, and you can open it in any web browser or design software.

This approach works well if you're comfortable reading code or want to generate SVGs programmatically. For most people, drawing in Inkscape is faster and more intuitive.

Using Adobe Illustrator or other paid design software

Adobe Illustrator is the industry standard for vector design and saves to SVG natively. Open Illustrator, create a new document, draw using the tools in the left toolbar, and go to File > Export As. Choose SVG from the file type dropdown and click Export. You can adjust SVG export settings in the dialog that appears, such as whether to embed fonts or optimize the code.

Other paid options include CorelDRAW and Affinity Designer. All of these work similarly: draw your design, then export as SVG. The advantage over free software is a more polished interface and more advanced features, but for basic SVG creation, Inkscape does the job.

Editing an SVG file after you create it

You can edit an SVG in the program you created it in by opening the file and making changes. You can also edit the code directly: open the SVG file in a text editor, change color values (like "red" to "blue"), adjust dimensions, or modify text, then save. The next time you open the file in a browser or design software, the changes appear.

Some changes are simple in code form. Changing all instances of a color across a complex drawing is faster in a text editor than clicking each shape in design software. Other changes, like reshaping a curve, are easier in the visual interface of Inkscape or Illustrator.

Frequently Asked Questions

Can I convert a photograph to SVG?

Technically yes, but the result is usually poor. Photographs have millions of colors and subtle gradations that SVG handles inefficiently. Converters will either create a huge file with thousands of tiny shapes or simplify it so much that it looks nothing like the original. SVG works best with illustrations, logos, and simple graphics with solid colors and clear shapes.

What's the difference between SVG and PNG?

SVG is vector-based (made of shapes and code) and scales infinitely without quality loss. PNG is raster-based (made of pixels) and becomes blurry when enlarged. SVG files are usually smaller for simple graphics but larger for complex images. Use SVG for logos and icons; use PNG for photographs and detailed artwork.

Do I need design experience to create an SVG?

No. Inkscape is free and has many tutorials for beginners. If you're converting an existing image, online tools require no design knowledge at all. If you want to write SVG code, you only need to learn basic XML syntax, which takes a few hours to understand at a functional level.

Can I open and edit an SVG in Microsoft Word or Google Docs?

You can insert an SVG into a Word document or Google Doc, but you cannot edit it within those programs. To edit, open the SVG in Inkscape, a code editor, or another design tool, make your changes, save, and then re-insert it into your document if needed.

What's the smallest file size I can get for an SVG?

It depends on complexity. A simple icon might be 1 to 5 KB. A detailed illustration could be 50 KB or more. You can reduce file size by removing unnecessary code: use a tool like SVGO (a command-line tool) or an online SVG optimizer to strip out metadata and simplify paths without changing how the image looks.

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.