> Curious if Animated SVGs are also a thing.

Yes. Relevant animation elements:

• <set>

• <animate>

• <animateTransform>

• <animateMotion>

See https://www.w3schools.com/graphics/svg_animation.asp

Slightly related, I recently hit on this SVG animation bug in Chrome (that someone else found):

https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-b...

Oh TIL - Thanks!

This could possibly be used to build full fledged games like pong and breakout :)

SVG also supports Javascript, which will probably be a lot more useful for games.

It supports JavaScript when used as a document, but when used as an "image" by a browser (IMG tag, CSS features) JavaScript and the loading of external resources are disabled.

Overshadowed by CSS animations for almost all use cases.

But animated gradient outlines on text is the only use-case I care about.

"Use case" is written without hyphen https://en.m.wikipedia.org/wiki/Use_case

I have to differentiate myself from LLMs by using words wrong though

Hyphenation of multi-word nouns is a process in English that usually happens after some time of usage as separate words. It often happens before eventually merger into a single compound word noun. Such as: "Electronic Mail" to "E Mail" to "e-mail" to "email".

Given how often it is used as a jargon term in software development, I can absolutely see this usage of "use-case" here as a "vote" for the next step in the process. Will we eventually see "usecase" become common? It's possible. I think it might even be a good idea. I'm debating adding my own "votes" for the hyphen moving forward.

*in browsers

Most other SVG renderers don't support much CSS.

both GIF and PNG use zipping for compressing data, so APNG are not much better than GIF

PNG uses deflate (same as zip) but GIF uses LZW. These are different algorithms. You should expect different compression results i would assume.

ZIP is theoretically a generic container and theoretically supports a number of different compression formats. Stored (no compression) and deflate are the only ones you can count on being supported everywhere though so in practice you're not wrong.

Remember when we unwillingly trained the generative AI:s of our time with an endless torrent of factoids?

(A)PNG supports semi-transparency. In GIF a pixel is either full transparent or full opaque.

Also while true color gifs seem to be possible it is usually limited to 256 colors per image.

For those reasons alone APNG is much better than GIF.

> Also while true color gifs seem to be possible it is usually limited to 256 colors per image.

No, it's limited to 256 colors per frame and frames can have duration 0 which allows you to combine multiple frames into more than 256 color images.

I was under the impression many gifs these days are actually served as soundless videos, as those basically compress better.

Can animated PNG beat av1 or whatever?

APNG would be for lossless compression, and probably especially for animations without a constant frame rate. Similar to the original GIF format, with APNG you explicitly specify the duration of each individual frame, and you can also explicitly specify looping. This isn’t for video, it’s more for Flash-style animations, animated logos/icons [0], or UI screen recordings.

[0] like for example these old Windows animations: https://www.randomnoun.com/wp/2013/10/27/windows-shell32-ani...

All valid points, however AV1 also supports lossless compression and is almost certainly going to win the file size competition against APNG every time.

https://trac.ffmpeg.org/wiki/Encode/AV1#Losslessencoding

False, or misleading.

The AV1 spec [1] does not allow RGB color spaces, therefore AV1 cannot preserve RGB animations in a bit-identical fashion.

[1] https://aomediacodec.github.io/av1-spec/av1-spec.pdf

AV1 supports YCoCg, which encodes RGB losslessly.

It is a bit-reversible rotation of the RGB cube. It makes the channels look more like luma and chroma that the codec expects.

False.

8-bit YCoCg (even when using the reversible YCoCg-R [1] scheme) cannot represent 8-bit RGB losslessly. The chroma channels would need 9 bits of precision to losslessly recover the original 8-bit RGB values.

[1] https://www.microsoft.com/en-us/research/wp-content/uploads/...

AVIF supports 10 and 12 bit encoding, which losslessly fits the 9-bit rotation of 8-bit data.

It's also possible to directly encode RGB (channels ordered as GBR) when you set identity matrix coefficients, it's just less efficient.

I've implemented this in my AVIF encoder, so I know what I'm saying.

