SVG vs PNG

There are lots of image formats available for use on the web. Some are more widely used than others. SVG and PNG are two of the most popular image formats available for websites. They are very different from each other, and both have advantages and disadvantages. It can be difficult to know when to use each format type. In this post, we’ll explore SVG vs PNG to help you know when to use each format for your WordPress website.

What is SVG?

SVG stands for Scalable Vector Graphics. It’s an image file type that renders images from code. It supports transparency and animation. Let’s look a little closer at each element.

Scalable refers to the ability for the image to be resized without losing quality. This is a unique quality in that it looks sharp regardless of how large or small it’s scaled to.

Vector describes how the image is rendered. Rather than containing pixels, the SVG contains code that renders pixels in real-time. The code is written in XML to represent colors, lines, and shapes.

Graphics refers to the fact that the SVG is an image format. Although, it’s very different from the other popular image formats in that it uses vectors rather than pixels like the other formats.

The SVG format doesn’t work with WordPress without plugins. For more information about adding the SVG format to WordPress, see the article Using SVG in WordPress: A Beginner's Guide.

How to Create an SVG

SVGs are usually created with high-end graphics editors, such as Adobe Illustrator, Adobe Photoshop, and Sketch (as seen in the image above). There are many others for mobile devices. Each editor works slightly differently, with unique features, but most create the SVG with menu settings. Some only include the bare minimum of tools for SVG files. The better tools can be expensive or difficult to use.

To create an SVG with these apps, create an illustration or graphic, convert it to a vector, and then save it or export it as an SVG. The tools may be different from one app to another, but the process is similar.

You can also import an image in any file format and convert it to an SVG. When converting from a different format to SVG, you might lose some quality in the image. For the best conversion results, you’ll need to convert from a large file with lots of detail. The SVG will display fewer colors, so keep this in mind when converting a different format to SVG.

Pros and Cons of Using SVG

When to Use SVG

While SVGs are not ideal for every possible use of images on a website, there are times when using an SVG is the best option. They work best for simple graphical elements that don’t require a lot of colors, so they’re not ideal for photographs.

SVGs should be used for simpler graphics. They are great for logos, icons, buttons, graphics, illustrations, charts, graphs, diagrams, and graphical elements with small animations.

Since they scale well, they should be used where retina-ready and responsive graphics are needed the most. They should also be used where simple responsive animations are needed.

What is PNG?

PNG stands for Portable Network Graphics. It’s an older format and it’s the second most common image file type after JPEG. PNG is a raster file type, so it’s made up of pixels. It is similar to most of the common image formats where the image quality depends on the resolution. It supports large color palettes. Most users that have dealt with images online have used PNG files. Let’s look closer at each element.

Portable means that it’s small and easy to use on any platform or device.

Network means that it’s designed to work across networks and the web.

Graphics refers to the fact that it’s an image file. It’s such a popular file type that almost any image editor can work with PNG files.

If though the PNG format is the second most popular after the JPEG format, a PNG is different from a JPEG and has advantages when compared to a JPEG. For more information, see the article JPG vs. PNG: When to Use?

How to Create a PNG

Creating a PNG is a simple process. You can create and edit a PNG in any image editing tool, such as GIMP (as seen in the image above), Microsoft Paint, or similar tools. Even free tools work well for creating and editing PNGs.

Simply open an image in any file type or create a graphic in the image editor and save or export the image as a PNG file type.

For more information about image editors, see the article 12 Alternatives to Photoshop (Free & Premium Options).

Pros and Cons of Using PNG

When to Use a PNG

PNG images are more popular than SVG images. They’re versatile and common, making them excellent choices for almost any situation.

They can be used for photography, graphics, detailed images, and artwork. You can use them for logos and icons if you don’t have access to SVG files. If the image contains hundreds of colors, a PNG is the best choice.

Since they can have large file sizes, it’s best to optimize them as much as possible and only use them where SVGs are not good options.

For more information about optimizing images, see the article How to Optimize Images for Better Performance.

SVG vs PNG: When to Use Each File Type

Now that we have an understanding of the two file types, here’s a short guide on when to use an SVG vs PNG. First, neither is better than the other in all cases. There are times when one is clearly the best choice for specific graphics, while the other is the best choice for other graphics- even on the same web page. With this in mind, here are the best times to use SVG vs PNG:

Use an SVG for graphics such as logos, icons, diagrams, charts, and background graphics. Use them if you need animations that scale easily without a loss in quality. They are especially good for flat graphics. You can also use SVGs when all of your visitors use modern browsers.

Use a PNG for large, detailed images, photographs, and artwork. They’re especially ideal for any images with lots of colors. Also use them for social media and email, since those platforms and clients can handle them well. Use a PNG if you’re not sure the platform can handle an SVG. Also, use a PNG if you don’t want to go through the hassle of handling an SVG, such as installing specialized plugins to add SVGs to WordPress.

Which Should You Use?

There is no one-size-fits-all answer to the question of SVG vs PNG, but you can think about it in one of two ways: best overall advantage vs easiest to use.

Since SVGs are smaller files for the same image, scale to any screen size without a loss of quality, and include animations, it’s a good idea to use SVGs anywhere possible. It’s the best option for optimization. If it can’t be displayed with an SVG, use a PNG. I recommend using use PNG fallbacks with your SVGs. This way, if the SVG fails to load, your visitors will see a PNG in their place.

If you just want to keep it as simple as possible, then use PNGs. They’ll do almost everything you need, and you won’t have to install anything to make them work. You’ll need a different format for animations, such as GIFs or APNGs. Your files will be slightly larger and might not look as good when scaled, but they’ll work without hassle. If you already have a lot of PNG images on your website, I don’t recommend replacing them.

Ending Thoughts on SVG vs PNG

That’s our look at SVG vs PNG image file types. Both file types are excellent choices and have advantages over the other. Likewise, both have disadvantages in certain situations. I recommend using SVG image files if possible and then using PNG files where you can’t use an SVG. It does take some extra work to use SVGs, but the advantages are worth the trouble. Ultimately, it comes down to using the best file type for any given situation. The information we’ve covered here will help you decide when to use each file type.

We want to hear from you. Do you use both image file types with your website? Let us know about your experience in the comments.

Frequently Asked Questions