SMIL SVG animations can now play on all browsers

Post and comment on recent Inkscape news.
hulf2012
Posts: 715
Joined: Sat Nov 24, 2012 12:37 pm

SMIL SVG animations can now play on all browsers

Postby hulf2012 » Sat Feb 20, 2016 1:27 am

Hello
I first read from here:
https://plus.google.com/+GoldenRibbon/posts/HusmkaFm9Z6

In Reddit:
https://www.reddit.com/r/webdev/comment ... _browsers/

SMIL SVG animations can now play on all browsers thanks to this polyfill created by Google:

https://github.com/ericwilligers/svg-animation

If all is true, and all is correct, I think this is a "game-changer".
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.

Moini
Posts: 1924
Joined: Mon Oct 05, 2015 10:44 am

Re: SMIL SVG animations can now play on all browsers

Postby Moini » Sat Feb 20, 2016 2:09 am

Last thing I heard was they wanted to deprecate SMIL in Chrome... Interesting - and nice - 180° turnaround.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

hulf2012
Posts: 715
Joined: Sat Nov 24, 2012 12:37 pm

Re: SMIL SVG animations can now play on all browsers

Postby hulf2012 » Sat Feb 20, 2016 6:43 am

Hello Moini

From my point of view it's easier to animate with SMIL, than with CSS, and more powerful. . And even more than using JavaScript libraries.
The problem was the support for MS web browsers.

On the other hand, as you said, SMIL was dead.

I mean, It sounds so good, that can't be true.
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.

Moini
Posts: 1924
Joined: Mon Oct 05, 2015 10:44 am

Re: SMIL SVG animations can now play on all browsers

Postby Moini » Sat Feb 20, 2016 8:46 am

Well, theoretically they can now deprecate it without making everyone cry out loudly... Did you know youtube was using (or wanted to use?) SMIL for its video icons?... The youtube guys weren't happy about what the Chrome people planned to do...

The reason I favoured SMIL was that it didn't require any additional js... (and that it was easy to understand - I haven't actually used it, only looked at what you need to do, and I found it looked a lot easier than both other methods, and provided more flexibility because of the ability to animate paths).
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
brynn
Posts: 9448
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: SMIL SVG animations can now play on all browsers

Postby brynn » Sun Feb 21, 2016 8:44 pm

Can someone give a simple explanation what "polyfill" is? I looked up in WP (https://en.wikipedia.org/wiki/Polyfill) and it sounds like some code that would have to be included on the webpage with the SMIL code, so that after Chrome drops it (if it actually does drop it, as reported) it would still play in Chrome?

Is that about right?

If that's correct, then theoretically, all browsers could drop SMIL and this code would still make it work? Or does this code only make it work for Chrome?

I don't know. Based on my VERY limited understanding, it seems like it would have to be a LOT of extra code?

Moini
Posts: 1924
Joined: Mon Oct 05, 2015 10:44 am

Re: SMIL SVG animations can now play on all browsers

Postby Moini » Mon Feb 22, 2016 2:11 am

Correct. It's a javascript file that needs to be included in the web page where you use SMIL, and that replaces the browser's own knowledge about SMIL, if the browser has no clue what to do with it.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

Moini
Posts: 1924
Joined: Mon Oct 05, 2015 10:44 am

Re: SMIL SVG animations can now play on all browsers

Postby Moini » Mon Feb 22, 2016 2:14 am

(The javascript files in that repo over at gh are about 200kb - and they can still be compressed. So they are not so very large, in comparison with images, at least.)
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

Moini
Posts: 1924
Joined: Mon Oct 05, 2015 10:44 am

Re: SMIL SVG animations can now play on all browsers

Postby Moini » Sat Feb 27, 2016 8:43 am

See also:
http://tavmjong.free.fr/blog/?p=1583
search for "Path morphing" to find the interesting part :)
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
brynn
Posts: 9448
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: SMIL SVG animations can now play on all browsers

Postby brynn » Sat Feb 27, 2016 8:21 pm

There's no search feature -- but that section is roughly 4/5 down the page.

Moini
Posts: 1924
Joined: Mon Oct 05, 2015 10:44 am

Re: SMIL SVG animations can now play on all browsers

Postby Moini » Sun Feb 28, 2016 12:51 am

Ctrl + F is what I usually do. The browser has an excellent search option.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
brynn
Posts: 9448
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: SMIL SVG animations can now play on all browsers

Postby brynn » Sun Feb 28, 2016 3:08 am

Oh, look at that! My new thing to learn today :D

hulf2012
Posts: 715
Joined: Sat Nov 24, 2012 12:37 pm

Re: SMIL SVG animations can now play on all browsers

Postby hulf2012 » Wed Mar 23, 2016 2:22 am

Hello,
It seems that still it's "not mature" :roll: :oops:

Let me explain
I wanted to try a special feature with SMIL animation, which you can't do it with CSS, and It is relative complex to do in Java script.
I'm talking about "animateMotion":
https://developer.mozilla.org/en-US/doc ... mateMotion

Well, I created following the "recipe" that appears in the first link... and It didn't work on MS web browsers, and in Chrome yielded warning messages.

I decided to post is an issue in the github of the project, where you can see more details:
https://github.com/ericwilligers/svg-an ... /issues/41

Maybe I'm missing something :|
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.


Return to “News, Events & Developments”

Who is online

Users browsing this forum: No registered users and 2 guests