SVG Files: What They Are, How to Make One, and Why I Think You Should Use Them

SVG Files: What They Are, How to Make One, and Why I Think You Should Use Them

Images. Designers know them, love them, can't get enough of 'em. And we have JPEGs, PNGs, GIFs, and more, so why would we need another format? What's an SVG, and why should you care?

Images are great at conveying messages, but not so great at changing sizes. If you've ever tried to add images to a website, you know that trying to scale up images often leads to blurry results. There's no use in trying to add a clear, crisp image to your site if it looks low-quality and pixelated.

That's why I think every site owner should know about SVG files. SVG lets you serve images on your website that are lightweight, scalable, and visually delightful.

Despite these benefits, SVGs appear on only around 57% of websites, so let's try to get that number higher. In this post, I'll explain what you need to know about SVG files. You'll learn how they work, why site owners use SVGs, and their pros and cons. Let's dive in.

Table of Contents

• What is an SVG file?
• Raster Images vs. Vector Images
• How SVG Files Work
• How to Open an SVG File
• What are SVG files used for?
• Where to Get SVG Files
• Advantages of SVG Files
• Disadvantages of SVG Files
• How to Make or Edit an SVG File
• What is the best SVG software?

SVGs are something of a magic trick in website design. They're programmable, usually smaller than other formats, and can even be animated and made interactive for visitors on your website.

Looking at the image above, we know that "graphic" means image and "scalable" means resizable. So, what exactly is a vector?

Raster Images vs. Vector Images

If we take all of the image file formats used on the internet today - PNGs, JPEGs, SVGs, GIFs, PDFs, TIFFs, etc. - we can divide these formats into two broad categories: raster graphics and vector graphics.

You're probably familiar with the most common image file formats, JPEG and PNG. These are examples of raster graphic formats, meaning they store image information in a grid of colored squares called a bitmap. The squares in the bitmap combine to form a coherent image.

Raster graphics are great for highly complex images like photographs because they can capture minute details pixel-by-pixel. However, they also have a fixed resolution, so increasing the size of a raster image lowers its quality.

Vector-graphic formats, like SVG, are different. These formats store images as a set of points and lines between points. Mathematical formulas determine the placement and shape of these points and lines, and maintain their relative distances as the image scales up or down.

Image Source

This makes the SVG format ideal for things like illustrations, infographics, icons, logos, interactive and animatable images, and even text. I'll get more into what SVGs are used for in a bit

How SVG Files Work

SVG files are written in XML, a coding language used for storing and transferring digital information. If you're familiar with HTML, the syntax looks similar to that language. The XML in an SVG file specifies all the shapes, colors, and text that make up the image.

Let's see some examples. We'll start with an SVG of a circle.

When I open the file for this circle in a code editor, this XML code appears:

As you can see, we only need one line of code to draw a circle. That's because, instead of setting the color of each square in a grid, the XML only has to provide a color (where it says fill:#f4795b) and a radius (at the end where it says r="20").

When provided with an SVG file like this, a web browser (or other application) takes this XML and displays it onscreen as a vector image. All modern browsers and graphics editing software render SVGs this way.

You'll also notice that this XML file is written in English, kind of. SVGs are text files, which makes them readable by humans, and we can change how a vector image looks by editing the XML directly. For instance, I could replace the fill value to change the color of the circle:

Of course, we can accomplish a lot more with vectors than just basic circles. Let's look at a more complex image, the HubSpot sprocket logo:

Obviously, we're looking at more than just a circle here. This graphic consists of 30 lines connected by 30 points:

Let's open this SVG file in a text editor:

Image Source

There's more going on here, but the concept is the same as the circle example above. We still see the color is set to orange inside the