What Is an SVG File? Scalable Vector Graphics, Explained Simply

SVG stands for Scalable Vector Graphics. It is an image format that stores drawing instructions — the mathematics of shapes, lines, and curves — instead of a grid of colored pixels. Because the image is re-drawn from those instructions every time it renders, an SVG stays perfectly sharp at any size: a 16px favicon and a billboard can come from the same file. It has been an open web standard since 2001, and today it is the default format for icons, logos, and interface graphics.

The fastest way to understand SVG is to see the one fact that makes it different from every photo format on your computer: an SVG is a text file you can read. Here is a complete, working check-circle icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="none"
          stroke="currentColor" stroke-width="2"/>
  <path d="M8 12l3 3 5-6" fill="none"
        stroke="currentColor" stroke-width="2"/>
</svg>

That is the entire file — about 200 bytes. It says: draw a circle centered at (12,12) with radius 10, then a checkmark path, both stroked in whatever color the surrounding text uses. Paste it into an HTML page or save it as check.svg and open it in a browser, and it renders at any size you ask for.

Why "Scalable" Is the Whole Point

A PNG or JPG is a fixed grid of pixels. Enlarge it and the software has to invent pixels that were never captured, which is why upscaled images go blurry. An SVG has no grid — the browser re-solves the math at whatever size the layout demands. That single property produces most of the format's superpowers:

• Infinitely sharp. One file covers every screen density, zoom level, and print size.
• Tiny for geometric artwork. An icon that would need multiple PNG exports often fits in under a kilobyte of SVG.
• Styleable with CSS. Fills, strokes, hover states, and dark mode can all be controlled from your stylesheet — currentColor lets an icon inherit the text color around it.
• Animatable. Every shape is a DOM element, so CSS keyframes work on the parts of the image.
• Readable by machines. Text inside an SVG stays real text — selectable, searchable, and accessible to screen readers when labeled properly.

SVG vs PNG vs JPG at a Glance

The formats are complements, not competitors — the full decision logic, including where icon fonts fit, is in our SVG vs PNG vs icon fonts comparison.

How to Open an SVG File

• Any web browser. Drag the file into a tab — Chrome, Firefox, Safari, and Edge all render SVG natively. This is the quickest way to just look at one.
• Any text or code editor. VS Code, Notepad, anything. You will see the XML markup itself, which is often exactly what you want for a quick color change.
• Vector editors. Inkscape (free), Adobe Illustrator, Figma, or Icora Studio open SVGs as editable shapes with draggable points and curves.

How to Edit One

There are two editing modes, and both are legitimate. Visual editing happens in a vector editor: you drag anchor points, bend curves with bezier handles, combine shapes with boolean operations. Text editing happens in a code editor: change fill="#000000" to your brand color, adjust a stroke width, swap a viewBox. Designers tend to live in the first mode and developers in the second, but the file is the same — Icora's Studio, for example, is a browser-based vector editor with pen and node tools, booleans, and path simplification, and what it saves is still plain SVG you can open in Notepad.

Where SVGs Come From

Four routes, in rough order of how often they happen in practice: drawn by hand in a vector editor; exported from a design tool like Figma or Illustrator; traced from a raster image — software infers the shapes hiding in the pixels, a process our PNG to SVG conversion guide walks through in detail; or generated by AI tools that output real vector paths rather than pictures, which we compared honestly in our AI icon generator roundup.

When Not to Use SVG

Photographs are the hard boundary. A photo is millions of unpredictable pixels, not shapes — "converting" one to SVG produces a huge file that looks worse than the JPG you started with. Extremely complex illustrations with thousands of paths can also render slower than a raster would. The rule of thumb: if the artwork was born as shapes, SVG; if it was captured by a camera, raster.

A last practical note: SVGs exported from design tools usually carry a payload of editor metadata and redundant precision that can be 10x the size of the actual artwork. Before shipping SVGs on a website, run them through the cleanup steps in our SVG optimization guide — 80% size reductions are routine.