Animated PNG in Firefox, Opera and WebKit? Easy!

Once, out of boredom, I wanted to create a beautiful full-color animation with 8-bit transparency. It is clear that the GIF for this purpose did not fit and I began to look for alternatives. Flash was not even considered in this capacity - the processor is too heavy, poorly embedded in the page on top of other elements, and it is not worth it for everyone.

At first my gaze fell on MNG, a relative of PNG. “The format specification was released back in 2001, so it is surely implemented in all modern browsers!” And here I was waited by the first disappointment. The format was too complicated to implement - the Mozilla implementation, they said, contained as many lines of code as all the other formats combined, for which it was removed from their products. Other browser manufacturers, it seems, did not even try to implement this format. Of course, there is a plugin for browsers that support Netscape plugins, but this is no better than Flash. I note only that, perhaps, the format is too ahead of its time. Judging by the description of the possibilities, this is such a raster SVG.

Further searches led me to the APNG format. The format is as simple as two rubles: the file contains changes in the frame from the previous one, with some minor nuances. But the most important thing is that browsers that do not support this format will display a static image. In general, the format is similar in features to GIF. It was proposed by Mozilla as a replacement for the monstrous MNG. Checking in Firefox - everything works fine. Opera - also. I open it in Chrome and ... I get a static picture. What happened: Mozilla offered to include the APNG in the PNG specification. This idea was rejected by voting. And now some browsers support this format, and some do not.

A picture clearly appeared before me:
Mozilla: Your format is bad, you do not understand anything in animated PNG! We made our own, without chess and poetess. Include it in the specification!
PNG development team: And here you are!
')
As is often the case, due to human conceit, we have been enjoying the use of the long-outdated GIF for ten years now.

And here I was visited by the idea: it’s possible to insert raster images in SVG ?!

If the mountain does not go to Mahomet

For experiments, I borrowed a picture from Mozilla:


We break the picture into separate frames:

And so on. It turned out 25 frames.

Specify the size of the SVG, equal to the size of the largest frame, and insert the image. The order, by the way, is not important.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="148" height="148"> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_001.png" /> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_002.png" /> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_003.png" /> … <image x="0" y="0" width="148" height="148" xlink:href="spinfox_024.png" /> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_025.png" /> </svg> 

Then I tried to simply overlay the frames sequentially on each other, but did not take into account the transparency and got the sun from the fox's ear (the same effect can be observed in IE9):

The effect can be used to implement one of the APNG modes: drawing the next frame over the previous one.

Now we animate the opacity property. You can animate and coordinate and shift frames out of sight.
Here the problem may occur in that the transparency will change smoothly and a loop or flicker will appear. For this, we specify calcMode as "discrete".
List of reference values: values ​​= "1; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0 ; 0; 0; 0 ". As you can see, this is the first frame. The first value is 1 - the image is not transparent. On all other frames - completely transparent.
The duration of the animation (dur) is chosen so that, when divided by the number of frames, we obtain the time of one frame. If a frame has to be on the screen twice as long, the list of reference values ​​will have to be doubled, or the duration of one value should be changed, which is somewhat more complicated.

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="148" height="148"> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_001.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0" calcMode="discrete" repeatCount="indefinite" /> </image> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_002.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="0;1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0" calcMode="discrete" repeatCount="indefinite" /> </image> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_003.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="0;0;1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0" calcMode="discrete" repeatCount="indefinite" /> </image> … <image x="0" y="0" width="148" height="148" xlink:href="spinfox_024.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1;0" calcMode="discrete" repeatCount="indefinite" /> </image> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_025.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1" calcMode="discrete" repeatCount="indefinite" /> </image> </svg> 

Now we have only one inconvenience - the animation consists of many files. We will solve this problem with the help of data: URL, having embedded images directly into SVG.

Final result

Source APNG size: 613321 bytes;
SVG size: 799692 bytes;
Size of SVG compressed with gzip: 601409 bytes. Even less than the original!
PNG frames were optimized using pngout.

The attentive reader may have noticed that this “secret technique” does not work in IE. I can only advise you to give him another code with GIF or Flash, wait for IE10 and prepare a shovel.