What it is
SVG (Scalable Vector Graphics) is an open standard from the W3C, the organization that develops web standards. The first version became a W3C recommendation in 2001, and all current browsers display SVG.
Unlike JPG or PNG, an SVG file contains no grid of pixels. It is a text file, written in XML, that describes shapes: lines, curves, circles, text and fills. The browser or program draws these shapes at whatever size is needed. Enlarge an SVG ten times and the edges remain perfectly clean, because they are calculated again rather than stretched.
Strengths
- Sharp at any size. One file works for a 16 pixel icon and a large banner.
- Small for simple graphics. Logos and icons are often just a few kilobytes.
- Editable. Colors and shapes can be changed in a vector editor, or even in a text editor.
- Styleable on the web. On websites, SVG can be styled and animated with CSS.
Weaknesses
- Not for photos. Photos have no clear shapes, so they cannot be described efficiently as vectors.
- Not accepted everywhere. Many upload forms, social networks and some programs do not accept SVG. Because an SVG can contain scripts, many sites block SVG uploads for security reasons.
- External resources. An SVG can reference fonts or images stored elsewhere, which may not load in every situation.
- Complex files get heavy. Very detailed drawings can be slower to display than a PNG.
When to use it
Use SVG for logos, icons, diagrams and illustrations on websites, and keep it as the master file for your brand graphics. When you need a pixel image, for example for a social network, a document or an app that does not read SVG, export a PNG from the SVG at the size you need.
How to convert SVG
- SVG to PNG, JPG or WebP: the SVG to PNG converter renders SVG files at 1x, 2x, 4x or 8x of their own size, or at a custom width in pixels. PNG keeps transparency; JPG uses a background color. SVGs without a width and height are rendered at 1024 px. Fonts or images that the SVG loads from elsewhere may not appear, because of browser security rules.
- SVG to ICO: the PNG to ICO converter accepts SVG and creates a Windows or website icon with several sizes.
- SVG to favicon set: the favicon generator turns an SVG logo into every icon file a website needs, plus the HTML snippet.
All conversions run in your browser. The favicon guide explains how an SVG icon fits into a modern favicon set.
Frequently asked questions
Can I convert a PNG or JPG into SVG?
Not with these tools. Turning pixels into vectors requires tracing, which only works well for simple shapes. For logos, the best SVG is the original file from whoever designed it.
Why do some websites reject SVG uploads?
An SVG file can contain scripts and links, which makes it a security risk on sites that display user uploads. Converting it to PNG solves the problem.
What resolution should I use when converting SVG to PNG?
Use the largest size at which the image will be displayed, or twice that for sharp results on high-density screens. Because SVG is vector, a larger export never loses quality.