Scalable Vector Graphics (SVG) is a powerful text based graphic language that translates code into images. Now, you don’t need to know all the right code to make an SVG image there is plenty of software out there that can export your beautifully designed graphics into SVG format. Since SVG can scale so greatly without losing clarity, many web designers are making the jump to incorporate this type of style into their designs; here at TIK:TALK we’ve been using these technologies since they emerged on the scene!
But why use SVG instead of the regular PNG, JPEG, etc.? Well besides looking great on any screen size, you can ANIMATE IT! And there are several ways to do so:
A simple way to animate SVG is through CSS transformations, just by using @keyframes you can make some pretty cool animations.
Another way is an inline styling built right into SVG, called SMIL. This type of animation uses specific attributes to animate parts of your SVG graphic.
Probably the most used way to animate, and one I personally use, is through JavaScript frameworks. With this approach you can use extensive libraries to make your SVG animate however you want. There are several libraries available including GreenSock, which we’re utilizing on this site, Velocity.js, SnapSVG and SVG.js. All of these frameworks have great documentation and I highly recommend taking a look if you are interested in animating SVG.
Overall there is no limit on what you can do with SVG animations. Whether you decide to use SMIL or a JavaScript framework there are a lot of amazing things you can make your SVG do.