TOP

SVG Animations using SMIL (2)

CSS or SVG?

Now, you would probably wonder why are we not using CSS.
You would say things are much easier using CSS. Well, you are right in a sense.
However, as your animations get complex, your codes can easily become a mess with CSS. In a word, SVG shines when your animations become more complex.
You would also need to think what tools for managing your SVG animations. I mean, there are many tools out there today. Like, plenty.
But, I tell you... There is a better way, and it is called SMIL (Synchronized Multimedia Integration Language).
In this article, I would like to present to you how fun it is using SMIL.
You will soon find out, when you are writing in SMIL, it will become less messy compared to CSS.

M 30 100 L 270 100... Say, what!?

Since our time is limited for this tech talk today, I would like to focus on one of the expression in SVG syntax:
M 30 100 L 270 100 L 150 250
Once you see ideas behind, I assure you that the rest will become much easier.
Let's dive into the wonderful world of SVG using SMIL!
NEXT BACK TOP