How to Make SVG Files: A Beginner’s Guide

Most image formats break the moment you scale them up. SVG files don’t.

Knowing how to make SVG files puts a format on your side that powers icons, logos, and illustrations across every screen size without quality loss. Over 63% of websites now use SVG, including Google and Microsoft (W3Techs, 2025).

This guide covers every creation method, from Adobe Illustrator and Inkscape to hand-coded XML and browser-based tools. You will also learn how to convert raster images, optimize file size, embed SVG correctly in HTML, and fix the most common problems that show up after export.

What Is an SVG File?

An SVG (Scalable Vector Graphics) file is an XML-based vector image format that stores graphics as mathematical paths, shapes, and coordinates rather than pixels.

Because the file describes geometry instead of storing pixel data, an SVG file scales to any size, from a 16px favicon to a billboard, without quality loss.

W3Techs data from 2025 shows 63.3% of all websites now use SVG, including Google, Microsoft, and Amazon.

How SVG Files Differ from Raster Formats

SVG stores instructions. PNG and JPG store pixels.

That distinction changes everything about how the file behaves on screen, in code, and on different devices.

What SVG Files Are Used For

SVG files cover 4 primary use cases on the web: icons, logos, data visualizations, and UI illustrations.

• Icons and navigation symbols in design systems
• Brand logos that render cleanly at every size
• Interactive charts built with D3.js
• Animated illustrations and loading states

SVG also supports animation via CSS and JavaScript, making it the format of choice for micro-interactions and motion in modern user interface design.

What Are the Different Ways to Make an SVG File?

There are 4 main methods for creating SVG files: vector design software, writing SVG code by hand, browser-based tools, and converting raster images through auto-tracing.

Which method works best depends entirely on your background, the complexity of the artwork, and how the file will be used in production.

For production web use, the most common workflow is: design in Illustrator or Figma, then run the exported file through SVGO to strip unnecessary code before deploying.

How to Make an SVG File in Adobe Illustrator

Adobe Illustrator produces SVG files through 3 export paths: File > Save As, File > Export > Export As, and File > Export > Export for Screens. For web use, Export As gives the most control over output quality.

Illustrator is the industry standard for complex vector artwork. The catch is that raw Illustrator SVG exports often contain embedded metadata, editor-specific attributes, and verbose path data that needs cleanup before production use.

Setting Up the Document for SVG Output

Color mode matters before you draw a single path. Set the document to RGB, not CMYK. SVG files intended for screen rendering follow the sRGB color profile, and CMYK values will shift on export.

• Document units: pixels
• Color mode: RGB (Document Color Mode menu)
• Artboard size: match the intended display dimensions

Set up artboards before drawing, not after. Resizing artboards after the artwork is built often leaves stray anchor points outside the artboard boundary, which inflates the SVG viewBox and file size.

Drawing and Preparing Artwork

Build shapes with the Pen tool, shape primitives (rectangle, ellipse, polygon), and the Pathfinder panel for Boolean path operations.

2 steps are required before any export:

• Expand all appearances (Object > Expand Appearance) to convert strokes and effects into filled paths
• Outline all text (Type > Create Outlines) to prevent font-rendering issues in browsers that don’t have the typeface installed

Skipping these steps is the most common reason SVG files look different in the browser than in Illustrator.

Exporting with the Right SVG Settings

Go to File > Export > Export As, choose SVG, then click Export. The SVG Options panel opens.

Recommended settings for web output:

• SVG Profile: SVG 1.1 (widest browser support)
• Styling: Presentation Attributes (places properties at element level, prevents CSS conflicts between multiple SVGs on the same page)
• Font: Convert to Outline (already done in prep, but this catches anything missed)
• Images: Embed (for standalone files) or Link (if rasters are referenced externally)
• Responsive: Checked (removes fixed width/height, adds viewBox for fluid scaling)
• Minify: Checked (removes whitespace and unnecessary characters)

The “Preserve Illustrator Editing Capabilities” checkbox adds substantial file bloat. Leave it unchecked for web-bound exports. Keep a separate .ai master file for re-editing.

How to Make an SVG File in Inkscape

Inkscape is a free, open-source vector editor whose native file format is SVG. Every file you create in Inkscape is already an SVG, which removes the export step that Illustrator requires.

The tradeoff is that Inkscape’s default save format, “Inkscape SVG,” embeds proprietary namespace data and editor metadata. For web use, that output needs to be saved as “Plain SVG” instead.

Drawing Paths and Shapes in Inkscape

