What is SVG? Vector images explained

Free to read · ConvertMango guides

Most image files are grids of coloured dots. SVG is different: it is a set of instructions for drawing. That one difference explains why a logo can be tiny and crisp as an SVG, and why a holiday photo should never be one. This guide uses a decision flow, so you can end up at the right format for your own file.

First, what an SVG actually is

MDN describes SVG as an XML-based markup language for two-dimensional vector graphics, a text-based, open web standard that it compares to what HTML is to text. The W3C has been developing it since 1999. Because it is text, an SVG can be opened in an ordinary text editor, searched, indexed and compressed, and the same MDN page notes it can be created with any text editor or drawing program.

A very small example, a red circle with a blue square on top, looks like this in the source:

<svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="50" fill="#e65028"/><rect x="40" y="40" width="40" height="40" fill="#1e5ac8"/></svg>

(The opening tag is shortened here. A standalone .svg file also declares an XML namespace on that tag.)

A raster format such as PNG or JPEG instead stores a colour for each pixel in a fixed grid. Make the grid bigger and the computer must guess the missing pixels; make an SVG bigger and the computer simply redraws the circle at the new size. MDN's phrase is that SVG renders at any size without loss of quality.

A small measurement

I wrote that shape as an SVG and compared it with PNG exports at three sizes, using Python's Pillow library. The shapes are flat, which is the best case for both formats, so this is an illustration and not a benchmark.

The SVG stayed the same size however large it was drawn, while the PNG grew with the pixel count. On this trivial shape the PNG at normal sizes is still small, so the practical gain comes from sharpness at any resolution rather than from file size. Complex artwork with thousands of shapes will have a much bigger SVG; I did not test that.

Decision flow: is SVG right for this image?

Step 1. Is it a photograph or a very detailed picture? If yes, stop: use JPEG, WebP or another raster format. web.dev says SVG is poor for complex scenes like photos because the markup can be "prohibitively high" and the result may not look photorealistic. MDN similarly says SVG is not generally useful for bitmap or photographic images.

Step 2. Is it made of simple shapes, lines or text outlines? Logos, icons, charts, diagrams and interface elements fit. MDN calls it ideal for user interface elements, icons and diagrams, and web.dev recommends it for simple shapes such as logos and icons, noting it stays sharp at every resolution and zoom level.

Step 3. Will it be displayed at several sizes, including large and high-density screens? Then SVG saves you making a set of PNGs. One file serves all sizes.

Step 4. Will the receiving place accept SVG? This is where many people get stuck. Social platforms, print shops, marketplaces, slide software and email clients vary in what they accept, and I did not verify any specific list, so check the upload instructions. If SVG is refused, export a PNG at the largest size you need.

Step 5. Does it need to contain readable text? web.dev advises not to use SVG to encode text for web pages; use web fonts instead. Text inside a logo is a different case, because it is usually converted to outlines so it displays the same everywhere. Keep the editable original.

What an SVG can do that a PNG cannot

MDN lists several abilities that come from SVG being a web standard rather than a flat picture:

• Styling with CSS, so colours can change with a theme or a hover state.
• Scripting through the DOM, so JavaScript can read and alter shapes.
• Animation, declaratively through SMIL.
• Filters, such as shadows and blur effects.

These need the SVG to be placed in the page in the right way, which brings us to the limits.

Limits worth knowing

Restrictions when used as an image. MDN's page on SVG as an image says that when an SVG is loaded through an img element or as a CSS background, JavaScript is disabled, external resources such as images and stylesheets are not loaded (data: URLs work), and native widget styling is turned off. The restrictions do not apply when the SVG is viewed directly or embedded with iframe, object or embed. So an interactive SVG that works when opened on its own can lose features inside a normal image tag.

Not for photos. Covered above.

Editing needs vector software or a text editor. You cannot retouch an SVG the way you retouch a photo. You change shapes and colours.

What to do when you need a raster copy

Plenty of places want a PNG or JPEG. The usual route is to export from your drawing program at the largest size you need, then convert from there. ConvertMango does not handle SVG files yet; SVG conversion is planned and not available. Once you have a PNG export, PNG to JPG makes a lighter copy for photo-only places (it fills transparent areas with white), and PNG to WebP makes a web copy that keeps transparency, in a browser that can export WebP. Both tools take one image at a time up to 50 MB and 40 megapixels, and run in your browser without uploading file contents to our conversion service.

Convert it now: PNG to WebP. If you are choosing between the two for a logo, read SVG vs PNG, and for how PNG stores pixels see what is PNG.

Frequently asked questions

Related tools

More guides

Sources

Plain-text references. Facts that could not be checked against a primary source were left out.

1. MDN Web Docs, 'SVG: Scalable Vector Graphics', https://developer.mozilla.org/en-US/docs/Web/SVG
2. MDN Web Docs, 'SVG as an image', https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image
3. MDN Web Docs, 'Image file type and format guide', https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types
4. web.dev, 'Choose the right image format', https://web.dev/articles/choose-the-right-image-format