Harnessing the Power of SVGs to Improve UX
As Web UX designers and developers, we are always looking for ways to to improve the user experience of the sites we build. When it comes to incorporating images and graphic elements into our digital designs, one of the handy tools in the designer/developer’s virtual toolbox to achieve this is Scalable Vector Graphics, or SVGs, as they are commonly known.
SVGs are an XML-based vector image format developed by the World Wide Web Consortium (W3C) back in 1999, but despite having been around for nearly two decades, they are still relatively under-utilized in modern Web design. As Chris Coyier, founder of CSS Tricks and Author of “Practical SVG”, pointed out at the 2017 An Event Apart Conference in Chicago, we can and should be using this useful format in different ways.
The SVG Seven: Important Attributes of SVGs
To understand how to best incorporate SVGs into our work, it is worth noting some important attributes of the SVG file format to know when and how they can best be utilized. Key advantages associated with SVGs include:
As the name suggests, Scalable Vector Graphics can be easily scaled up or down independent of resolution. Unlike pixel based graphic formats, SVGs may be sized as needed without a loss in quality, allowing images and graphics to be optimally viewed across a wide range of screen sizes and devices, including those with retina displays.
File size is another key advantage that SVGs have over other image formats. The file size and code footprint of SVGs are typically smaller than that of other image formats including JPEGs, PNGs and GIFs. Smaller file sizes mean that page weights are reduced, and images load more quickly, which leads to enhanced overall performance.
3. Browser Support
SVGs are widely supported across modern Web browsers.
Since SVGs are code based, they are can be easily accessed by search engines. Text can easily be included within the SVG <text> tags that is SEO friendly.
As text-based vectors, SVGs are easily edited. Updates can be made in text editors or in drawing programs such as Adobe Illustrator.
SVGs can have transparent backgrounds which allow for enhanced design opportunities without the weight of PNGs.
All Day, Every Day, SVGs!
Now that we know a little bit about more about the characteristics of SVGs and how they work, let’s talk about the some of the ways we can use SVGs to present lighter weight, more engaging user experiences. This file format was discussed considerably at this year’s An Event Apart conference. Some of the discussion revolved around more experimental uses of the file format, but there were a lot of practical applications that were discussed as well. For the purpose of this blog post, let’s focus on some of the more pragmatic ways we can incorporate SVGs into our everyday work. The following represent ways that we can use SVGs in modern Web design across a wide range of use cases:
Well-crafted logos are typically vector-based, so they naturally lend themselves to the SVG file format. As the cornerstone of your brand, it is important that logos appear clean and sharp across all devices and user environments which make the format a logical choice here. The ability to incorporate animation is another advantage of SVGs that we can use to help add dimension to a brand.
- Icons Systems
Scaling pixel-based JPEGs or PNGs to small sizes often means these images can appear muddy, and scaling them up makes them look pixelated. SVGs are the perfect choice for maintaining high-quality icons no matter what the size. In addition to scalability, we can animate our SVGs to enhance user engagement and in the case of calls-to-action, encourage clicking through. In instances where numerous icons appear on a site, we can greatly reduce files sizes and page loads using well-designed, thoughtfully-coded SVGs.
- Charts & Graphs
Bring your charts and graphs to life! Animation can help enhance data to make illustrated charts and graphs more engaging. We can design SVGs for optimal viewing experiences across a wide range of devices and responsive environments, which is especially important for images that contain significant quantitative information. SVGs allow us to create crisp, clear charts and diagrams that are easier to read than other image format counterparts—particularly useful on mobile and smaller screen sizes where screen real estate is limited.
Infographics are another excellent use case for SVGs. Often, infographics are comprised of a large number of images, in which case minimizing file size is crucial. Incorporating animation into infographic images as users scroll down the page can also significantly help highlight important information and make the page more pleasurable for the user.
- UX Interfaces
Buttons, volume knobs, sliders and other UX elements can all be formatted as SVGs and doing so allows designer and developers to help breathe life into the overall user experience.
SVGs for the Win!
While SVGs aren’t necessarily the right choice for all images in every circumstance, we can use them in a number of ways to optimize our sites while increasing the pleasure of and improving the overall user experience. Pixel-based file formats still have their place and are likely the preferred image format in some cases, such as photographs. For vector-based applications, however, SVGs are an excellent choice, and based on current trends, we can substantially improve the user experience of a page by utilizing them more frequently.
About the Author
Leave A Reply