I went to a local meetup last night, with presentations on different topics around web development. One of them was on SVG graphics, and how to manipulate them with CSS.SVG graphics aren’t images, but HTML in an <svg> tag. It’s supported by pretty much every browser.
In the HTML that makes up the graphic, there are elements which give drawing data. For example, a rectangle that starts at x/y and goes to x/y. The primary benefit is that SVGs can scale perfectly, unlike images which can waste bandwidth if scaled down or lose quality if scaled up. For logos or anything that isn’t a photo with a lot of color, SVGs are also a lot smaller in size.
Another cool feature with SVGs is that each of the elements in the SVG can be targeted with CSS (like any other element). You can change the rotation of an element, a color, or the size of a rectangle. You can also combine it with CSS animations to animate your SVG. This makes it preferable over gifs, especially when you factor in file size and loading time.
To design SVGs, you can use Adobe Illustrator. Otherwise, there are free online tools, like SVG-Edit.