Guide
What is an SVG file?
SVG stands for Scalable Vector Graphics. An SVG file describes an image with shapes and coordinates instead of pixels, so it stays sharp at any size.
What is an SVG file type
An SVG is a text file written in XML. Instead of storing the color of every pixel, it stores instructions: draw a circle here, a path through these points, fill it with this color. Your browser or editor reads those instructions and draws the image at whatever size it is displayed.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#C8F031"/>
</svg>That snippet is a complete SVG: a lime circle in a 100 by 100 unit area. Because it is text, an SVG can be opened in a code editor, searched, compressed and changed by hand.
SVG is an open standard of the World Wide Web Consortium, first published in 2001 (W3C). All modern browsers display it without plugins.
What is SVG file extension
SVG files use the .svg extension and the media type image/svg+xml. A compressed variant, .svgz, is the same file packed with gzip. Some cutting machine software and font tools also use SVG, but the format is the same.
What is SVG file format used for
- Logos and icons on websites and apps, because one file looks sharp on every screen density.
- Illustrations, charts and maps that need to be zoomed or printed large.
- Animations and interactive graphics, since each shape can be styled with CSS or changed with JavaScript.
- Cutting machines and laser cutters, which follow the outlines of the shapes.
- Favicons in modern browsers.
SVG is not a good fit for photos. A photo has continuous tones that would need millions of tiny shapes; JPG and WebP store it far more efficiently.
How to open SVG file
Any web browser opens an SVG: drag the file into a Chrome, Firefox, Safari or Edge window. To see the code next to the image, use our SVG viewer. To edit the drawing, use a vector editor such as Inkscape (free), Figma or Adobe Illustrator. On Windows, File Explorer can show SVG thumbnails with an extension; on a Mac, Quick Look previews them with the space bar.
SVG vs PNG
| SVG | PNG | |
|---|---|---|
| Made of | Shapes and coordinates | Pixels |
| Scaling | Sharp at any size | Blurry when enlarged |
| Transparency | Yes | Yes |
| Editable as text | Yes | No |
| Best for | Logos, icons, diagrams | Screenshots, detailed images, places that do not accept SVG |
You can go both ways: the PNG to SVG converter traces pixels into shapes, and the SVG to PNG converter renders shapes into pixels at the size you choose.