SVG Animations using SMIL (1)

MINA

Saigon, Vietnam

サイゴン, ベトナム

Sài Gòn, Việt Nam

2022-11-13 18:25:00

SVG Anim (1)

SVG Anim (2) SVG Anim (3) SVG Anim (4) SVG Anim (5) SVG Anim (6)

So, why are we talking about SVG?
Well, are we not all front-end devs?

I bet you are.
If so, we certainly have chances that our clients ask us to animate stuff.

When that happens, they may ask you for a clickable icon which morphs into another shape like this:

Visit the original CodePen "SVG Toggle Animation" by Mike Harris (@mikemjharris). Or, he has a blog post.

See the Pen SVG Toggle Animation - Final result by Mike Harris (@mikemjharris) on CodePen.

Or, it could be a company logo which keeps changing shapes in the background like this:

Visit the original CodePen "Pulsing sphere endless animation with SVG" by CeramicSoda (@ceramicSoda).

See the Pen Pulsing sphere endless animation with SVG by CeramicSoda (@ceramicSoda) on CodePen.

When making modern websites, you may not avoid talking about micro-animations. They are not just something which make your website look fancy, but play essential roles in UI/UX today.

Do you agree on this so far?

SVGs are DOM elements

Let me tell you a story.

I was once very much into FX trading, and watched FX charts almost everyday. Although I don't remember which website it was, one of the FX websites had a very good FX chart there. So, one day, I looked into their source codes as I was curious as to how they implemented the chart.

After a bit of investigation, I found out that the developers were using 2 different technologies.

For LINE CHARTS, they were using Canvas API.
for CANDLES, they were using SVGs.

It totally makes sense to me.

For Line Charts, you don't want to refresh the graph too often (only once a while to retrieve the latest FX information). Once charts were rendered using Canvas API, you want the lines unchanged.

On the other hand, Candles were one of the information layers. Users were able to apply the layers on top of the line chart, and perform various operations on them. For these, you want them to change only when user requested to do so. So, having SVG for these layers was an adequate solution for candles.

» Let me know what you think!

write

to the list