SVG animation is a great way to add visual interest to your site. It can also be a key component of interactive data visualization, as well as a powerful tool for brand storytelling on the web. But even with all these benefits, SVG animation can be tricky to pull off.
This guide will help you get started using SVG animations on your sites and give you some pointers on how to take your animations to the next level with GreenSock.
What is SVG Animation?
SVG stands for Scalable Vector Graphics, which is an XML-based vector image format for two-dimensional graphics (text and images) that support interactivity and animation. In other words, it’s an XML-based markup language for describing both static and dynamic two-dimensional vector graphics.
Why use SVG Animation?
SVG is much like HTML in that it’s easy to understand and get started with, but unlike HTML, it’s designed from the beginning to represent interactive graphics rather than document structure. That gives us some key advantages over rasterized images when it comes to creating animated graphics:
It’s resolution independent. Unlike raster formats such as JPG, PNG or GIF, in which individual pixels store information about color and transparency, SVGs are constructed from objects that
We’re not talking about the CSS property transform, which allows you to scale, rotate, move and skew things in the browser. No, SVG animation resides in the actual SVG markup. So if you want to learn about SVG animation, and the many cool things you can do with it, this is the article for you.
In this tutorial we will be looking at how to make a very cool looking 3D planet using SVG animation. You can see the result here.
The Basics
As the web becomes increasingly interactive, moving away from static sites, the ability to move and animate things on a webpage is becoming a more common place. SVG animation is widely supported, but not all of the properties can be animated using CSS.
In this tutorial we’ll start with a look at how you can move things around with SVG, then we’ll take a look at how to make some shapes and how to create some text. We’ll also cover a couple of libraries that can help you get started with SVG animation without having to write each keyframe by hand.
SVG moves come in two varieties, the SVG
SVG is extremely powerful, with its reduced HTTP requests and crispness on any display. This guide will help you understand why you should use SVG, how to prepare it for animation, and how to add animation in CSS or JavaScript.
SVG vs. Canvas: What’s the Difference?
SVG stands for Scalable Vector Graphics; Canvas is a resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics or other visual images on the fly.
Both have their advantages and disadvantages. The main difference between the two is that SVG needs XML markup to describe the image while Canvas is a procedural API (a set of functions).
This means that everything you draw in SVG needs to be defined in markup while Canvas is done programmatically through JavaScript.
In terms of interactivity, SVG can’t be compared to Canvas, since Canvas is rendered pixel by pixel while SVG is object based and consists of shapes — which are extremely simple objects if compared to HTML elements (elements in SVG can be interactive like links or mouse-sensitive).
In the years that have followed, SVG has slowly taken its place beside HTML, CSS and JavaScript as a core language on the web.
In recent months there have been some great advancements with regard to SVG animation. These advancements mean it’s now possible to create sophisticated interactive animations using just CSS (and JavaScript of course!)
As I’ve been working on my own animation projects, I’ve learned a few things that I’d like to share, along with some relevant code snippets.
What is SVG?
SVG is an amazing technology that has been gaining popularity over the last few years. If you have never worked with SVG, it stands for Scalable Vector Graphics and is a graphic format used to display vector based graphics on the web.
In this post I am going to take a look at animation within SVG. We will begin by looking at what types of animations are possible with SVG, then dive into some common options for working with SVG animations, and then we’ll end with a practical example of how to animate SVG using GreenSock.
Animating SVG can be done through native elements such as <animate>, <animateTransform> or CSS3 animations/transitions on any attribute of the SVG element. There are also libraries like SnapSVG which make animating easier, but they don’t offer any real advantage over the native elements for simple animation paths.
What we will cover in this post:
SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
However, the Snap.svg JavaScript library is slightly different from jQuery because in jQuery, all of the functions are called on jQuery objects while in Snap, the global snap function is similar to jQuery’s $ function and is used to select elements. And unlike jQuery, Snap also has a separate global SVG function which creates new SVG structures.