Images
What is SVG?
Short for Scalable Vector Graphics.
SVG is a text-based image format that describes shapes, paths and text mathematically, so it stays sharp at any size.
How it works
Instead of storing pixels, an SVG file lists drawing instructions: a circle here, a curve there, this text in that font and color. The display draws those instructions fresh at whatever size is needed, so edges stay crisp from a tiny icon to a large print.
SVG is well suited to icons, diagrams, charts and logos. It is plain XML, so it compresses well, can be edited as text and can be styled or animated with CSS on a web page. An SVG may also embed raster images, which retain their original resolution limits.
SVG vs PNG
Use SVG for flat, geometric artwork that must look sharp at many sizes. Use PNG for anything with photographic detail, and whenever the destination, such as a social profile or an upload form, doesn’t accept SVG. Converting SVG to PNG is easy and lossless at the chosen size; going the other way requires tracing.
A practical example
A circle described by an SVG path can be drawn cleanly on a phone icon and a billboard. Exporting it to PNG creates a raster image at one chosen pixel size.
What to watch out for
Converting a photograph to an SVG container doesn’t automatically trace it into vector shapes. SVG can also contain scripts and links, so handle untrusted files carefully.
Tools you can use
- Image Converter · Change an image from one format to another
- Favicon Generator · The whole icon set, plus the HTML to paste
- QR Code Generator · Static codes that never expire, checked before download
Go a little deeper
- How to make a favicon for your website
- How to make a QR code for a link
- How to put a QR code on a business card
- Do QR codes expire?
Common questions
Why won’t a website accept my SVG?
Many upload forms block SVG because it can contain scripts. Convert it to PNG at the size you need; the form will accept that.
Can I edit an SVG in a text editor?
Yes. SVG is XML, so colors, sizes and text can be changed by editing the code. Complex drawings are easier to handle in a vector editor.
What size should I export an SVG to PNG?
The largest size it will be displayed at, or twice that for high-density screens. For a 200-pixel logo on a website, export at 400 pixels wide.