Show me any of the popular image conversion tools (avifenc, imagemagick, photoshop, ffmpeg, whatever...) that does the identity matrix hack when asking for lossless AVIF. None of them do it. Many people have been burned by "lossless" AVIF, where they converted their images in the mistaken belief that the result will be bit-identical to the original, only to find out that this wasn't the case, after they've deleted the original files.

That's shifting the goalposts from what the standard supports to the current state of the ecosystem. It's certainly an interesting point though. If common implementations all have bugs regarding lossless encoding that's a pretty bad situation.

> is almost certainly going to win the file size competition against APNG every time

For video content maybe. Pixel-art gifs are not something video codecs do well at without introducing lots of artifacts.

Artifacts? We're talking about lossless compression here. There aren't any artifacts by definition.

> many gifs these days are actually served as soundless videos

That's not really true. Some websites lie to you by putting .gif in the address bar but then serving a file of a different type. File extensions are merely a convention and an address isn't a file name to begin with so the browser doesn't care about this attempt at end user deception one way or the other.

You said that's not really true and the described exactly how it's true, what did you mean?

I parsed the comment as something along the lines of clever hackers somehow stuffing soundless videos into gif containers which is most certainly not what is going on. I was attempting to convey that they have nothing to do with gifs. Gifs are not involved anywhere in the process.

I'm not sure why people disagree so strongly with what I wrote. Worst case scenario is that it's a slightly tangential but closely related rant about deceptive web design practices. Best case scenario is that someone who thought some sort of fancy trick involving gifs was in use learns something new.

> Can animated PNG beat av1 or whatever?

Animated PNGs can't beat GIF nevermind video compression algorithms.

Once you add more than 256 different colours in total, GIF explodes in terms of file size. It's great for small, compact images with limited colour information, but it can't compete with APNG when the image becomes more detailed than what you'd find on Geocities.

No, APNG explodes in size in that case.

In APNG it's either the same 256 colors for the whole animation, or you have to use 24-bit color. That makes the pixel data 3 times larger, which makes zlib's compression window effectively 3 times smaller, hurting compression.

OTOH GIF can add 256 new colors with each frame, so it can exceed 256 colors without the cost of switching all the way to 16.7 million colors.

> Animated PNGs can't beat GIF nevermind video compression algorithms.

Not entirely true, it depends on what's being displayed, see a few simple tests specifically constructed to show how much better APNG can be vs GIF and {,lossy} webp: http://littlesvr.ca/apng/gif_apng_webp.html

Of course I don't think it generalizes all that well…

I tried these examples on ezgif, and indeed apng manages to be smaller than webp every single time. Weird, I thought webp was almost always smaller. Is this because GIF images are already special, or apng uses better compression than png?

edit: using the same ezgif webp and apng on a H.264 source, apng is suddenly 10x the size than webp. It seems apng is only better if the source is gif

I have no idea! I actually hoped someone would show a much more comprehensive and serious benchmark in response, but that has failed to materialize.

I would guess that apng only wins when indexed colors can be used. That guess would match what you saw using an h264 file for the source.

Almost like video codecs and animated images are different niches that optimize for different content.

You're correct and I was considering adding a footnote that if you use indexed colors like a GIF then PNG can beat GIF due to better compression algorithms. But when most people think of APNG they think of lossless compression rather than lossy compression.

Indexed can be lossless when the source already uses few colors, e.g. because you want to improve the compression of an existing GIF or limit colors for stylistic choice (common in pixel art).

I doubt it, given png is a lossless compression format. For video thats almost never what you want.

For animations with lots of regions of solid color it could do very well.

So do most other video formats. I'm not really seeing any advantages, and I see a lot of disadvantages vs h264 and friends.

Not without lots of artifacts.

Its also because people like to "pause" animations, and that is not really an option with apng & gif.

why not? that's up to the program displaying the animation, not the animation itself -- i'm sure a pausable gif or apng display program is possible

It's absolutely possible. Browsers even routinely pause playback when images aren't visible on screen.

