What is an SVG file? How to open and use one

An SVG file is a picture stored as a description of shapes instead of a grid of pixels. SVG stands for Scalable Vector Graphics. Because the file says “a circle here, a curve from there to there, filled red” and not “these million pixels”, it can be drawn at any size without losing sharpness, and a simple drawing is only a few kilobytes.

It is an open standard from the W3C, the body behind HTML, first published in 2001. The file extension is .svg, and every modern web browser can show one.

What is inside

An SVG is a text file. Open one in a text editor and you can read it:

<svg xmlns="http://www.w3.org/2000/svg" width="100mm" height="100mm" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="gold"/>
  <path d="M30 60 Q50 80 70 60" fill="none" stroke="black" stroke-width="4"/>
</svg>

<svg> is the page. width and height give its real size; viewBox sets up the coordinates the shapes use.
<circle>, <rect> and <line> are basic shapes.
<path> is the workhorse: its d attribute is a list of drawing commands, such as M for move, L for line and C or Q for a curve.
fill and stroke colour the inside and the outline.
<g> groups shapes, which editors show as layers.

Paste that code into the SVG viewer and it draws a yellow disc with a smile. Change gold to tomato and the disc changes colour.

How to open an SVG file

To look at it: drag it into any web browser, or open it in the SVG viewer, which also lists its size and contents.
To edit it: use a vector editor. Inkscape is free; Adobe Illustrator, Affinity Designer, CorelDRAW and Figma all open SVG.
To cut it: upload it to Cricut Design Space, or open it in Silhouette Studio Designer Edition or above. The free Basic Edition of Silhouette Studio does not open SVG.
To engrave or cut with a laser: import it into LightBurn, xTool Creative Space or the Glowforge app.
To plot it: pen plotter software such as Inkscape with the AxiDraw extension draws the paths directly.

Photo viewers and older office software may not open SVG. Convert a copy with SVG to PNG for those.

What SVG files are used for

Websites: logos, icons and charts that stay sharp on every screen and load fast.
Cutting machines: the paths in the file are the lines the blade follows. “SVG cut file” means an SVG prepared for this.
Lasers and CNC: outlines to cut and score.
Pen plotters: every stroke the pen will draw.
Print: logos and illustrations that must scale from a pen to a banner.

SVG is the wrong tool for photographs. A photo has no shapes to describe, so it belongs in a pixel format such as JPG. Raster vs vector explains why.

How to make one

Draw it in a vector editor and save as SVG.
Convert a picture by tracing: image to SVG turns a PNG or JPG with clear shapes into paths.
Turn a photo into line art with the Plotcaster editor, which saves hatching, stippling and other drawing styles as SVG.
Download one. Our free SVG library has cut-ready files drawn by code.
Write it by hand or from a program, since it is only text.

Why an SVG sometimes opens at the wrong size

Sizes inside an SVG are often in unitless “user units”, and programs have disagreed about how big one is. Browsers, and Inkscape since version 0.92, treat a unit as 1/96 of an inch. Older Inkscape used 1/90. Illustrator uses 1/72. A file saved in one and opened in another can therefore arrive a quarter too small or a third too large.

Files that state real units on width and height, such as millimetres, together with a viewBox, avoid the problem, and most software then imports them at the intended size. If yours comes in wrong, set the width you want after importing; the proportions are always right.

Is an SVG file safe?

An SVG can contain a script, like a web page can, so an SVG from a stranger deserves the same care as a link from one. Browsers do not run scripts in an SVG that is shown as an image, which is how the SVG viewer displays it, and cutting and laser software ignores scripts entirely. This is also why many websites refuse SVG uploads.

Questions

Is SVG a vector or a raster format? Vector. It can embed a raster picture, but its own content is shapes.

Can I convert an SVG to PNG or JPG? Yes, at any pixel size: SVG to PNG, SVG to JPG.

Can I convert a PNG or JPG to SVG? Yes, by tracing it, which works best on logos and line art: PNG to SVG.

What is an SVGZ file? An SVG compressed with gzip, to make it smaller. Unzip it to get the plain SVG.

Is SVG better than PNG? For drawn artwork, yes. For photos, no. SVG vs PNG compares them.

What is an SVG file? How to open, make and use one