Why to Use SVG Files Instead of JPG

Close up detail of multiple sheets of paper

PM Images / Getty Images 

As you build out a website and add images to that site, one if the most important things you must determine is which file formats are the correct ones to be using. Depending on the graphic, one format may be much better than others. 

Many web designers are comfortable with the JPG file format, and this format is perfect for images that have deep color depth, like photographs. While this format would also work for simple graphics, like illustrated icons, it is not the best format to use in that instance. For those icons, SVG would be a better choice. Let's take a look at exactly why:

SVG Is Vector Technology

This means it is not raster technology. Vector images are a combination of lines created using math. Raster files use pixels or tiny squares of color. This is one reason that SVG is scalable and perfect for responsive websites that must scale along with a device's screen size. Because vector graphics exist in the world of mathematics, to change the size, you simply change the numbers. Raster files often require a significant overhaul when it comes to sizing. When you want to zoom in on a vector image, there is no distortion because the system is mathematic and the browser just recalculates that math and renders the lines as smooth as ever. When you zoom in on a raster image, you lose image quality and the file starts to get fuzzy as you begin to see those pixels of color. Math expands and contracts, pixels do not. If you want your images to be resolution independent, SVG will give you that ability.

SVG Is Text-Based ​

When you use a graphics editor to produce an image, the program takes a picture of your completed artwork. SVG works differently. You can still use some software programs and feel like you are drawing a picture, but the final product is a collection of vector lines or even words (which are really just vectors on the page). Search engines look at words, specifically keywords. If you upload a JPG, you are limiting yourself to the title of your graphic and perhaps the alt text phrase. With SVG coding, you expand on the possibilities and create images that are more search-engine friendly.

SVG Is XML and Works Within Other Language Formats

This goes back to the text-based code. You can make your base image in SVG and use CSS to polish it. Yes, you can have an image that is actually an SVG file, but you can also code the SVG directly into the page and edit it in the future. You can alter it with CSS the same way you would alter page text, etc. This is very powerful and it makes for easy editing.

SVG Is Easily Edited

This is probably the biggest advantage. When you take a picture of a square, it is what it is. To make a change, you have to reset the scene and take a new picture. Before you know it, you have 40 images of squares and still don’t have it quite right. With SVG, if you make a mistake, change the coordinates or a word in a text editor, and you are done. We can relate to this because we drew an SVG circle that was not positioned correctly. All we had to do was adjust the coordinates.

JPG Images Can Be Heavy

If you want your image to grow in physical size, it will also grow in file size. With SVG, a pound is still a pound no matter how big you make it. A square that is 2 inches wide will weigh the same as a square that is 100 inches wide. File size does not change, which is excellent from a page performance standpoint!

So Which is Better?

So what is a better format — SVG or JPG? That depends on the image itself. This is like asking "what is better, a hammer or a screwdriver?" It depends on what you need to accomplish! The same is true for these image formats. If you need to display a photo, then JPG is the best choice for you. If you are adding an icon, then SVG is likely a better choice. You can learn more about when it is appropriate to use SVG files here.