SVG is an image format with support for interactivity and animation. This specification is an open standard developed by W3C in 1999. It is also ideal for responsive web design, as they can be scaled to any size without getting pixelated. In a production environment, I would provide PNG fallbacks for older browsers. A list of compatible browsers can be found HERE. Click HERE to view list of the percentage of people still utilizing older browsers.

CSS transitions provide a way to control animations, colors, and speed when changing CSS properties (in addition to many more). Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser. A list of compatible browsers can be found HERE