What is an SVG file?

It is a text file you can read

Open an SVG in a text editor and you will find XML, not binary data. A circle is literally an element saying where its centre is and how wide it is. That is unusual for an image format and it is the source of most of SVG's advantages: it compresses well, it diffs cleanly in version control, and anything that can edit text can edit it.

It also means an SVG can be generated, templated or modified by a program without any image library involved — which is how icon systems, charts and data visualisations are usually built for the web.

How to open one

• To view: drag it into any browser tab — SVG has been natively supported everywhere for over a decade
• To edit as artwork: Figma, Adobe Illustrator, Inkscape (free) or Affinity Designer
• To edit as code: any text editor
• Photoshop can open one, but converts it to pixels on import, discarding the scalability

If double-clicking an SVG opens a code editor instead of a picture, nothing is wrong with the file — your system has simply associated the extension with a text program. Opening it in a browser will show the artwork.

What SVG is good at

• Logos and brand marks that must work from a favicon to a billboard
• Icons, where one file replaces a set of 1×, 2× and 3× exports
• Line art, diagrams and charts
• Cut files for Cricut, Silhouette and other cutting machines, which need paths rather than pixels
• Anything that needs to be recoloured, themed or animated after export

Where it falls down

SVG is a poor fit for photographs. A photo has no distinct shapes to describe, so representing one as vectors means approximating millions of subtly different pixels with thousands of overlapping paths — a file that is larger than the original, slower to render, and visibly stylised.

Very complex vector artwork can also become slow, because the browser genuinely redraws every shape. A traced illustration with tens of thousands of paths can stutter on a phone in a way a PNG of the same picture never would.

Are SVG files safe?

An SVG can contain scripts, event handlers and links to external resources, because it is XML rendered by the browser rather than inert pixel data. An SVG from an untrusted source is closer to a small web page than to a photograph, which is why some sites refuse SVG uploads.

Sanitising solves this: strip script and foreignObject elements, inline event handlers, and any href or url() pointing off-site. Every SVG produced here is sanitised before download.

For files you did not create, open them in a text editor first, or run them through a sanitiser. Artwork you exported yourself from a design tool carries no scripts to begin with.

Making one from an image you already have

You cannot convert a photograph into a true vector, but you can trace one. A tracer finds the boundaries between areas of colour and rebuilds them as paths. On a flat logo the result is often indistinguishable from the original; on a photograph it becomes a stylised, screen-printed interpretation.

The two settings that matter are the number of colours — fewer means simpler, cleaner shapes — and the detail level, which controls how closely the paths hug the original edges.

Frequently asked questions