Inkscape’s Bezier/Pen tool and Node editor cover most path drawing needs. The Boolean path operations (Union, Difference, Intersection, Exclusion) live under the Path menu.

Key difference from Illustrator: Inkscape uses a Node editor for direct path manipulation rather than Illustrator’s two-tool approach (Pen tool + Direct Selection). Most users find the Inkscape Node editor faster for editing existing paths.

The XML editor panel (Edit > XML Editor) lets you inspect and modify raw SVG markup directly inside Inkscape, which is useful when you need to add attributes or fix code without opening a separate text editor.

Saving as Plain SVG vs Inkscape SVG

This is the single most important decision when exporting from Inkscape for web use.

Use File > Save a Copy and select “Plain SVG (.svg)” to export a clean version while keeping your Inkscape SVG master intact. Running the Plain SVG output through SVGO afterward removes any remaining unnecessary attributes.

How to Make an SVG File in Figma

Figma exports SVG files directly from frames, groups, and individual vector layers. The format is set in the Export panel on the right sidebar, where you add an export setting, select SVG from the format dropdown, and click Export.

Figma uses vector networks rather than standard paths, which occasionally produces different fill-rule behavior from what Illustrator and Inkscape generate. This matters most for complex shapes with overlapping paths.

Building Vector Shapes in Figma

Figma’s Pen tool creates vector paths with anchor points and handles. The Flatten Selection command (Ctrl/Cmd + E) merges multiple vector layers into a single compound path before export, which reduces node count and simplifies the SVG output.

3 things to do before exporting:

• Flatten vector layers that don’t need to stay separate
• Remove effects (drop shadows, blurs) that Figma cannot convert cleanly to SVG, or accept that they’ll be rasterized
• Outline text if the SVG will be used outside Figma’s rendering environment

Figma’s icon export workflow is genuinely fast once set up. At foundit, implementing a proper Figma SVG export process reduced icon file sizes by nearly 60% (Medium, 2023).

Exporting Clean SVG Files from Figma

Figma exports SVG at 1x by default. For most icon and UI asset work, 1x is correct since SVG is resolution-independent and the scale setting only affects raster fallbacks.

Frame export vs element export produces different output:

• Frame export: Includes the frame’s background rectangle as a path in the SVG, which is usually unwanted for icons
• Element export: Exports only the selected layer, producing cleaner output for icon work

Figma’s built-in SVG Export plugin (community plugin) uses SVGO under the hood and lets you assign optimization presets to specific components, which makes icon library exports consistent across a full design system.

How to Write an SVG File by Hand in Code

An SVG file is a plain text file written in XML. Every SVG file starts with an <svg> element that defines the coordinate space, and every shape inside it is described using XML elements and attributes.

Hand-coding SVG is the cleanest approach for simple shapes and icons because there’s no editor metadata, no unnecessary attributes, and no post-export cleanup required. It’s also the method that builds the clearest understanding of how the format actually works.

SVG File Structure and the viewBox Attribute

A minimal SVG file looks like this:

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

The viewBox attribute defines the internal coordinate system as four values: min-x min-y width height. Setting viewBox=”0 0 100 100″ creates a 100x100 unit canvas. The SVG scales to fill whatever container it sits in, because no fixed width or height attribute is set.

Remove fixed width and height attributes from the tag when using SVG in responsive design contexts. The viewBox alone handles scaling correctly.

Core SVG Shape Elements

SVG provides 7 basic shape elements: , , , , , , and .

• : Requires x, y, width, height. Add rx for rounded corners.

• : Requires cx (center x), cy (center y), r (radius).

• : The most powerful element. Draws any shape using the d attribute with path commands.

Fill and stroke are set as attributes directly on each element: fill=”red”, stroke=”black”, stroke-width=”2″. They can also be set via CSS when the SVG is inline in HTML.

Writing Path Data with the </code>d<code> Attribute

The d attribute in uses a sequence of commands to draw lines, curves, and arcs. 5 commands cover the majority of practical path drawing:

• M x y — Move to a point (starts a new subpath)
• L x y — Draw a straight line to a point
• C x1 y1 x2 y2 x y — Cubic Bezier curve to a point
• Z — Close the path (draws a line back to the start)
• H x / V y — Horizontal or vertical line shorthand

Lowercase versions of these commands (m, l, c, z) use relative coordinates from the current position. Uppercase uses absolute coordinates from the SVG origin. VS Code with the SVG Preview extension renders the file in a side panel as you type, which makes hand-coding practical without constant browser switching.

