How to create an SVG file

"How do I make an SVG file" has more than one right answer, and picking the wrong method wastes a lot of time. Nobody should hand-code a detailed illustration, and nobody should open a full design suite to grab a standard arrow icon. This guide lays out the five ways people actually produce SVGs, ordered by how sensible each is for the common cases, and finishes with the export details that separate a clean SVG from a bloated one.

Before the methods, one quick point about what you are making, because it removes most of the confusion up front.

First, what an SVG file is

An SVG file is just a text file containing XML that describes shapes. You can open the same file in a browser to see the picture and in a text editor to read the code behind it. That dual nature, image and code at once, is exactly why there are so many ways to create one, from drawing to downloading to typing. The what is an SVG file guide covers this in full if you want the background.

Choose your method by what you are making: a common UI icon, a bespoke logo, a custom illustration, a data chart, or a one-off simple shape. Each has a route that is clearly best.

Method 1: draw it in a design tool

This is the standard route for logos and custom illustrations, and every vector design tool exports SVG:

• Inkscape is free and open source, the obvious no-cost choice; draw your artwork and save as Plain SVG.
• Figma has a free tier; draw or select a frame, then right-click and Copy as SVG, or use Export with the SVG format.
• Adobe Illustrator is the industry standard; use File › Export › Export As and choose SVG, or Export for Screens.
• Affinity Designer, Sketch and others export SVG just as well.

Draw with real shapes and the pen tool, and keep the whole thing vector, do not simply place a photo on the canvas and export it. Convert text to outlines only when you cannot guarantee the font will be present wherever the file is used; it is a trade-off, because outlined text is no longer editable as text but no longer depends on a font either. This method is best for logos, bespoke icons and any illustration that is uniquely yours.

Method 2: download a ready-made icon

If you need a common icon, an arrow, a cart, a user, a settings cog, do not draw it at all. Download it from an icon set as SVG. It is faster, and the geometry is already clean, consistent with a wider family, and correctly sized. You can search the icon library, pick an icon, set its colour and size, and export the SVG directly, or browse whole icon sets to keep a project visually consistent.

This is the right method for essentially all UI icons and for anything that has already been drawn well by someone else. If the graphic is a brand logo rather than a generic icon, check the terms before you use it; the licensing guide explains what the common licences permit and where trademark rules still apply.

Method 3: convert an existing image

If you already have artwork in another format, you can produce an SVG from it, and the method depends on whether the source is raster or vector:

• From a raster image (PNG or JPG), you trace it, which redraws the pixels as vector shapes. This works well for a simple logo and badly for a photograph, and it comes with real caveats, all covered in the PNG to SVG guide.
• From a vector source (PDF, EPS or AI), there is no tracing involved; open the file in Inkscape or Illustrator and export it as SVG, and the shapes come across directly because they were already vectors.

Use this method when you are reusing existing artwork that you cannot obtain as an SVG any other way.

Method 4: write it by hand

For simple shapes, you can type an SVG straight into a code editor. A minimal, complete file looks like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="8" fill="#2563eb"/>
</svg>

The building blocks are <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon> and <path>. Always set a viewBox so the shape scales properly, which the viewBox guide explains, and reach for <path> when you need anything beyond the basic shapes, covered in SVG path data. Hand-writing is best for simple geometric icons, for learning how SVG works from the inside, and for making a quick tweak to an icon you already have. Nobody hand-writes a detailed illustration, and you should not try.

Method 5: generate it with code

Data-driven graphics are usually generated rather than drawn. Charting and visualisation libraries output SVG directly: D3.js is the best-known, and many charting tools render to SVG under the hood. Server-side libraries generate SVG for status badges, QR codes, diagrams and social share images, produced fresh at build time or on each request.

This method is best for charts and graphs, and for any dynamic or templated graphic that has to be produced programmatically rather than designed by hand once.

Exporting cleanly

However you create the file, the export step decides its quality. The things worth checking every time:

• Include a viewBox, so the SVG scales; without one, resizing it with CSS misbehaves. See the viewBox guide.
• Trim the canvas to the artwork, or you ship invisible whitespace around the icon and it looks mis-sized everywhere.
• Handle text deliberately: convert it to outlines if the font is not guaranteed, otherwise it falls back to a different font on other machines.
• Reduce decimal precision: design tools export coordinates with many decimal places; trimming them shrinks the file noticeably, as covered in optimising SVG files.
• Strip editor metadata, since Inkscape and Illustrator add their own; an optimiser removes it.
• Prefer clean attributes over inline styles if you plan to recolour with CSS, which the colour guide explains.

Then open the finished file in a browser at both large and small sizes and confirm it looks right before you use it anywhere.

Frequently asked questions

New to the format itself? Start with what an SVG file is.

Made one? Learn to optimise it so it is small, and to recolour it with CSS.