What Is SVG? The SVG File Format, Explained With an Example

You downloaded a logo, an icon or a cutting design, and the file ends in .svg. So what is SVG? In short, an SVG file is a picture stored as text. Where a photo file stores colored dots, an SVG stores instructions such as “draw a circle here, this big, in this color”. A program reads the instructions and draws the picture fresh every time, at any size you ask for. This guide shows what is inside an SVG file with a small example you can copy, what the format is good for, how to open and edit one, and how to get one.

What Is SVG?

SVG stands for Scalable Vector Graphics. The World Wide Web Consortium (W3C), the body that publishes web standards, defines it as a language for describing two-dimensional graphics. MDN, the web documentation site run by Mozilla, adds the practical part: it is a text-based, open web standard for images that can be rendered cleanly at any size.

Three words in the name carry the meaning.

• Scalable. The picture can be made larger or smaller without getting blurry.
• Vector. The picture is built from geometric shapes such as lines, curves and polygons, not from a grid of pixels.
• Graphics. It is for drawings. The W3C specification lists three kinds of objects an SVG can hold: vector shapes, images and text.

SVG Is Text, Not Pixels

Most image files you meet, such as JPG and PNG, are raster images: a grid of tiny colored squares. Enlarge one far enough and you see the squares. An SVG has no grid. It holds a description of shapes, and the description is just as exact at poster size as at icon size. Our guide to vector vs raster images covers that difference in depth, so this guide stays with SVG itself.

The File Extension and the Compressed Version

MDN describes two kinds of SVG file. A normal one is a text file containing SVG markup, with the extension .svg. Because some SVG files get very large, the specification also allows a gzip-compressed version, with the extension .svgz. Most of the time you will only meet .svg.

What Is Inside an SVG File

Here is a complete SVG file. It is six lines long.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120">
  <rect x="0" y="0" width="200" height="120" fill="#EAF2FB" />
  <circle cx="160" cy="32" r="16" fill="#F2A33A" />
  <path d="M 20 100 L 70 40 L 110 80 L 135 55 L 180 100 Z" fill="#2F5BEA" />
  <line x1="0" y1="100" x2="200" y2="100" stroke="#0F1B2D" stroke-width="4" />
</svg>

And here is what a browser draws from it. The picture below is that same markup placed in this page. We only added a label for screen readers and a display width.

To try it yourself, paste the six lines into a plain text editor, save the file as picture.svg and drag it into a browser window. MDN’s SVG tutorial starts the same way, with a short file you save and open in a browser.

The Root Element and the Namespace

Every SVG file is wrapped in one svg element, which MDN calls the root element. The xmlns attribute on it is the namespace. It tells the program reading the file that these tags are SVG and not some other kind of XML. MDN says an SVG must always bind the namespace correctly. In practice: keep that attribute exactly as it is.

The viewBox: Why the Picture Scales

The viewBox attribute is the reason an SVG can be any size. MDN describes its value as a list of four numbers: min-x, min-y, width and height. Our example says 0 0 200 120, which sets up a drawing area that starts at 0, 0 and is 200 units wide and 120 units tall.

Those units are not inches or pixels on your screen. They are the file’s own coordinate system. Every other number in the file, such as the circle’s center at 160, 32, is measured in it. When the picture is shown 400 pixels wide, each unit takes 2 pixels. At 2,000 pixels wide, each unit takes 10. The shapes keep their proportions, and the program redraws their edges cleanly at the new size.

Here is the same drawing at three widths. Nothing was re-saved or re-exported. It is one set of instructions, drawn three times.

Basic Shapes: rect, circle and line

The next lines are shapes, and MDN’s tutorial explains each one.

• rect draws a rectangle. x and y give the position of its top left corner, and width and height give its size. Ours covers the whole drawing area, so it works as a background.
• circle draws a circle. cx and cy give the position of the center and r is the radius. Ours is the sun at 160, 32 with a radius of 16.
• line takes the positions of two points, x1, y1 and x2, y2, and draws a straight line between them. Ours is the ground.

The Path: One Element for Any Shape

MDN calls path the most powerful element in SVG’s library of basic shapes, because it can create lines, curves and arcs. Its shape is defined by one attribute, d, which holds a series of commands. Each command is a letter followed by numbers.

Our path reads M 20 100 L 70 40 L 110 80 L 135 55 L 180 100 Z. In plain words:

1. M 20 100: move to the point 20, 100 without drawing. MDN calls this the Move To command.
2. L 70 40: draw a straight line to 70, 40. That is the first peak.
3. L 110 80, L 135 55, L 180 100: three more straight lines, down, up to a second peak, and down to the ground.
4. Z: close the path. MDN explains that this draws a straight line from the current position back to the start.

The result is a closed outline with five corners, filled with blue. Other letters draw curves, which is how logos and hand-drawn shapes are stored. MDN also notes that an uppercase letter means absolute coordinates and a lowercase letter means coordinates relative to the last point.

Fill, Stroke and Drawing Order

Two attributes set the color. According to MDN, fill sets the color inside the object and stroke sets the color of the line drawn around it, and stroke-width defines how wide that line is. Colors are written the same way as in web pages, for example as hex values.

The order of the lines matters. MDN states the rule: later elements are rendered on top of earlier ones. That is why the background rectangle comes first in our file and the ground line comes last.

What SVG Is Used For

MDN’s guide to image formats calls SVG ideal for user interface elements, icons, diagrams and other images that must be drawn accurately at different sizes. Here is where you will meet it.

Logos and Icons