They just don't have a proper UI and JS APIs exposed, and there's nothing stopping them from adding that.

IMO browsers are just stuck with tech debt, and maintainin a no-longer-relevant distinction between "animations" and "videos". Every supported codec should work wherever GIF/APNG work and vice versa.

It's not even a performance or complexity issue, e.g. browsers support AVIF "animations" as images, even though they're literally fully-featured AV1 videos, only wrapped in a "pretend I'm an image" metadata.

I wish browsers still paused all animations when the user hits the Esc key. It's hard to read when there are distracting animations all over most pages.

> They just don't have a proper UI and JS APIs exposed, and there's nothing stopping them from adding that.

Browsers should just allow animated gifs and apngs in <video>

More important would be to allow (silent) videos in <img>.

Browsers used to support pausing GIFs by pressing the escape key.

Soundless videos cannot be used in environments that expect an image like embeds in forums and similar.

It's a shame that browser vendors didn't add silent looping video support to the img tag over (imo) baseless concerns.

> Curious if Animated SVGs are also a thing.

SVG is just html5, it has full support for CSS, javascript with buttons, web workers, arbitrary fetch requests, and so on (obviously not supported by image viewers or allowed by browsers).

Browsers support all that sort of thing, as long as you use an iframe. (Technically there are sone subtle differences between that and html5, but you are right its mostly the same)

If you use an <img> tag, svgs are loaded in "restricted" mode. This disables scripting and external resources. However animation via either SMIL or CSS is still supported.

And non-browser image renders support almost none of those advanced totally-still-SVG features (and I don't blame them) while they often do support animated GIFs.

It nearly got raw socket support back in the day: https://news.ycombinator.com/item?id=35381755

When it comes to converting small video snippets to animated graphics, I think WEBP was much better than APNG from the beginning. Only if you use GIF as intermediate format then APNG was competitive.

Nowadays, AVIF serves that purpose best I think.

webm or any other non-gimped video codec would be a much better format for that use case. Unfortunately browsers don't allow those in image contexts so we are stuck with an inferior "state of the art" literally-webm-with-deliberately-worse-compression webp standard.

AVIF is only starting to become widespread so can't be used without fallback if you care about your users. Not sure how it compares to AV1 quality/compression wise but hopefully its not as gimped as webp and there will encoders that aren't as crap as libwebp that almost everyone uses.

> Unfortunately browsers don't allow those in image contexts

The fact that we have the <img> element at all is bad. HTML has since the early days a perfectly capable <object> which can even be nested to provide fallback, but browser support was always spotty.

The Acid2 test famously used <object> to shame browser vendors into supporting it at least to some extent.

It seems crazy to think about, but I interviewed with a power company in 2003 that was building a web app with animated SVGs.

Some years ago I've used the Lottie (Bodymovin?) library. It worked great and had a nice integration: you compose your animation in Adobe After Effects, export it to an svg plus some json, and the lottie JS script would handle the animation for you. Anything else with (vector, web) animations I've tried is missing the tools or the DX for me to adopt. Curious to hear if there are more things like this.

I'm not sure about the tools and DX around animated PNGs. Is that a thing?

Almost nowhere that supports uploading GIFs supports APNG or animated WEBP. The back end support is so low it's close to zero. Which is really frustrating.

Do you mean services that reencode gif files to webm/mp4? apng just works everywhere that png works, and will remain animated as long as it's not re-encoded.

You can even have one frame that gets shown if and only if animation is not supported.

Yes, most places only show the first frame. They ignore the animation, sadly. Even while accepting GIFs.

That's not the first frame, it's the fallback image that png decoders which are unaware of apng decode.

It is never shown by compliant apng decoders. You can make it the first frame of the animation, or any other image you want. e.g. some text saying "APNG unsupported"

> So animated GIFs can be replaced by Animated PNGs with alpha blending with transparent backgrounds and lossless compression!

Not progressively though unless browsers add a new mime type for it which they did not bother to do with animated webp.