SVG (Scalable Vector Graphics)
A text-based image format that draws shapes with math, so graphics stay razor-sharp at any size.
| Full name | Scalable Vector Graphics |
| Extension | .svg |
| MIME type | image/svg+xml |
| Developer | World Wide Web Consortium (W3C) |
| Released | 2001 (SVG 1.0 became a W3C Recommendation on 4 September 2001) |
| Type | Vector image |
| Based on | XML |
| Latest version | SVG 2 (W3C Recommendation) |
What is a SVG file?
SVG is an open, XML-based format for two-dimensional vector graphics. Because it stores shapes as mathematical descriptions rather than pixels, an SVG image looks crisp on a phone screen, a 4K monitor, or a billboard. The format is supported natively by every modern browser and most design tools.
An SVG file is a plain-text XML document that describes geometric shapes, paths, text, and effects. Instead of recording which color each pixel should be, it records instructions like 'draw a circle at these coordinates with this radius.' Rendering software follows those instructions at whatever size is needed, which is why the image never blurs when scaled up. SVG files can also include CSS styling, JavaScript interactivity, and embedded raster images.
History
The W3C issued a call for proposals for a web vector graphics format in 1996, which attracted six competing submissions from companies including Adobe, Macromedia, and Microsoft. The working group merged those proposals into a single specification, publishing the first Working Draft in 1999. SVG 1.0 became an official W3C Recommendation on 4 September 2001, and SVG 1.1 followed in January 2003; the W3C SVG Working Group continues to maintain the format today.
How it works
An SVG document opens with an XML declaration and an `<svg>` root element that sets the viewport dimensions and namespace. Inside, shape elements such as `<rect>`, `<circle>`, `<ellipse>`, `<line>`, `<polyline>`, `<polygon>`, and `<path>` define the graphics. The `<path>` element is the most powerful, using a compact command syntax (M for moveto, L for lineto, C for curveto, and so on) to trace any outline. Elements can be grouped with `<g>`, reused with `<use>`, and styled with inline attributes or an embedded `<style>` block.
What it is used for
- Website logos and icons that must look sharp on both standard and high-density (Retina) displays
- Data visualizations such as charts, graphs, and maps where individual elements need hover or click interactions
- Illustrations and diagrams in print or digital publications that may be reproduced at many sizes
- Animated UI elements, loading spinners, and interactive infographics driven by CSS or JavaScript
How to open it
Any modern web browser (Chrome, Firefox, Safari, Edge) opens SVG files directly and renders them as images. Desktop design tools including Adobe Illustrator, Inkscape, Affinity Designer, and Figma can open and edit the underlying shapes.
Pros and cons
Strengths
- Resolution-independent: scales from a 16px favicon to a large banner without any quality loss
- Small file size for simple graphics compared to an equivalent PNG or JPEG
- Fully editable in a text editor and searchable by web crawlers because the content is plain XML
- Supports CSS animation and JavaScript interaction, making elements clickable or animated without extra plugins
Trade-offs
- Not suited for photographs or complex raster imagery where formats like JPEG or WebP perform far better
- Complex SVGs with thousands of nodes can be slow to render and result in large file sizes
- Older software and some email clients do not support SVG, requiring a fallback image
- Hand-editing the XML is straightforward for simple shapes but quickly becomes tedious for intricate artwork
Convert SVG files
Free, in your browser, no signup. Start at the SVG converter, or jump straight to a popular conversion below.
From SVG
Curious how fast and how small? See our measured conversion benchmarks.
SVG FAQ
Can I use an SVG file on a website?
Yes. You can embed SVG directly in HTML using an `<img>` tag, an inline `<svg>` block, or a CSS background-image. All current browsers render it natively.
What is the difference between SVG and PNG?
PNG stores a fixed grid of pixels, so it blurs when enlarged. SVG stores geometric descriptions, so it scales to any size without quality loss. PNG is better for photos; SVG is better for logos, icons, and illustrations.
How do I convert an SVG to PNG or JPEG?
You can use an online converter, export from a design tool like Illustrator or Inkscape, or use a command-line tool like Inkscape CLI or ImageMagick. The converter on this site handles the conversion in seconds.
Why is my SVG file showing as a blank page?
The most common causes are a missing or incorrect `viewBox` attribute, shapes drawn outside the viewport, or a `width` and `height` of zero. Open the file in a text editor and check those attributes on the root `<svg>` element.