An SVG file is a text document written in XML. It stores shapes, paths and text instead of pixels, so it scales to any size and opens in a plain text editor.
Browser support stopped being a factor years ago. MDN Web Docs (updated October 2025) lists the svg element as widely available across browsers since July 2015.
What matters now is what you’re starting with. A blank canvas, an existing design, a flat bitmap and a few simple shapes each lead somewhere different.
Which Method Should You Use to Make an SVG File?
Go by what you already have. Nothing yet means a vector editor. A finished Figma frame only needs exporting. A flat PNG logo with no source file has to be traced, and a few simple shapes are often quicker to type out as code.
| Method | Best starting point | Typical tools | Where it breaks |
|---|---|---|---|
| Vector editor | New logos, icons, illustrations | Illustrator, Inkscape, Affinity Designer | Needs drawing skill |
| Design-tool export | Existing UI or brand frames | Figma, Sketch, Canva | Strokes and effects change on export |
| Image tracing | Flat PNG or JPG logos, line art | Image Trace, Trace Bitmap | Photos produce heavy, rough paths |
| Hand-coded markup | Simple shapes, charts, small icons | Visual Studio Code, a browser | Slow for complex artwork |
Tracing is the method people reach for first and regret most. Inkscape’s own documentation says its tracer does not aim to reproduce an exact duplicate of the source image, and that no autotracer can.
Photographs belong in a raster format. If you’re unsure which side of the line your file falls on, a look at how SVG and PNG differ settles it quickly.
A vector editor gives you clean paths and full control, but every curve is yours to draw. Exporting from a design tool is the fastest route once the design exists, even though the code picks up that tool’s quirks. Tracing is quick on flat artwork and needs cleanup afterward. On photos it simply fails.
Hand-written markup gives you tiny, readable files. It only makes sense for simple geometry.
Cost rarely decides it. Inkscape is free, and Figma’s export is available on any plan, according to its Help Center.
How to Make an SVG in Illustrator, Inkscape or Affinity Designer
The steps barely change from one program to the next. Only the menu names do.
- Set the artboard (the page, in Inkscape) to the size you need
- Build shapes, then refine curves by moving anchor points and bezier handles
- Group related shapes and name every layer
- Convert live text to outlines
- Save or export as SVG and check the result in a browser
Draw and organize the artwork
Anchor points drive both file size and curve quality. Fewer of them means smoother curves and shorter path data, so delete any that aren’t changing the shape.
Basic shapes beat hand-drawn paths wherever the design allows. If overlapping pieces share a color, merge them into one compound path. A short palette helps too, since every extra fill adds code.
Name layers after the IDs you want to see in the file later. Clean names pay off when you come back to editing SVG files by hand or through a script.
Save or export with the right SVG settings
In Illustrator, both File > Save As and File > Export > Export As open an SVG Options dialog. In either one, set fonts to convert to outlines, and tick responsive if the file will scale inside a web page. Minify and the other size controls sit in the Export As dialog, so tick minify there.
Decimal places trade precision for size. Lower values make a smaller file, and higher ones keep small outlined details accurate.
In Inkscape, choose File > Save As and pick Plain SVG for the widest compatibility. Inkscape SVG keeps editor-only data, which helps if you plan to keep working on the file in Inkscape.
Affinity Designer works the same way in practice. Pick SVG in the export dialog and tick Export text as curves, or convert text to curves first.
Live text is where this goes wrong. A viewer without the font shows a fallback typeface, and cutting software can reject the file outright.
How to Export SVG Files from Figma, Sketch and Canva
The button is the easy part. Select the layer, frame or group, add an export setting, choose SVG and export. The settings are where each tool bends the output.
Exporting from Figma
Click the plus in the Export section of the right sidebar, set the format to SVG, then export.
Outline text is on by default when a text layer is selected, so words become glyph shapes. Turn it off only if you need editable text, and accept the font dependency.
The Include “id” attribute option adds an id based on the layer name, which lets JavaScript and stylesheets target the element.
Simplify stroke exists because SVG supports only center strokes. Figma approximates inside and outside strokes so other systems render them correctly, and it is on by default for vector networks that carry such strokes.
Figma exports SVG at 1x only, per its Help Center, and it writes strokes as fills. Resize the file through width and height in code instead.
Exporting from Sketch
Sketch lists SVG next to PDF and EPS as its vector formats.
Make the layer exportable in the Inspector first, then pick SVG from the format menu.
Scale isn’t the lever for vector output. Sketch lets you adjust it for SVG layers, but it resets the scale to 1x when you switch from an image format to a vector one (unless you changed it before). Figma pins SVG at 1x outright, so in both tools you set the final size with width, height and viewBox.
Downloading from Canva
According to Canva’s Help Center, transparent SVG downloads are limited to paid plans, meaning Pro, Teams, Business, Education and Nonprofits.
Open Download, choose SVG as the file type, and switch on the Transparent background toggle if the logo has to sit on colored pages.
Photos placed inside a design stay raster images, so the file is only as vector as its contents.
How to Convert a PNG or JPG to SVG
This suits flat logos and line art. Photographs are a different story.
- Start with the cleanest, highest-contrast version of the image you have
- Import it into Illustrator (use Image Trace) or Inkscape (Path > Trace Bitmap, or Shift+Alt+B)
- Choose a mode and preview before committing
- Trace, then cut the node count: expand the trace in Illustrator, press Ctrl+L in Inkscape
- Delete the background and stray specks, then save as SVG
Whichever tool you use, the trace is the core of converting PNG files to SVG, and the mode you pick shapes the result.
Inkscape’s tracer descends from Peter Selinger’s Potrace library, per the Inkscape documentation, and it offers several modes. Brightness cutoff turns the image black and white at a threshold you set, while edge detection follows contrast edges and suits outlines. Color quantization splits the image by a chosen number of colors, which works for multicolor logos. Centerline tracing turns line drawings into strokes instead of filled shapes.
Online converters such as Vector Magic give you less control than a desktop tracer, so treat their output as a starting point.
Photographs and gradients are where tracing falls over.
Inkscape’s documentation warns that the more dark pixels the intermediate bitmap holds, the larger the path becomes. Cricut’s Help Center says images and gradients stop Design Space from building a separate layer for each shape and color.
A traced photo therefore fails twice, as a heavy file on the web and as an unusable file in cutting software.
How to Write an SVG File by Hand
Write an svg root element, put shapes inside it, and save the file with the .svg extension. Any text editor works, and Visual Studio Code with a browser preview open beside it is a comfortable setup.
File structure and namespace
MDN Web Docs requires the xmlns attribute on the outermost svg element of a standalone SVG document.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#1a73e8" />
</svg>Because the format follows XML syntax, every tag closes and every attribute value sits in quotes.
MDN also advises leaving out a doctype declaration, and notes that the version and baseProfile attributes are deprecated in SVG 2.
Servers deliver the file as image/svg+xml, and .svgz marks the gzip-compressed variant.
Shapes and path data
Later elements paint on top of earlier ones, so order the markup from back to front.
The basic shapes are rect, circle, ellipse, line, polyline and polygon, each defined by position, size or coordinate attributes. A path can describe any shape at all through its d attribute, and text gives you live text that depends on installed fonts. For organizing, g groups elements, defs stores reusable definitions, and use places a copy of one.
Path data is a string of commands. M moves the pen, L draws a straight line, C draws a cubic bezier curve, and Z closes the shape.
<path d="M10 10 L90 10 L50 80 Z" fill="#e8710a" />For anything past a handful of shapes, I’d stop writing paths by hand and draw them in an editor.
Sizing with width, height and viewBox
The viewBox defines the internal coordinate system as four numbers: min-x, min-y, width and height. Width and height set the displayed size, and both default to auto, per MDN.
With a viewBox in place, the drawing scales to whatever space the file is given, and the default preserveAspectRatio value of xMidYMid meet keeps it centered without distortion. Leave it out and nothing scales. The drawing keeps its original size, and a smaller frame just crops it.
Fill, stroke, gradients and CSS
Fill sets the interior color and stroke sets the outline, with stroke-width controlling the thickness in user units. A linearGradient or radialGradient lives in defs and is referenced as fill=”url(#id)”.
Classes let one style block color many shapes at once.
Ordinary CSS styling also reaches inline SVG, so hover colors and transitions work without extra markup.
Rules kept outside the file do not apply when the SVG loads through an img element, so write them inside the file for that case.
How to Prepare an SVG File for Cricut and Other Cutting Machines
Design Space reads an SVG as layers, one per color, and rejects anything it cannot sort that way. The steps below are all about avoiding that rejection.
- Build the artwork from closed shapes with flat color fills
- Convert text to outlines (Create Outlines in Illustrator, Convert to Curves in CorelDRAW, Object to Path in Inkscape)
- Merge any clipping paths into single shapes
- Embed linked SVG or DXF files, and remove any other linked or embedded raster images
- Keep one color per intended cut layer, then export as SVG
- In Design Space, choose Upload, select the file, name it and save
Cricut’s Help Center ties its unsupported-items error to editable text, clipping paths, linked images, pattern fills and embedded non-vector images. Editor-side fixes exist for the first three. The last two call for a raster upload.
Editable text gets converted to outlines before you export.
Clipping paths can be flattened into one shape, which Illustrator’s Pathfinder panel does when the result is a flat color. A clip over an image or a non-flat fill cannot be flattened this way.
Linked images should be embedded, or the link broken in CorelDRAW. That only helps for linked SVG or DXF files, though. Other linked formats call for a raster upload.
Cricut counts any fill that is not a flat color as a pattern fill, so gradients, textures and photos all trigger the error.
A raster image placed inside the SVG triggers it as well, and there is no vector fix for that one.
An SVG text element looks fine on screen and still fails the upload. Open the layers panel and hunt for stray text objects before you export.
When a design cannot be flattened, Cricut’s own fallback is a raster upload (JPG, BMP, GIF or PNG). Exporting the design as PNG and using Print Then Cut works, but the file arrives as one object without per-color layers.
How to Reduce SVG File Size
Run the exported file through SVGO. According to the SVGO documentation, it strips what editors add and browsers never use, including editor metadata, comments, hidden elements and default values.
Most of the gain in SVG optimization comes from that cleanup, not from redrawing the artwork.
Run SVGO from the command line or SVGOMG
npm install -g svgo
svgo input.svg -o output.svgSVGO needs Node.js 16 or newer, per its documentation. SVGOMG is the browser interface listed on the SVGO site, handy when you want to switch plugins on and off and watch the result.
Keep the original export until you have checked the result in a browser.
What the default preset changes
The default preset removes the doctype, XML declaration, comments, metadata and editor-specific data. Hidden elements, useless defs and empty containers go too.
Path data gets rewritten and numeric values shortened. Basic shapes also become path elements, so hand-written markup stops being readable.
Settings that can damage the file
As of SVGO’s current documentation (2026), removeViewBox is not part of preset-default.
If you add removeViewBox by hand, the plugin’s own warning applies. The SVG stops scaling, so it will not fill its container and can clip when the container is small.
cleanupIds removes IDs that nothing inside the file references. It backs off when the file holds a script or style element, but hooks used from the page’s own code get no such protection, including the ids Figma writes through its id export setting.
removeDesc deletes only empty descriptions and editor attribution by default. SVGO notes that the desc element matters to assistive technology, and its removeAny parameter strips every one.
Compression on the server
SVG is plain text, so servers compress it well.
MDN’s server guidance for SVG includes a Vary: Accept-Encoding header, which is what a server sends when responses can be compressed. A .svgz file additionally needs Content-Encoding: gzip.
How to Embed an SVG in a Web Page
Use inline markup when CSS or JavaScript must reach the graphic, and an img element when the file is just a picture. Background images and object elements cover the cases between.
| Method | CSS and JS access | Caching | Best use |
|---|---|---|---|
| Inline svg | Page styles and scripts reach every element | Travels with the page | Icons, interactive graphics |
| img tag | Scripts disabled inside the file | Cached as its own file | Logos, illustrations |
| CSS background-image | None | Cached as its own file | Decorative patterns |
| object tag | File runs as its own document | Cached, fallback content allowed | Self-contained interactive graphics |
Inline markup means pasting the whole file into the page, which is the core of using SVG in HTML. The xmlns attribute that standalone files need is unnecessary there, per MDN, when the page uses HTML serialization.
MDN also notes that the limits placed on SVG used as an image, such as disabled scripts, do not apply to iframe, object or embed.
Accessibility depends on the method. An img element takes an alt attribute. Inline SVG has no alt, so add role=”img” and place a title element first inside the svg tag. Longer descriptions go in a desc element or through aria-labelledby.
Building accessible SVG files takes a few extra attributes, and MDN’s inline example shows each one.
Inline several SVGs from the same editor and identical IDs can collide, because every ID lives in one document. SVGO’s cleanupIds documentation warns that its predictable minifying produces clashing IDs across separately processed files, and it points to the prefixIds plugin as the fix.
Why Is an SVG Not Displaying Correctly, and When Do SVG Files Fall Short?
MDN calls server misconfiguration a very common reason for SVG failing to load. Firefox may show the markup as text or garbled output when the headers are wrong.
| Symptom | Likely cause | Fix |
|---|---|---|
| Browser shows markup as text or asks for an application | Server not sending image/svg+xml | Correct the Content-Type header |
| Standalone file shows as XML instead of a picture | No xmlns on the svg element | Add xmlns=”http://www.w3.org/2000/svg” |
| Drawing is cropped or ignores its container | No viewBox | Add a viewBox matching the artwork size |
| Wrong typeface | Live text, font not installed | Convert text to outlines |
| Gradients or styles swap between inline icons | Duplicate IDs | Prefix or rename the IDs |
When SVG is the wrong format
Some effects export poorly. Figma notes that background blurs must be applied to the layer directly before an SVG export.
Workflows that demand flat shapes only, such as cutting machines, reject gradients and live text on upload. And some platforms restrict SVG uploads as a precaution against embedded scripts.
Scripts in untrusted SVG files
Treat every SVG you did not make as code, not as a picture.
The file can carry JavaScript in a script element, and a visitor who opens an uploaded SVG directly can trigger it.
SVGO is a size tool, not a sanitizer. It ships a removeScripts plugin, but preset-default does not include it, so a default run leaves scripts in place.
Run user uploads through a dedicated sanitizer before you publish them.
Common Questions About SVG Files
What does SVG stand for?
The letters stand for Scalable Vector Graphics. Figma’s Help Center describes it as an XML-based vector format built from shapes defined by numeric values and coordinates, which is why it scales to any size without losing quality.
Which programs open an SVG file?
Browsers open SVG files directly, and MDN lists opening the file straight in a browser as one way to display SVG on the web. Vector editors such as Illustrator and Inkscape open them for editing, and any text editor shows the markup.
Can I edit an SVG file after I make it?
Yes. A vector editor changes the shapes visually, while a text editor changes the markup, since the file is XML.
Text converted to outlines is the exception. It stays as shapes, not editable text.
Does Google index SVG files?
Yes. Google Search Central lists SVG among the formats it supports for images referenced in the src attribute of an img element, next to BMP, GIF, JPEG, PNG, WebP and AVIF.
For inline svg elements, the same guidance points to a title element in place of alt text.
Can AI tools generate SVG files?
Yes. Adobe Firefly’s Text to vector turns a prompt into a vector graphic you can download as an .svg file, and Illustrator’s Text to Vector Graphic places editable vectors on their own layer.
Treat the result like any other export and check it in a browser.
What is the difference between SVG and PNG?
Figma’s Help Center notes that SVG scales to any size without quality loss. Under the hood it stores shapes as coordinates in XML.
PNG is a raster format, a grid of pixels with lossless compression.
Can I make an SVG online for free?
Yes. Figma runs in the browser and exports SVG on any plan, per its Help Center, and Inkscape is a free desktop editor.
Canva is the exception, since its Help Center ties transparent SVG downloads to paid plans.
Keeping SVG Files Consistent as the Library Grows
Consistent SVG files come from a shared setup rather than individual habits. Keep naming and export settings in one place, and put the cleanup rules right next to them.
Figma shows how far naming reaches. A layer called button/pill/default exports into nested folders named button and pill, with a file named default.
Naming comes first, since cleanup rules act on whatever the export produced.
- Name layers with slash paths in the source file
- Commit one svgo.config.js and pin the SVGO version, then spot-check a sample in a browser and in the target software
SVGO’s documentation warns that default plugins can differ when it runs through a wrapper such as SVGR, so two pipelines can return different files from one source.
As of October 2026, SVGO also publishes a v3 to v4 migration guide, so pinning the version trades newer defaults for repeatable output.
Consistent ids and class names also make animating SVG with CSS the natural next step.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- What is Backend in Web Development? - September 13, 2026
- What is Frontend Development? - September 11, 2026
- How to Make a Button in Figma: Design Best Practices - September 10, 2026