A logo has to work on a business card, a website and a sign. One SVG file covers all three. For when to keep a PNG copy as well, see our comparison of SVG vs PNG, which covers logos, websites, file sizes and the cases where SVG is the wrong choice.

Charts and Diagrams

Charts are made of bars, lines, circles and text, which is exactly what SVG describes. Every chart on this site is drawn as SVG. The one below is an example.

If you download it and open the file in a text editor, you will find the same kinds of elements as in our small example: a path for each bar, lines for the grid and the axis, and text elements for the labels.

Cutting Machines and Office Documents

Cutting machines follow outlines, so their software works with vector files. Cricut’s help page says Design Space treats .svg files as vector images, which it describes as cut-ready images that upload as designed. We have only read Cricut’s page, so check the instructions for your own machine.

SVG also works in office software. Microsoft’s support site says Word, PowerPoint, Outlook and Excel for Microsoft 365 can insert and edit SVG files, and that you insert one the same way as any other picture.

Where SVG Does Not Fit

Photographs. A photo has no clean shapes to describe, only millions of slightly different pixels, so it belongs in a pixel format such as JPG or PNG.

SVG in HTML and on the Web

SVG was designed for the web. MDN says it is supported by all major browsers, and it lists several ways to put one on a page. Three cover almost every case.

• As a file in an image tag. The page points to logo.svg in an img element, the same way it would point to a PNG.
• Inline. The SVG markup is pasted straight into the HTML of the page. That is how the two pictures above are included in this guide.
• Opened directly. A browser can display an .svg file by itself, with no web page around it.

Because inline SVG is part of the page, it can be styled and changed like the rest of the page. The W3C specification says SVG content is styled with CSS and has a complete Document Object Model, which is the structure scripts use to change a page. This is what people mean when they search for what SVG is in HTML: a drawing the page can restyle, animate and react to, not a fixed picture.

How to Open an SVG File

You have three options, from the quickest to the most powerful.

In a Web Browser

Drag the file into a browser window, or right-click it and choose to open it with your browser. MDN confirms that SVG files can be displayed directly in the browser. This is the fastest way to see what a file contains.

In a Text Editor

Because a normal SVG file is text, any plain text editor can open it. You will see markup like our example. Wikipedia’s article on SVG notes that the files can be created and edited with text editors as well as with drawing programs. For small changes, such as swapping a color value, a text editor is enough: find the fill you want and type a new color.

In a Vector Editor

To reshape the drawing, use a vector graphics editor. Inkscape is a free and open source one, and its website says it uses the SVG file format as its main format. Wikipedia lists Adobe Illustrator and CorelDRAW among other vector editors that produce SVG. In an editor you click a shape and drag its points. You never touch the markup.

If the File Will Not Open

An .svg file that shows a blank page or an error is often incomplete. Open it in a text editor and check that it begins with an svg element, includes the xmlns attribute and ends with the closing tag. If the file ends in .svgz, it is the compressed kind: a text editor will show it as gibberish, because it is no longer plain text.

How to Get an SVG File

Draw It or Export It

The cleanest SVG files are made as vectors from the start: drawn in a vector editor, or exported from a program that already works with shapes. Our chart tools are an example. Each one has a Download SVG button that saves exactly what you see.

Desktop editors have their own route. In Inkscape, the Beginners’ Guide says to choose Plain SVG when you save a drawing for people who might not use Inkscape, and Inkscape SVG when you want to keep the data that only Inkscape uses. In Illustrator, Adobe’s help lists SVG among the formats under File > Export > Export for Screens.

Convert a PNG or JPG

If all you have is a pixel image, software can trace it, which means finding the edges of each colored area and turning them into paths. Wikipedia’s article on raster graphics makes the key point: when a raster image is vectorized, some information is lost. For a logo on a plain background, what is lost is mostly fuzz and the result can look cleaner than the original. For a photo, the result is a simplified picture.

We have three free tools for this, and each runs in your browser without uploading your image. Use the PNG to SVG converter for artwork with transparency, the JPG to SVG converter for JPGs with a solid background, and the image vectorizer when you want vector art from a picture. If you are not sure which one fits, the SVG converter page looks at your image and suggests one. To go the other way, SVG to PNG turns a vector file into pixels at the size you choose.

Is an SVG File Safe to Open?

An SVG is more than a picture format. Wikipedia’s article points out that SVG can include JavaScript, which can potentially lead to cross-site scripting, a kind of attack that runs someone else’s code in a web page. We did not find an official security guide to cite, so here is our own cautious advice: treat an SVG from a source you do not know the way you would treat any file that can carry code, and if you run a website, do not let strangers upload SVG files without cleaning them first.

The example in this guide contains only shapes. You can read every line of it and see that for yourself, which is one of the quiet advantages of a text format.

A Short History of SVG

According to MDN, SVG came about in 1999, after several competing formats had been submitted to the W3C. Wikipedia gives the key date: SVG 1.0 became a W3C Recommendation, the W3C’s term for a finished standard, on September 4, 2001, and SVG 1.1 followed on January 14, 2003. MDN describes SVG 2, a candidate recommendation since 2018, as the current standard.

Summary

SVG stands for Scalable Vector Graphics. An SVG file is text that describes shapes, so it stays sharp at any size. Inside, you will find a root svg element, a viewBox that sets up the coordinate system, basic shapes, and paths built from commands. It is the right format for logos, icons, charts and cutting designs, and the wrong one for photos. Open it in a browser to look, in a text editor to read, and in a vector editor to change. To make one from a picture you already have, start with the PNG to SVG tool.