Dynamic Images in Webflow with SVGs or Sprites

‍

This tutorial shows you two ways to update an image when a user interacts (hovers, presses, focuses, etc) on an element on your site. The first method manipulates SVGs and dynamically sets the color of the strokes and fills using "currentColor" instead of a standard HEX value.

The second method uses "sprites", which were common in old video games and early websites. With the faster internet speeds we have today, sprites aren't as common — but they can be useful if you're trying to reduce your server calls or eliminate the flash gap when you're switching between images.

‍