What is an SVG?Before we begin talking about SVGs, let’s do a quick overview of the different types of image files found around the web. The chart below outlines the different types of files and the best use case for each type:
- File TypeBest Used for:Image File Types:
- .jpgphotographs; high number of colors
- .gifsimple images; funny cat bloopers
- .pngicons; logos; transparent images
- .svgicons; logos; interactive elements
Similar to jpgs and gifs, an SVG is, in essence, an image. More specifically, SVG stands for “scalable vector graphic.” The word to really focus in on here is “scalable.” Unlike other file types, an SVG can grow or shrink without any reduction in the visual appearance of the image itself. SVGs are now widely supported by most browsers with the exception of Internet Explorer 8, and only partially supported for Android Browsers 4.3 and down.In the example below, you see a .png image that has been resized, versus an SVG that's been resized:
The png image gets very blurry when resized beyond its natural size, while the SVG retains a crisp, clear appearance. This means you can load the same SVG file multiple times throughout your site, and maintain the ability to manipulate the various dimensions as you please.
VersatilitySo why would you need an image to scale as the SVG does? Scalability of images is crucial to a responsive site. When a site is built responsively, images need to scale to various widths for different devices like phones, tablets and desktops. Having an image equipped to do this improves the overall aesthetic and user experience of a site.
PerformanceAnother great advantage to using an SVG is that your browser doesn't need to make an http request to get them. With other image types, you’d write something like this within the HTML:
How to Start Using SVGs on Your Storefront
The process of implementing an SVG into the HTML body of your site is a bit different from how you're used to embedding a standard image. There are a few different methods out there today, but for simplicity's sake, we'll address just one.
Example: Adding an SVG Facebook icon to link to your store's Facebook Page.
- Copy the code for the icon. Don't forget to change your link to your Facebook page URL.
<a href="INSERT-URL-HERE" title="Our Facebook Page" target="_blank"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="50px" height="50px"><path fill="#3B5998" d="M512 0c-282.624 0-512 229.376-512 512s229.376 512 512 512 512-229.376 512-512-229.376-512-512-512zM663.552 301.056c0 0-51.2 0-71.68 0-25.6 0-30.72 10.24-30.72 36.864 0 21.504 0 63.488 0 63.488h102.4l-10.24 110.592h-92.16v330.752h-132.096v-329.728h-68.608v-112.64h68.608c0 0 0-16.384 0-88.064 0-82.944 44.032-125.952 142.336-125.952 16.384 0 91.136 0 91.136 0l1.024 114.688z"></path></svg></a>
- Paste the code directly into the HTML of your site. You could do this in the template HTML file editor or even an article page. Ensure the that the code view is selected as depicted in the screenshot below.
ResourcesIn Volusion Creative Services, we use SVGs on a daily basis for our designs. We're constantly referencing the vast SVG resources on the web, and since this post is a very basic overview we thought we'd share our favorite SVG tools and articles with you.
- SiteDescriptionSVG Resources:
- IcoMoonRobust SVG library and tool for exporting SVG sprites
- Using SVGsBasic information on implementing with Adobe Illustrator
- SVGs vs Icon FontsSpoiler alert: SVGs are better
- Making SVGs Responsive with CSSGreat SVG starting guide by Sara Soueidan
- SVG Icons FTWStep-by-step guide on getting started with SVGs
- Understanding SVG Coordinate SystemsHaving issues getting your SVG to show up? It's probably your viewbox.