Web Design Tutorial: SVGs

Blog_SVG_Header_July2015

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:

.png

Example PNG

.svg

.png

Example PNG

.svg

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.

Why SVG?

Versatility

So 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.

Performance

Another 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:

<img src="www.yourdomain.com/images/cute-puppy-logo.png">

In turn, the browser says, “Ok let me follow that address and go find that image for you, then I’ll go ahead and serve it up on this page.” SVGs, however, are little snippets of XML that can be included right on the page. Saving on these http requests in various places throughout your site can lower the overall page weight and speed up load time for your users.

Interaction with CSS and Javascript

Perhaps the most exciting aspect of using SVGs is their ability to add style and functionality enhancements with other languages like CSS and Javascript. Since SVGs are just blocks of code, they have editable properties that you can manipulate to stylize and animate. Check out the Codepen below to see this in action:

See the Pen mJKeBv by Volusion Services (@volusion) on CodePen.


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.

  1. 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>
  2. 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.Volusion Storefront Screenshot

Resources

In 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.

shop-icon

About 

Ashley is a Front End Web Developer for Creative Services at Volusion. In her spare time, Ashley enjoys soaking up the sun at the local river.

Leave a Reply