without smil, is gif my only option?

Question

So I've recently encountered this warning

SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

Doing as much research as I could, I keep finding excuses about replacing SMIL with web animations (which SMIL is if we're being technical) but this all involves JavaScript and CSS. I use animated SVGs in <img> tags because that's the point of the SVG format: it's an image.

This was really nice and all because it allowed me to at least organize my images on a web that's notorious for being a giant mess (e.g. JavaScript has no imports so you have to fill the global scope).

Now that I can't animate with SVG, is GIF the only option for self-contained animations?

Answer 1

SMIL is not as dead/deprecated as you believe it is. The Chrome developers recently posted this:

We value all of your feedback, and it's clear that there are use cases serviced by SMIL that just don’t have high-fidelity replacements yet. As a result, we’ve decided to suspend our intent to deprecate and take smaller steps toward other options.

Answer 2

In SVG2, most of the SMIL functionality should be available through CSS animations.
But these are still in draft, and only chrome has started implementing some.

Also, chrome message is just a deprecation message, it' not removed yet from this browser, and I doubt other browsers supporting it will remove it any soon.

Anyway, you can already achieve SMIL like animations on browser not supporting it (e.g IE) thanks to javascript polyfills like fakesmile.

Unfortunately, scripts in svg documents loaded through the HTMLImage element (<img>) won't run. So you have to switch from the <img> tag to the <iframe>, <object> or <embed> tags. These tags do allow the execution of scripts, so you just have to import the polyfill in your svg document, and then load your image as you would do within an <img> tag.

Here is an example that will work on IE :

SMILTest.svg

<svg width="120" height="120" 
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <rect x="10" y="10" width="100" height="100">
        <animate attributeType="XML"
                 attributeName="x"
                 from="-100" to="120"
                 dur="10s"
                 repeatCount="indefinite"/>
    </rect>

    <script xlink:href="https://cdn.rawgit.com/FakeSmile/FakeSmile/master/smil.user.js"></script>

</svg>

index.html

...
<object data="SMILTest.svg"></object>
...

Live example

---

If all your svg images are served from the same domain as your main page, you could also automate it with something like that :

window.addEventListener('load', function(){

    var obj = document.querySelectorAll('object[data*=".svg"],iframe[src*=".svg"],embed[src*=".svg"]');
    Array.prototype.forEach.call(obj, function(o){
        var doc = o.contentDocument;
        var s = document.createElementNS('http://www.w3.org/2000/svg','script');
        doc.documentElement.appendChild(s);
        s.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'https://cdn.rawgit.com/FakeSmile/FakeSmile/master/smil.user.js');
        });

    });

Live example