SVG graphics are one of the most useful assets to have on your website or mobile app. In case you’re not familiar with them, SVG stands for Scalable Vector Graphic. The graphics themselves have major advantages over other image formats used on the web, such as JPEG, PNG or GIF. Their main benefits include:

  • Scalability to any size, but without losing sharpness (think Adobe Illustrator file vs. Photoshop file)
  • Their file size is generally smaller
  • They look crisp and clear on retina displays
  • You can edit their appearance using code, as opposed to making continuous edits in a graphics program (like Photoshop)

To provide an example, here’s the difference between a standard “raster” image and an SVG image:

SVG vs. JPG

Notice how the raster image starts to get pixelated as you increase its size, while the SVG stays sharp. That’s quite helpful, especially on a retina display where the images get doubled in size and can start to look grainy. It’s also useful on responsive websites where image sizes constantly fluctuate.

But what about hover effects?

Oftentimes websites will have images that change when you roll over them. Here’s one such example (rollover the image below with your cursor):

This is what’s called an “image sprite” (or “sprite” for short). If you look at what’s happening behind the scenes, this is just one JPEG image with multiple Google logos on it. All we’re doing is using CSS to move the viewable part of the image when someone hovers over it. In case you’re curious, this is the full image:

logo-google-sm-sprite5

Now, you can also use image sprites with SVG, but in all honesty, creating sprites can be rather time-consuming. You have to make your image, measure how large it is, do some math on how much to move it when someone hovers over it, and then build out your CSS accordingly. Plus if you ever want to change the image down the road (i.e. the size, colors, etc.) you have to create an entirely new image and re-upload it to your site.

There must be a better way

Thankfully, there is. The brilliant thing about SVG is that the images are simply chunks of code. For instance, here’s an SVG icon (notice how clear it is, particularly on a retina display):

And here’s the code behind that image:

Now if you want to change the colors of the talk bubbles, all you have to do is edit one line of code. Pay special attention to the path id and path fill elements. Let’s see what happens when we change the color of the path fill for the foreground bubble. Here’s our code (notice the highlighted line):

And here’s the result:

Voila! All we did was update a tiny chunk of code, and we have a brand new image.

Hover effects for SVG

Finally, if we want to change the SVG image when a user hovers over it, here’s what our CSS code will look like:

This is our final result (hover over the icon):

So the next time you need to create an image that changes on hover, consider using SVG instead. It’s sharper, has a smaller file size, and is far easier to update on-the-fly.