How to Make an SVG File Using Browser-Based Tools

Browser-based SVG creation tools require no installation, no software license, and no local file management. 3 tools cover most use cases: Vectr, SVGator, and Method Draw.

These tools work well for straightforward shapes, simple icons, and quick edits. They are not substitutes for Illustrator or Inkscape when the artwork is complex or when precise path control is needed.

Vectr, SVGator, and Method Draw Compared

Vectr: General-purpose vector editor that runs in the browser. Good for logos, simple illustrations, and shapes. Exports clean SVG with minimal extra markup. Free with no file limits.

SVGator: Specialized for SVG animation. You build the shape, set keyframes, and export an animated SVG file with embedded CSS or JavaScript. Useful for loading spinners, animated icons, and micro-interactions without writing animation code by hand. Free tier covers basic animations.

Method Draw: A lightweight browser-based SVG editor built on top of SVG-Edit. Minimal interface, fast to open, no account needed. Best for quick shape edits or when you need to modify an existing SVG file without installing software.

When Browser Tools Make Sense

They are a practical choice in 3 specific situations:

• Quick one-off icons where installing Inkscape isn’t justified
• Animated SVG output (SVGator specifically)
• Editing an SVG file on a machine without design software installed

The main limitation across all 3 tools is path control. Boolean operations, node-level editing, and complex Bezier curve adjustment are either missing or significantly more limited than in desktop software. For anything beyond simple geometric shapes, the friction of working around those limitations usually outweighs the convenience of not installing a desktop tool.

How to Convert a Raster Image to SVG

Raster-to-vector conversion uses auto-tracing algorithms to detect edges and color regions in a pixel image and reconstruct them as SVG paths. The output is not a true vector drawing in the same sense as a hand-built Illustrator file. It is a traced approximation.

Auto-traced SVGs work well for simple logos, flat icons, and two-tone artwork. They tend to produce cluttered, unusable path data from photographs or anything with gradients, texture, or photographic detail.

Auto-Tracing in Adobe Illustrator

Image Trace is Illustrator’s built-in raster-to-vector tool. Access it via Object > Image Trace > Make, or through the Image Trace panel for full control.

The most useful presets for logo and icon work:

• 16 Colors: good starting point for flat brand artwork
• Black and White Logo: clean output for single-color icon tracing
• High Fidelity Photo: more paths, more cleanup needed

After tracing, go to Object > Expand to convert the trace result into editable vector paths. Always manually clean up nodes after expanding. Auto-traced logos from JPG sources often have 10x more anchor points than a hand-drawn version of the same shape.

Auto-Tracing in Inkscape

Inkscape’s tool is called Trace Bitmap. Path > Trace Bitmap opens it.

2 main modes:

• Brightness cutoff: Converts to black-and-white based on pixel brightness. Fast, clean for silhouettes.
• Colors: Multi-color tracing. More paths, more cleanup required.

Inkscape’s Trace Bitmap is free and produces comparable output to Illustrator’s Image Trace for simple artwork. For professional-grade results on complex logos, Vector Magic produces noticeably cleaner path geometry with fewer stray nodes.

When Converted SVGs Need Manual Cleanup

Auto-tracing always requires review before production use.

4 signs the trace needs manual work:

• Visible jagged edges where curves should be smooth
• Hundreds of unnecessary anchor points on a simple shape
• Colors that don’t match the original due to posterization artifacts
• Overlapping filled paths creating visual stacking artifacts

Use Illustrator’s Simplify tool (Object > Path > Simplify) to reduce node count after tracing. A well-simplified logo trace should have no more than 20-40 anchor points for a typical icon-scale shape.

How to Optimize an SVG File After Creation

Every SVG exported from design software contains code that serves no purpose in a browser. SVGO is the standard tool for removing that dead weight, and it works on files from any source.

LogRocket analysis found SVGO reduced file sizes by an average of 54.8% across a set of Sketch-exported SVG icons, with some files shrinking by up to 90%.

What SVGO Removes from SVG Files

SVGO applies a plugin-based optimization pass over the SVG’s XML structure.

Default removals include: editor namespace declarations, hidden elements, empty groups, comments, redundant attribute values, and excessive decimal precision in path coordinates.

For most exported SVGs, the default SVGO preset reduces file size by 30-60% with no visible rendering change (iamvector.com research, 2026).

One thing to watch: SVGO’s removeViewBox plugin is enabled by default in some configurations. Disable it. Removing the viewBox breaks responsive scaling in fluid layouts.

