What is an SVG?

SVG stands for Scalable Vector Graphics

SVG is an XML-based image format for two-dimensional vector graphics. Unlike raster formats such as PNG or JPEG that store images as a grid of pixels, an SVG file describes shapes, paths, and text using mathematical coordinates. This means SVG images can be scaled to any size without losing quality — they never become pixelated or blurry.

How SVG files work

An SVG file is a plain-text XML document. You can open one in any text editor and read or modify the code directly. Here is a simple example:

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="#7c3aed" />
  <rect x="60" y="60" width="80" height="80" rx="8" fill="#2563eb" opacity="0.7" />
</svg>

This code produces a purple circle with a semi-transparent blue rounded rectangle on top. Because the graphic is defined with coordinates rather than pixels, it renders crisply at any resolution — from a tiny favicon to a billboard.

Key characteristics of SVG

• Resolution-independent — SVG images look sharp on any screen, including high-DPI (Retina) displays.
• Small file size — Simple graphics are often much smaller as SVG files than equivalent PNGs.
• Editable with code — Because SVGs are text, they can be styled with CSS, animated with JavaScript, and manipulated in the DOM.
• Accessible — SVGs support titles, descriptions, and ARIA attributes, making graphics more accessible to screen readers.
• Web-native — Every modern browser supports SVG natively. No plugins required.

SVG vs raster images

Raster formats (PNG, JPEG, GIF, WebP) store images as a bitmap — a fixed grid of coloured pixels. When you enlarge a raster image beyond its original dimensions, it looks blurry. SVG files, on the other hand, store shapes as mathematical descriptions, so they scale infinitely.

Common uses for SVG

SVG is the preferred format for many types of web and UI graphics:

• Icons — Icon systems like Material Icons and Heroicons ship as SVG files.
• Logos — Company logos need to look sharp at every size, making SVG the natural choice.
• Illustrations — Flat and geometric illustrations are efficient and flexible as SVG.
• Charts and data visualisation — Libraries like D3.js render interactive charts using SVG.
• Animations — SVG elements can be animated with CSS transitions, SMIL, or JavaScript.
• UI components — Buttons, spinners, progress bars, and decorative elements often use inline SVG.

How to create and edit SVG files

You can create SVG files by hand-coding XML, but a visual SVG file editor makes the process much faster. Our free SVG editor lets you draw shapes, edit paths, and modify SVG code side by side — all in your browser with no installation required.

You can also import existing SVG files to modify them visually. Open a file, paste code from your clipboard, or drag and drop — every element becomes selectable and editable on the canvas and in the built-in SVG code editor.

Browser support

SVG is supported by all modern browsers: Chrome, Firefox, Safari, Edge, and Opera. Basic SVG support has been available since Internet Explorer 9. Today, SVG is one of the most widely supported image formats on the web.