I was just looking at the latest draft for SVG2 from the WC3 SVG working group that finishes up in a month (after 2 years) and there is a lot of reference to SMIL animation in the animation module.
Now that SMIL is supported by all major browsers except IE, its finally usable (after Google nearly killed it) and hopefully it will stay.
If you don’t know SMIL lets you do complex animations without CSS or JS by using an <animate> SVG tag (as well as others).
You can animate onclick without JS and even do path morphing without having to use GSAP (must have same no of nodes).
They are proposing some name changes to the animation elements and a few other things (fingers crossed).
The one thing that would be really nice to have that is “at risk”, is z-index on SVG elements. Hopefully that is implemented.
Hopefully the Web Animations API will implement path animation so maybe SMIL could be used mainly as a fallback for browsers with JS disabled. 
Didn’t Google pause / suspend that depreciation all the way back in 2016 though?
Maybe you’re speaking of basic tweening via ‘attr:’ which does require the same number of points, but with GSAP’s powerful mophSVG plugin that’s not the case at all. 
That would indeed be nice inherently. In the meantime you can use JS with appendChild or insertBefore and swap things around creatively through coding.
In reality how often does that actually happen presently in mass given the current state of the web?
It wasn’t until Edge went to Chromium last year that SMIL was finally viable.
I just think having the ability to ‘tween’ nodes without having to slap on a library is pretty useful even for basic icon animation.
I use inkscape for all my icons and backgrounds and it would be really handy if there was a SMIL plugin.
Your right about JS in the browser, I think HTML email is really where it could shine. Having onclick animate events without checkbox hacks and being able to change z-index would be really sweet.
This is really cool. SMIL is something I haven’t spent much time on, so you have just helped me add it to my list of things to do
I think I’ll be using it mostly for morphing icons and animated SVG backgrounds (abstract gradients and shapes). BTW I forgot SMIL has<mpath>which is the equivalent of CSS motion path which is not yet supported in Safari (lets u do F1 race track style animations) and apparently SMIL will work inside an SVG image or URL background (havent tried it yet). This would be handy for selling animated backgrounds (just a URL and G2G). You can even use JS to trigger SMIL with beginElement() and append animate tags with JS🙂
Maybe you can be the person to champion SMIL’s resurgence as very few seem to be readily re-advocating it’s use thus far. Lead the way K-man, tutorials, books, fame will follow. 
The first spec for SMIL was in 1999 but most browsers didn’t even have the capability to run it.
CSS animations and WAAPI have heavily copied some parts of SMIL (they probably use the same C, C++, under the hood).
CSS and JS are easier to work with now, so SMIL is only needed for edge cases in the browser.
(outside of the browser see https://github.com/w3c/svgwg/issues/63)
-Path tweening (no library).
http://www.tbyrne.org/portfolio/smil/LoveDota.svg
https://codepen.io/noahblon/pen/qbvKt
-Motion path (waiting on Safari for CSS motion path)
-No JS button click animations (HTML email with JS disabled)
(if the client supports SVG)
-Self animating background images
HTML image - <img src="eg.svg">
CSS background - div {background-image: url('eg.svg')
http://www.tbyrne.org/portfolio/smil/LoveDota.svg
There’s a few good tutorials out the there.
https://metamorphant.de/blog/posts/2020-01-12-algorithmic-metamorphant-part-3-animating-svg-smil/
https://css-tricks.com/guide-svg-animations-smil/
My to do list:
-Make a function similar to WAAPI for
<animate attributeName="d" > (path tweening)
-Try to re-create some fire and forget, no thread blocking, complex animations similar to Kirupa’s snow falling effect in SMIL for use as backgrounds images. (I don’t think that complex is possible but maybe some other nice effects are)
For most things CSS and JS will be a better option because:
CSS AnimationsandJS WAAPIhave copied parts ofSMILbut made it easier to use.
-JS gives you access to variables, loops and calculations, SMIL only has event listeners(onclick), and chained animations(trigger after x ends) and maybe other gems.
-You can animate multiple attributes with CSS/ JS at one time instead of an <animate> tag for every animated attribute.
Long term SMIL will probably be better for :
- Artists using software to make animations
-No coders using software
-Outside web pages e.g. animated pictures, documents, email ect.
In regards to championing SMIL a guy called Emanuele Sabetta probably saved it. He harassed the WC3 SVG Working group because I think some of the animations software he uses/ makes relies on SMIL.
He brings up some really good points regarding SVG.
I’m aware of what SMIL is capable of but I think you completely nailed it with the following two excerpt comments.
Those are the capital and the period on the subject IMHO.
SMIL certainly still has its applications but it can quickly become unmanageable and feel like scattered inline css regarding maintainability. Comparatively CSS and JS are highly more legible, maintainable and capable. I’m not sold on SMIL’s resurgence and have seen very few re-advocating it’s re-use thus far. Sure it’s fun to play with and applicable to certain situations but I think most will stick with CSS and JS.
It’s interesting that both of the following threads died in 2016 and now 2 people have come forth in 2020 & 2021 to re-open the discussion in both. However it will be interesting if either ever get an actual response and further the original discussion.
- https://github.com/w3c/svgwg/issues/63#issuecomment-711330778
- https://groups.google.com/a/chromium.org/g/blink-dev/c/5o0yiO440LM/m/ZDbCbGObAwAJ
This is the follow up to that article by Sara Soueidan.
https://twitter.com/SaraSoueidan/status/590494294814937088
Really mate,
That’s 2015. It’s hard to endorse something that doesn’t have almost full browser support and it’s future is in jeopardy.
Sara Soueidan (SaraSoueidan)
I know I wrote the guide to SMIL animations (css-tricks.com/guide-svg-anim…) but, seeing their future, I don’t personally use them anymore.
That’s all changed now.
I get it, your a GSAP fan…
I hear awesome stuff about it, I’ve never used it.
I probably would try out GSAP or D3 if I was doing really complex stuff. I haven’t needed it.
I make super fast pages, minimal code and utilize SVG heaps (mostly inline icons in my HTML).
I don’t want to slap on libraries when I can do it myself.
What is more maintainable than an image file with animations included?
AND it works inside an <img> or background-image: url()
If SMIL got traction and SMIL plugins for vector software became readily available…
I think SMIL animated labels, icons, emojis and images would spread everwhere…
You’ll notice that you first mentioned GSAP in your initial post that’s how it came up in topic. It’s not strictly imperative to the conversation. I can’t help that the industry widely discusses it’s merits regarding animation for anything within the browser. A person is free to use any vanilla CSS & JS or whichever libraries they desire to animate SVG. Even SMIL if they choose to do so.
That’s not exclusive to SMIL either. SVG supports <style> and <script> tags to provide the same aspect for self-containing CSS & JS within SVG delivery.
It was referencing the tutorial you posted from 2014. Unless I’m mistaken none of them or anyone really is widely endorsing a cosmic shift towards SMIL even in 2020 / 2021. Though it has it’s place, will it really usurp the industry regarding SVG animation going forward?
The web is already accomplishing the same with CSS, JS, SVG, Canvas, Pixi, Three, 3D, Video, WebGL, Shaders, GSAP, etc. SMIL does not have a corner on the market for performant development and delivery. The web carried on marvelously without the widespread use of SMIL for decades and the complexities of the web increase daily.
From many of your comments throughout this thread you appear more focused on a niche aspect or particular agenda in which SMIL can benefit your requirements or workflow. I’m looking at the industry as a whole. We’ll see what unfolds in that regard concerning SMIL and widespread adaptation. You can always write your own extension for Inkscape, many people have proposed it or attempted doing so for SMIL.
In the meantime there are also many existing opportunities through desktop apps and hosted services to animate SVG through a visual UI utilizing CSS and JS for those whom desire to forgo hand coding.
But as you’ve said in the 
solution of this thread. SMIL now has support so nothing is really stopping you from using it and doing it yourself.
I don’t think you are mate,
A business owner or a manager of a business wants:
-One format for all logos, icons, letterheads ect.
-Support across most devices, formats, mediums ect.
-A bit of bling to the brand that makes it stick out (UI, UX, animations ect)
If I went to a graphic designer for logo’s and icons and they said:
You can have a nice gradient animation on your logo:
- In SMIL → works anywhere SVG does AND can be done with our vector software (if we get some SMIL plugins)
- JS only works on the web AND you need a developer to code you up an animation.
What would you pick? It’s an absolute no brainer…
You are not thinking of the web as a whole!
You are trying to keep animations the exclusive domain of developers.
Same as everybody else that has tried to kill SMIL.
I think in most cases artists can do a better job at animations than developers. I couldn’t make this. I doubt you could.
http://www.tbyrne.org/portfolio/smil/LoveDota.svg
This is what an artist can do with vector software and a SMIL plugin.
I have no problem paying somebody else for good vector art.
AND I’m not scared that of artist and designers making animations.
SMIL animations can work anywhere SVG is supported JS cant.
CSS and JS is a better option than SMIL for 50-70% of animations.
BUT I think that the convenience of using animated icons and logos anywhere makes SMIL a better method for maybe 30-50% of animations.
Regarding this thread, I’ve seen you’ve mentioned similar things a few places elsewhere about SMIL’s arrival for about a year now. I earnestly wish you the best regarding your SMIL only d*amn everything else approach. I’ll be curious to see if the industry follows.
^ Wow. My fine art professors from back in college would probably beg to differ. Or these current five canvases leaning against the wall beside me. But thanks for the assumption though.
It’s not about the plugin but the fact that Flash was/is an animators dream IDE. The actual plugin is a small part of that equation (export) to create such work. If you had Flash instead of Inkscape you could be animating your *icons with the same plugin.
Oddly you’re the one whom seems solely focused on SMIL and *icons, icons, icons. Both of which you keep focussing on while not feeling either is a niche aspect or entity.
I guess you missed above where I mentioned there are many visual UI options for those who want to forgo code? Designers and front-end folks don’t even need to touch CSS or JS to have animated SVG’s with all the opportunities which exist.
I would really love to hear you discuss in detail more about all the places where common web tech fails to work (since its used virtually everywhere) and where presently only SMIL can successfully succeed.
Like you said, now we have all these cool technologies (canvas webGL ect) to replace Flash.
I guess the web ‘Gods’ know best about what technologies should be killed off…
Any non scripting environment that SVG is supported e.g email.
BUT wouldn’t it be nice if we couldn’t have <script> tags embedded in SVG.
Maybe Facebook and Twitter would allow .svg files to be uploaded onto the feed and logos and onto profile pictures.
Maybe JS inside SVG is the problem…
I apologize, I didn’t realize you were an artist. It was a bit presumptive to assume that somebody who is clearly biased against SVG having its own native animations, was not an artist.
There’s been nothing but sarcasm from you since the start.
Why try and rag on a technology that has inspired advances in CSS and JS and has an advantage in certain use cases.
Do you have shares in Adobe or Greensock?
Flash (Animate) can still be used for the purpose of that SVG plugin and many more. Just not SWF on the web via Flash Player.
What other non-scripting environments are there, how does CSS animation play into that?
Could or Couldn’t? You can have scripts in SVG as expressed above.
Sarcasm?
Just trying to have a broad conversation not just solely about animated icons with SMIL.
Thanks champ.
You have inspired me to propose some changes to SVG and SMIL so that it doesn’t go the way Flash did.
That’s all fine and well but where are all these places where only SMIL works like you have declared? Don’t gloss over things now, we’ve come this far.
@steve.mills Why does the supposed “solution” of a discussion only thread keep changing around amongst your own responses, is it even needed? Or is it now merely for perceived optics after the fact given its a continuing moving target.
SVG in general will not have the same fate as Flash. But what recommendations will you be making / suggesting for the SVG / SMIL spec?
The first time I accidentally clicked ‘solution’ without even realizing until you quoted it. - well done champ, you picked up my mistake… no need to be a dick about it…
The second solution click was just there to bring the readers down the page- you must really want that tick…
SMIL is more powerful than CSS animations period.
When CSS has full support for:
-animate path
-motion path
-access DOM events → click, animation start/ end ect
-chain animations with e.g ‘animation1 + 5s’
-start animation on element1 by clicking element2;
-set attributes of another svg element on animation start or end using <set>
Then yeah maybe there’s a case to deprecate SMIL.
SMIL is more flexible period
Animate without JS inside:
<img>background-image{url('eg.svg)}
Maybe if SVG dropped inline
<script>support
-Facebook would allow uploads
-Twitter would allow uploads
-All the email clients would support svg
SVG could be the dominant format for everything icon /logo /button/ UI everywhere browser/ app/ desktop.
If:
-It stays declarative and easy to read <tags>
-It is a standalone format with its own animations
-It integrates better with other formats
-Its a minimal attack vector
-Vendors get on board with the format
-People aren’t so short sighted…
Your a troll and I’m not interested in discussing it further…
^ Again very classy.
I’ve taken note throughout that only your opinion matters. I will make sure to avoid your posts going forward especially since there seems to be an utter absence of you following up on your own claims and statements.
All the best regarding your SMIL or nothing quest and good luck with all those icons you rave about. Since “SMIL is the answer”, I look forward to seeing this SMIL revolution unfold that you speak of so adamantly.
Given that you’re still seeking a plugin. I guess you didn’t learn to write SMIL over the course of the last year even though its so important to you.
Thanks for your closed minded one-sided conversation.