SVGOMG as a Browser-Based SVGO Interface

SVGOMG is Jake Archibald’s web interface for SVGO. It runs at jakearchibald.github.io/svgomg.

Why it’s worth using over the command line for one-off files:

• Side-by-side preview of original vs optimized output
• Toggle each plugin on or off and see the result immediately
• Works offline via Service Workers
• No file is uploaded to a server, everything runs in the browser

For production workflows with many SVG files, SVGO integrates into build pipelines via npm. A single svgo -f ./icons -o ./optimized command processes an entire directory.

How to Use an SVG File on a Website

There are 3 methods for embedding SVG in HTML: the tag, inline SVG, and CSS background-image. Each has different implications for CSS control, caching, and DOM size.

Choosing the wrong method for the use case causes real problems. Inline SVG added to every page doubles DOM size for repeat visitors who could have cached an external file instead.

Inline SVG vs External SVG File

For icons used across multiple pages, the tag or SVG sprites win on performance because the file caches after the first load. For icons that change color on hover or need JavaScript interaction, inline SVG is the only option that works reliably across all browsers.

SVG Sprites with the </code><use><code> Element

SVG sprites consolidate multiple icons into one file. A hidden block at the top of the HTML defines each icon as a . Individual icons are then referenced anywhere on the page with:

` <svg><use href="#icon-name"></use></svg> `

3 advantages over individual icon files:

• Single HTTP request for the entire icon set
• CSS styling applies to all instances of each symbol
• Icons remain scalable and accessible

GitHub uses an inline SVG sprite system for its icon set, allowing consistent icon rendering and CSS color theming across the entire platform from a single source file.

What Makes an SVG File High Quality?

A high-quality SVG file renders correctly at any size, loads fast, stays maintainable in code, and causes no browser compatibility issues. Most production SVG problems trace back to 5 structural issues that are preventable at creation time.

Clean Path Data and Correct viewBox Dimensions

Path quality directly affects file size, rendering smoothness, and editability.

Clean path data means:

• No redundant anchor points on straight lines
• Cubic Bezier handles aligned to create smooth, intentional curves
• No stray points outside the artboard boundary

The viewBox must match the actual artwork bounds. A viewBox=”0 0 24 24″ icon that has a shape extending to coordinate 26 will be clipped in browsers that respect the viewBox boundary strictly. Check this in browser DevTools before deploying.

File Size, Embedded Rasters, and Naming

For web icons and UI illustrations, keep SVG file size under 10KB after SVGO optimization. Anything larger for a simple icon usually means embedded raster images or unconverted effects are inflating the file.

2 things that reliably break SVG file size targets:

• A rasterized drop shadow or blur effect embedded as a PNG inside the SVG
• Unconverted text nodes that reference a web font the SVG can’t load independently

Use consistent group IDs and descriptive layer names before exporting from any design tool. Those names carry through into the SVG markup as id attributes, which makes the file significantly easier to maintain when it needs editing later in a code editor.

What Are Common SVG File Problems and How to Fix Them?

SVG problems tend to cluster around 5 predictable failure points: blank display, cross-browser rendering differences, broken text, oversized files, and wrong colors.

Most of these are caused at the creation or export stage, not the embedding stage. Fixing them at the source is faster than debugging after deployment.

SVG Displays as Blank or Clipped

A blank SVG is almost always a viewBox or dimension issue.

3 causes to check in this order:

• Missing viewBox: The SVG has fixed width=”0″ or height=”0″ attributes from the export

• viewBox offset: Artwork was built at coordinates like (50, 50) instead of starting at (0, 0)
• Container has no dimensions: Inline SVG with no viewBox inside a container with no explicit size collapses to zero

Open the SVG in a text editor and confirm the tag has a valid viewBox attribute and no explicit width=”0″ or height=”0″.

SVG Looks Different Across Browsers

Cross-browser compatibility issues with SVG are less common than they were pre-2020, but CSS filter effects and certain gradient configurations still behave differently between Chrome, Firefox, and Safari.

WebAIM data from 2024 shows 95.9% of websites have at least one detectable rendering or accessibility failure, many of which involve CSS applied to SVG elements.

Most common cross-browser SVG issues:

• CSS filters (drop-shadow, blur) rendering differently in Safari
• Gradient color stops shifting due to different color space handling
• currentColor not inheriting correctly when SVG is loaded via rather than inline

SVG Text Not Rendering Correctly

