What Is SVG? The Text-Based Image Format
The image format that stores a picture as shapes written in text, so it stays sharp at any size. What's inside an SVG, what it's for, and where it gets refused.
SVG (Scalable Vector Graphics) is an image format that describes a picture as shapes and lines written in text, instead of storing a grid of coloured pixels. It is an open web standard from the W3C, and because the image is a set of drawing instructions rather than a fixed grid, it stays sharp at any size.
Open an SVG in a plain text editor and you can read it: a <circle> here, a <path> there, each with coordinates and a colour. That markup is the entire file. A browser reads the instructions and draws the result on the spot, which is why one small SVG looks crisp as a 16px favicon and again as a wall-sized banner.
What is actually inside an SVG file
An SVG is XML - the same kind of angle-bracket markup as HTML. The W3C defines it as a language for describing two-dimensional vector graphics in XML, and that is literally what the file is: tags like <rect>, <circle>, <path>, and <text>, each carrying numbers that say where to draw and what colour to use.
Because it is text, an SVG opens in two very different kinds of program. A vector editor like Inkscape, Illustrator, or Figma shows you the shapes on a canvas; a code editor shows you the tags. Both are editing the same file. An SVG can also hold gradients, CSS styling, embedded raster images, and even scripts - it is closer to a tiny web page than to a photo. The reason a vector never turns blocky when you enlarge it is the subject of raster vs vector; the short version is that instructions have no fixed size, so the browser re-draws them at whatever size you ask for.
What SVG is good for
SVG suits anything built from shapes: logos, icons, UI symbols, charts, and flat illustration. One file scales to every screen, so a logo never needs re-exporting for a bigger display; the file is usually tiny; and on the web it can be styled and animated with CSS. Designers keep the SVG as the master because any PNG or JPG can be regenerated from it, but not the other way around.
Where SVG does not work
SVG cannot sensibly hold a photograph. A photo is millions of unpredictable pixels with no shapes to describe, so there is nothing for the vector instructions to encode - the honest tools for that are PNG and JPG. If you are weighing the two for a given image, SVG vs PNG walks through the choice.
The other snag is acceptance. Plenty of upload forms, social platforms, and print shops still refuse SVG files. When one blocks yours, rasterise it: SVG to PNG keeps transparency and lets you set the export width (the height follows to hold the proportions), and SVG to JPG flattens it onto a white background for places that only take JPG. Both tools take an SVG file and run entirely in your browser - the file is never uploaded.
Browser support and one security note
Every current browser renders SVG natively - it has been a W3C Recommendation since 2001, with SVG 1.1 finalised in 2011, so support is not something you have to check the way you might for a newer format.
The catch is worth knowing if you handle SVGs from other people. When an SVG is loaded through an <img> tag or as a CSS background image, the browser runs it in a locked-down mode: scripts inside the file do not execute and external references do not load. That makes an SVG safe to display as an image. Pasting an SVG's markup directly into your page (inline SVG) does not get that sandbox, so its scripts can run - only inline SVGs you trust.
FAQ
Is SVG better than PNG? Neither is better; they hold different kinds of image. SVG wins for logos and icons that must scale, PNG wins for photos, screenshots, and anywhere SVG is refused. SVG vs PNG covers the full split.
Can I turn a photo into an SVG? Not usefully. There are no shapes in a photograph to describe, so a "photo to SVG" either embeds the original pixels unchanged or produces a blotchy trace. Keep photos as raster.
Are SVG files always smaller? For flat art with a handful of shapes, yes - often a fraction of a KB. For anything photographic there is nothing to gain, and the file can end up larger.
Can an SVG be animated? Yes. Inline in a page, an SVG can be animated with CSS or SMIL and scripted through the DOM. As a plain <img>, only CSS animations authored inside the file play, and scripts stay disabled.