Preview
Video Player
00:00
00:00
Intro to SVG Animation
2:21SVG support for interactivity and animation has been around for some time. Long before CSS transitions, transforms, and keyframe animations, SVG had other animation capabilities native to the browser that is still supported and used today.
SVG support for inner activity and
animation has been around for some time.
0:00
Long before CSS transitions,
transforms, and key frame animations.
0:04
SVG had other animation
capabilities native to the browser
0:08
that are still supported and used today.
0:12
SVG itself has a built in syntax for
animation, it's called SMIL.
0:15
SMIL is short for Synchronized
Multimedia Integration Language.
0:20
And it comes with a set of animation
elements for animating SVG content.
0:24
With SMIL you can transform and
animate the attributes of an SVG element
0:28
directly in the XML markup
used to create the SVG.
0:32
Now, SMIL doesn't work
in Internet Explorer and
0:35
Microsoft has no plans to add
SMIL support in the future.
0:38
Also, the developers of Chrome are
planning to remove SMIL in support of CSS
0:42
animations.
0:46
So, SMIL's future doesn't look too bright.
0:47
So I recommend you skip this
approach to animating SVGs.
0:50
Another approach that's well-supported and
0:54
used by many web designers is creating
SVG animations with JavaScript.
0:56
JavaScript gives you more
control over the animations but
1:01
it is a lot more complex
than animating with CSS.
1:04
These days, you can use JavaScript
libraries like Snap, Velocity, and
1:07
GSAP for animating SVG.
1:11
Now, I won't be covering that approach in
this course, but check the teacher's notes
1:13
for more information on
JavaScript animation libraries.
1:17
There are many advantages that come with
using SVG and CSS for animating graphics.
1:21
First, SVGs are easily styleable with CSS.
1:26
You're already familiar with CSS syntax.
1:30
And they generally have
good browser support.
1:33
If you already know and are comfortable
with CSS animations you'll have no problem
1:35
integrating them into your projects.
1:39
You simply open up your CSS file and
adjust your graphic and
1:41
animation using properties that
are already familiar to you.
1:44
Finally, SVG can be added to
a webpage in three different ways.
1:48
As an embedded image,
a CSS background image, or as inline SVG.
1:51
But not all three methods
can be animated with CSS.
1:56
Animating SVG attributes will not work for
SVG embedded as an image, or
2:00
as a CSS background image.
2:04
We can only animate inline SVG with CSS.
2:06
That's the SVG mark-up added
directly within the HTML.
2:10
So now that you're all up to speed with
the different SVG animation methods,
2:13
we'll get started by digging into SVG
transitions and transforms with CSS.
2:17