Text in SVG files relies on the font being available in the rendering environment. An SVG embedded via cannot load external fonts, so any element falls back to the system default typeface.

The fix is simple: outline all text before export. In Illustrator, Type > Create Outlines converts every character to a filled vector path. In Inkscape, Path > Object to Path does the same. After outlining, there are no font dependencies, and the SVG text renders identically in every browser and every embedding method.

SVG File Too Large

A large SVG after optimization almost always contains one of 3 things:

• An embedded raster image (PNG or JPG data encoded as base64 inside the SVG)
• Overly complex auto-traced paths with thousands of nodes
• Duplicate path data that SVGO’s mergePaths plugin didn't consolidate

Open the raw SVG in a text editor and search for data:image/png or data:image/jpeg. That string confirms an embedded raster. Remove or replace the raster effect with a native SVG equivalent, then re-optimize.

Colors Wrong After Export

Color shifts on SVG export come from one source in nearly every case: the document was built in CMYK color mode instead of RGB.

SVG files use sRGB for color rendering. A CMYK document converts colors to RGB at export using Illustrator’s conversion tables, which rarely match the original CMYK values visually. Set documents to RGB mode (Document Color Mode > RGB Color in Illustrator) before building any artwork intended for SVG output. Changing color mode after the artwork is built often shifts existing colors, so set it at document creation.

For SVG files used across both print and screen, maintain 2 separate source files: one CMYK .ai for print output and one RGB for SVG in HTML delivery.

FAQ on How To Make SVG Files

What software do I need to make an SVG file?

You can make SVG files in Adobe Illustrator, Inkscape, or Figma. Free options like Inkscape and browser-based tools such as Vectr and Method Draw work well for basic vector artwork. No paid software is required to get started.

Can I make an SVG file from scratch without design software?

Yes. SVG is XML-based, so you can write one by hand in any text editor. Open VS Code, create a file with an .svg extension, and write standard SVG markup using elements like , , and .

How do I convert a PNG to SVG?

Use auto-tracing tools such as Illustrator’s Image Trace, Inkscape’s Trace Bitmap, or Vector Magic. These tools work best on flat logos and icons. Photos and complex images produce messy path data that needs significant manual cleanup.

What is the viewBox attribute in an SVG file?

The viewBox defines the SVG’s internal coordinate system as four values: min-x, min-y, width, and height. It allows the graphic to scale fluidly inside any container. Without it, the SVG won’t resize correctly in responsive layouts.

How do I export an SVG file from Figma?

Select the layer or frame, go to the Export panel in the right sidebar, click the plus icon, and choose SVG from the format dropdown. Click Export. Flatten vector layers and remove unsupported effects before exporting for the cleanest SVG output.

How do I reduce SVG file size?

Run the file through SVGO or its browser-based interface, SVGOMG. Both strip editor metadata, empty groups, redundant attributes, and excessive decimal precision. Typical file size reduction is 30-60% with no visible quality loss (iamvector.com, 2026).

What is the difference between SVG and PNG?

SVG stores shapes as mathematical paths and scales to any size without quality loss. PNG stores pixel data and degrades when enlarged. SVG files are also editable in code. For icons and logos, SVG is the better choice over PNG.

How do I use an SVG file on a website?

There are 3 options: inline SVG directly in HTML, an tag referencing the file, or CSS background-image. Inline SVG gives full CSS and JavaScript control. The tag enables browser caching. Choose based on whether the icon needs interactivity.

Why is my SVG file showing as blank?

A blank SVG almost always means a missing or incorrect viewBox attribute, or the artwork was built at coordinates that don’t start at (0, 0). Open the file in a text editor and check the opening tag for valid viewBox values.

Can I animate an SVG file with CSS?

Yes, when SVG is inline in HTML you can target individual elements with CSS selectors and CSS keyframes. Path transitions, color changes, and transforms all work natively. SVGator is also a browser-based tool that generates animated SVG files without writing animation code manually.

Conclusion

This conclusion is for an article presenting every practical method for making SVG files, from vector design software to hand-coded XML path data.

The right approach depends on your workflow. Designers reach for Illustrator or Figma. Developers often prefer writing SVG markup directly. Both produce clean, scalable vector graphics when the export settings and file structure are correct.

Whatever tool you use, SVG optimization is never optional. Running output through SVGO before deployment keeps file size under control and removes editor metadata that serves no purpose in a browser.

Get the viewBox attribute right, outline your text, and choose the correct embedding method for your use case. Do those 3 things consistently and your SVG files will render correctly everywhere, at any size, without issues.