SVG files: what are they and how to use them?

SVGs can free up bandwidth, improve page speeds, and boost SEO performance — if you know when and how to leverage them.

In this quick guide, we’ll cover the basics of SVG files and when they’re likely to be your best image format option.

What is an SVG file?

SVG stands for Scalable Vector Graphic and it’s a 2D image or graphic file type. 

SVG files use mathematical equations and sets of rules about shapes, lines, and elements to produce graphics. SVGs are essentially XML code explaining shapes that should be displayed, the colors that should be exhibited, and where each shape should appear in relation to other shapes within a file. 

The SVG markup language was developed starting in the 90s by the World Wide Web Consortium (W3C). Proposals from six different teams played a role in the development of SVG, along with a heavy influence by Chris Lilley (W3C) and Jon Ferraiolo (Adobe).

4 benefits of using SVG files in web design

SVGs and other vector graphics are fundamentally different from raster graphics, such as jpegs or png files, which rely on pixels to communicate visual information. There are four major benefits to using SVG files in particular.

1. Clarity

SVG files are infinitely scalable. You can increase the size of SVG files and resize them as many times as you want without losing clarity — a huge benefit over raster images, which can become blurry or look grainy if they aren’t sized properly.

2. Versatility

Not only can SVG files be resized multiple times during the editing stage without losing clarity, but it’s relatively simple to produce responsive SVG files that look good on any device, even if the viewer zooms in on a web page. The versatility of SVG files makes them a great choice for logos and simple infographics. You can also use SVG files for animations, and they can be particularly useful for designing fonts with unique color schemes and gradients.

3. Smaller file sizes

SVG file sizes can be much smaller than a PNG or a JPG of the same image, depending on the complexity of the graphic or the number of paths within a design. According to Vecta.io, SVG files can be 60 to 80% smaller than PNGs, which can help keep load times to a minimum, helping you deliver a better user experience (UX). Faster page speeds are also better for website SEO.

The Sad Zebra design pictured above was created in Adobe illustrator and exported for use on a website first as an SVG file, and then as a PNG (note that the side-by-side image above is a jpg). The resulting PNG file was 82 KB (with dimensions of 1911 x 1387 pixels). The SVG file, in contrast, was just 8 KB (and did not have set dimensions because SVG files are responsive by default).

4. Accessibility and inclusivity

SVG files offer several benefits when it comes to accessibility and inclusivity. Designers can add structural data describing the visual elements in a graphic within the SVG file itself, which can help people using certain assistive technology better understand what is contained within an image. Alternatively, raster files rely solely on metadata (i.e., alt text) to describe the contents of a graphic to screen readers and similar assistive devices.

Scalability is a benefit to users as well as creators. People who have low vision can zoom in on SVG files without the file becoming blurry. Go ahead and try zooming in on the image below (which is an SVG file).

SVG files also offer accessibility and inclusivity benefits to designers and developers because there are a variety of methods for creating and editing them. You can edit SVG files without knowing how to code by using design tools like Adobe Illustrator. You can also edit the XML code directly in a plain text editor and easily incorporate SVGs into your HTML or CSS. You can find much more information on the accessibility features of SVG files on the W3C website.

When to use SVG vs. other image formats

There are 4 common image file formats used on the web, and while SVGs have many benefits, they’re not the best choice for all use cases. SVG files are great for simple graphics and illustrations, but they’re not ideal for highly detailed images. If you’re designing a website for a professional photographer, you’re not going to want to upload portfolios in SVG format.

For highly detailed photographs or intricate images, you’ll probably want to go with PNG, JPG, or JPEG files. When it comes to animations, GIFs and SVGs are awesome. It’s also relatively simple to include a transparent background in SVG, PNG, and GIF files. 

SVG files are great for web design but aren’t supported by some word processor and spreadsheet software. At the time of writing this, for example, Google Docs does not support SVG files.

Also, while recent versions of leading web browsers (such as Google Chrome, Microsoft Internet Explorer, Safari, and Firefox) support SVG files, people surfing the web from older browsers may have trouble viewing them. SVG files may not be your best choice for email campaigns either, since some email providers only partially support SVG files, or don’t support them at all (as of March 2022).

What programs can open and edit SVG files?

There are lots of free and paid programs you can use to open, edit, and convert SVG files. Here are just a few:

Free SVG file converters, design, and animation software

• Inkscape
• SVG-Edit
• Vectr
• Animator
• GIMP
  

Paid software that supports vector files

• Adobe Illustrator
• Adobe Photoshop
• CorelDRAW
• SVGator
  

SVG graphics have become quite popular as of late, thanks to their versatility and accessibility. Not surprisingly, the range of graphic editors that support vector image files is growing, too.

How to add SVG files to Webflow projects

It’s relatively simple to add logos and animated SVGs to Webflow projects. All you need to do is open the Assets panel on the left of the Webflow Designer and upload your file.

Once you’ve uploaded the file, follow these steps:

1. Open Add Elements panel
2. Scroll to the media section
3. Select image
4. Click the “Choose image” button and either select your SVG file or simply drag the asset to where you want it within your design

Your image should now appear in your design. If it doesn’t, you may need to set a specific size dimension (especially if you’re adding a logo to a nav bar).

For interactive SVGs and animations, you can also use the Embed feature.

1. Open Add Elements panel
2. Scroll down to the Components section
3. Drag the Embed element into the Designer
4. Paste your code into the HTML Embed Code Editor.
   

Alternatively, you can add animations or interactions to SVG images within the Webflow Designer by assigning a trigger and action to the element in the Interactions panel on the right side of the Designer. Check out Webflow University for more info on triggers and animations in Webflow.

Vector graphics format FAQ

Below you’ll find answers to some of the most commonly asked questions regarding vector graphics and the SVG file format.

1. What is an SVGZ file?

SVGZ files are compressed scalable vector graphic (SVG) files. Some designers and developers use Gzip to compress SVG files and serve the smallest images possible, thus saving on bandwidth and protecting page speeds.

2. Is SVG lossy or lossless?

The SVG file format boasts lossless compression. You can compress and decompress SVGs without losing clarity.

3. Is SVG the same as EPS?

SVG and EPS are two different vector graphic formats. Scalable vector graphics (SVGs) were created for use on the web. SVGs are based on XML code and best suited for screens. Encapsulated PostScript (EPS) is an older file format best suited for large-scale printing.

Using different file formats in Webflow

Looking for more info on when to use SVG, PNG, bitmap images, and other graphic formats in Webflow? Check out these resources from the blog and Webflow University:

• Image file types
• PNG vs JPG: which is better for your website?
• Image resolution
• Responsive images