How SVG Supports Responsive Web Design
Retailers lose $2.6 billion in sales each year to slow-loading websites, and one of the most common causes of a slow-loading website is large file sizes.
The first impression many people have of your business begins with your website. Sure, you’re not supposed to judge a book by its cover. But the reality is that when it comes to websites, most people do.
A slow-loading website with low-quality, pixellated images isn’t going to impress anyone. So to make a good first impression on your website visitors, you need to understand how scalable vector graphics or SVG files improve responsive web design, user experience and even SEO.
Using SVGs can solve many of the problems that plague website owners.
What Is an SVG?
Before we dive into the benefits of SVG files, let’s cover the basics. What even is an SVG? SVG stands for scalable vector graphic and is a vector image format for images.
To understand the scope of benefits offered by scalable vector graphics, let’s zoom out a bit into the world of image file types. When you save an image, you choose from different file types like JPG, GIF, PNG, SVG, and so on. You probably recognize these from the extension at the end of the file name (ex. image.jpg, image.gif, image.png, etc.).
Each of these represents a file type. But what does that even mean? Without diving too deep into each specific file type, we will discuss the two main file types for two-dimensional graphics: raster and vector images.
Raster Files vs. Vector Files
A raster file is a bitmap composed of tiny pixels. This basically means that the data for these graphics is a collection of tiny dots or pixels. JPGs, GIFs, and PNGs are all raster-based images.
A vector-based image file is a different way of saving data. Instead of pixels, vectors are built with mathematical formulas on a grid.
Back in high school algebra, you probably plotted lines and dots on the X and Y axis of a grid. In the most simple terms, these points make up vectors. You can create all kinds of points, lines, curves, letters, and shapes with vectors.
If you haven’t guessed by SVG’s name (scalable vector graphic), an SVG is composed of vectors that allow these elements to be scaled up or down with ease in a responsive web design. You can create almost any graphic that you want using different collections of vectors. And rather than communicating the image data with pixels, it is communicated with mathematical formulas that make up various shapes, icons or illustrations.
SVGs communicate data with a text markup language called XML, whereas other image types communicate them with collections of pixels.
In the simplest possible terms, SVG files are made up of shapes instead of pixels.
When to Use SVG Files
Though there are many benefits to using vector-based images, it is not realistic to use them for every single image. When you think about the data structure of SVGs vs other files, it’s easy to see why it isn’t always practical to use scalable vector graphics.
SVG files are made up of shapes, lines, and vectors. As a result, complex graphics do not convert to SVG files well. Though it is possible to convert other images into xml-based SVG graphics, the resulting file would be huge and messy, making it almost unusable.
When it makes sense, you should almost always use SVG over PNG, JPG, GIF, or other file types. SVGs are best used for simple graphics and illustrations and they are commonly used by web designers. With more complex images like photographs, you should use another file type like JPG or TIFF.
Some common uses of SVG files to help you get an idea of when you should opt for SVG over PNG, JPG, or GIF:
- Logo design
- Illustrations that rely on lines and shapes
- Animation
- Icons and other geometric designs
- Simple animated elements with CSS and Javascript
- Charts and graphs
- Graphics that you will need to update or edit
Basically, you should save any simple image or graphic as an SVG when possible. More complex images like photographs translate better into raster file types.
SVG Benefits
The way SVGs store data offers many benefits. This is especially true when using SVG files on your website.
Since 75 percent of consumers judge a business based on its website, it’s imperative that you make a good first impression. Luckily, SVGs can help you accomplish that, and then some.
Scalability, lower file size, faster website loading time, improved SEO, and great editing capabilities are the main benefits of SVGs for your site. We will delve into each benefit to explain how the use of SVGs can improve your website.
Scalability
In 2021, 55.56 percent of all website traffic comes from mobile devices. And this number has grown significantly in the past decade. This makes responsive web design imperative.
One problem that many website designers have to deal with when designing for such a massive range of screen sizes is the scalability of images. With SVG files, this isn’t a problem at all: the word “scalable” is right in the title. SVG files are resolution-independent and look crisp on any display.
Pixels make up screens. So what is the problem with using pixels for image files? Well, when you blow up raster images too large, the pixels make the image look blurry and out of focus. With raster-based images, the threshold for responsive scaling is usually about 20%. Any more and you start noticing a degradation in image quality.
The only way to enlarge a pixellated image is to make each individual pixel look larger. To an extent, this is fine. But as screens become larger and higher resolution, you’ll begin to notice each individual pixel instead of the picture that the pixels are composing.
Scalable vector graphics, on the other hand, are made up of mathematical formulas. Whatever your feelings on math, this offers a distinct advantage as browsers can recalculate the formulas that compose the different vectors to scale the SVG without losing quality.
This makes scaling SVG images to fit any screen size a breeze. Instead of blowing up each individual pixel, you blow up the entire shape. This offers huge advantages for your website; no matter how large a screen it is viewed on, the pictures will look sharp and professional, leaving a good impression on website visitors.
Smaller File Size
Another major advantage of using SVG files is the file size. Because of the scalability of SVGs, you can save the file at a smaller size, which means it doesn’t use as much data. When it comes time to use it, you can simply scale it up to the proper size using some basic HTML and CSS code.
This is not the case with other file types. Of course, you can still save lower quality versions of PNG images and they will require a smaller amount of data. However, this means that you are downgrading the number of pixels in the image.
When you blow the image back up to a larger size, it will quickly become blurry. For a PNG to look good at a larger scale, you have to save a much larger file initially. And the more pixels there are, the more data this file takes up.
Smaller files have many benefits. You may not be concerned with storage space for images; external hard drives with huge amounts of storage are readily available. However, when it comes to your website, small files are imperative.
To understand the importance of this, let’s look at how websites work. When you enter a URL, you are essentially requesting the data associated with a website. That data is hosted on a server, which then “serves” up the data to web browsers.
This is a simplification of what actually happens behind the scenes of the Internet, but the point is this: using images with smaller file sizes on your website means that less data has to be sent from the server to the user increasing speed and performance. It also means that your website server doesn’t have to store as much data, which is a huge deal if you have a large website with tons of data and images.
Faster Website Loading Time
Another major benefit of SVG images is that they allow for a faster website loading time. And a faster website loading time leads to a great user experience, better rankings and more sales.
If you’ve been on a slow-loading website and clicked away in frustration, you’re not alone. Visitors don’t hang out on slow websites. In fact, 40 percent of people will abandon your site if it takes more than 3 seconds to load.
Most people expect sites to load within two seconds. If it doesn’t, you could be missing out on major revenue. If you have 10,000 site visitors and 40 percent leave your site before seeing information, you’re missing the opportunity to market to 4,000 people.
Amazon ran tests to see the impact of slowing their website loading time by just one second. Their discovery? They would lose $1.6 billion every year.
Of course, unless you are an Amazon-level business, you probably won’t lose billions of dollars to a slow loading site. But you’ll still miss out on tons of visitors and potential profits.
Hopefully, this shows you how important fast page loading is, but how do SVG images speed this up?
How SVG Files Load Faster
Vector graphics are smaller in file size than raster images and can be loaded in the web browser significantly faster. This is a huge advantage in itself, but there’s another way that SVG files can load even faster without losing quality. And it has to do with the code of your site.
There are two different ways you can embed an SVG image on your website. The first is to use it as a traditional <img> tag. This is how traditional raster file types are embedded in the code of a website. And since the SVG is such a small file, this still offers many advantages.
The second way is unique to vector files like SVGs. Remember when we mentioned that SVGs are written in XML? This is a markup language that you can embed right into the HTML code of your website to display the image or icon.
The advantage of this is that there is no need for another HTTP request to retrieve vector graphics. With traditional <img> tags, the images are referenced as external resources, meaning multiple requests are made to the server to retrieve all of the information.
When you embed the XML into your HTML code, it will speed up your site because there is no need for multiple requests.
Improved SEO
Another benefit of using SVGs is that they improve SEO (search engine optimization). This is due, in part to the faster loading time: Google loves speed. They care a lot about user experience, and users expect speed.
As a result, Google takes page-loading speed into account when ranking websites. Since SVGs have smaller file sizes that allow for faster loading times, this positively impacts your SEO.
Crawling
Even more interesting is that your site’s loading speed can impact whether your web pages are indexed by Google. The Google algorithm discovers websites via a process called crawling. Bots will jump from page to page via links and save those pages into an index.
These bots have an allocated budget for the amount of time they spend on your site. If your server takes too long to respond, they may not discover all the pages on your site. And if they don’t discover pages, they will not index those pages, so they will not show up in the search results.
User Experience
Plus, the Google algorithm looks at how users interact with your site. If poor image quality or slow page loading times send them running, Google will take note and rank you lower in the SERPs (search engine results pages). Creating SVGs for scalable and fast-loading graphics, you can give your website visitors a positive experience, which will help with SEO.
Image Readability
Beyond this, when you embed your SVG files directly in the text of the site (via XML text), the algorithm can read the data. You can embed keywords and descriptions in this text to help the algorithm understand what your page is about.
This ensures that SVG files are much more discoverable by search engines. With other file types, the algorithm can’t crawl the actual contents of the images; they can only find the information that you share to describe the contents of your image.
If you still opt to embed your SVG in the <img> format, you can use alt text to help search engines crawl the page. With raster images, this is your only option.
Editing Capabilities and Flexibility
Another great feature of SVG files is that they are easy to edit. You can take an SVG file, pop it into an SVG editing software, and make adjustments to the design or animation. It is much more difficult to edit raster files without significant Photoshop knowledge, and even then the adjustments are relatively limited.
The editing capabilities are due to the mathematical formulas used to create an SVG. They allow you to adjust the individual shapes, lines, and letters in the file. This means that if you need to change your logo colour for a particular web page, you can do so right in the SVG file — without having to start from scratch.
XML is Editable in Website Code
Not only can you easily edit the SVG file, but you can actually edit the code when you embed it in your website as XML. If you want to edit your SVG file, you can use CSS and Javascript to do so.
With CSS, you can change colours, add classes, and adjust the size easily without adjusting the initial file to the resolution of all devices. The style names are just slightly different from regular CSS styling (ex. “fill” instead of “colour” and “stroke” instead of “border”).
The biggest benefit of this, though, is the ability to create SVG animation. You can manipulate the SVG files with Javascript to add interest and interactivity to the site. There are built-in animation elements in CSS, too, such as <animate>, <animateMotion> and <animateColor>.
Using SVG files with coding skills, you can make an otherwise static website much more exciting for visitors. SVG animations can also help draw attention to important parts of the page. And though website logos are typically ignored by visitors, an animated logo can draw attention to itself, building brand awareness where a bitmap display may not.
How to Create an SVG
Now that you understand all the benefits of SVG files, you are probably wondering how to create one. We mentioned before that SVGs are made up of mathematical data — but don’t let that scare you away. This isn’t geometry class, and there is no need to write out X and Y coordinates by hand.
There are two main ways to create SVG files to use on your website. You can either design an SVG file from scratch, or you can convert existing graphics into SVG format. We will briefly explain both.
1. Design SVG From Scratch
There are many programs available that you can use to design SVG elements. Adobe is well known for its creative design software like Illustrator, but you can also find free software online if you’re not a professional designer.
When designing on one of these programs, you simply export the file you create as an SVG and it will automatically create the XML text for you. You can also edit existing SVG files in these programs.
2. Convert Existing Images Into SVG Format
The second option for creating SVG files is to convert an already existing image into SVG format. You can use tools like Vector Magic, which will automatically convert bitmap images into vector graphics. You can also upload your photo into one of the software programs mentioned above and export it as an SVG.
Converting existing graphics into scalable vector graphics is simple, but should be done sparingly. Though there are many benefits of vector file types, there are times when other file types are preferred.
A general rule of thumb is to only convert images to SVG if they are simple with clean lines and defined borders; otherwise, the file will be huge and messy.
The Downside of SVG Files
Though there are many benefits of SVG files, there are also a few downsides. First, they do not work well for every image. Because of their simple structure of shapes, lines, and other vectors, complex graphics don’t work well as SVG files
As a result, a raster file is the best option for photographs. This makes sense, as you are able to create much more depth of colour and shading with pixels than you are with vectors. SVG files don’t support as much detail.
SVGs are also not compatible with all browsers. Luckily for most websites, this isn’t a problem; the incompatible browsers like Internet Explorer, are very old, so very few people use them. But if this worries you, use a fallback image in case the SVG doesn’t render properly for older versions of Internet Explorer.
Use SVGs in Responsive Web Design
Clearly, there are a lot of benefits of SVG files. More manageable file sizes with infinite scalability, improved site speed and SEO, and easy editing capabilities make vector images a great choice for your site.
When saving two-dimensional graphics, logos, icons, or illustrations, we recommend using SVG over PNG or other raster file types. This will improve your web design and functionality, leading to an improved user experience.
Contact us to learn more about how we support the ever-changing web design landscape and deliver highly successful web design for clients across all industries.
