SVGs that feel like GIFs

[unleaded]

You can do a lot of impressive things with SVGs. Some examples from Wikipedia (no JS in any)

https://upload.wikimedia.org/wikipedia/commons/9/9b/SMIL_mis... missile command clone

https://upload.wikimedia.org/wikipedia/commons/1/13/London_U... tube map

https://upload.wikimedia.org/wikipedia/commons/4/49/Rolling_... rolling shutter animation

[leonidasv]

SVG started as an open competitor to Shockwave/Flash Player and also an application format for PDAs. It almost got networking support once.

[johnisgood]

I like https://upload.wikimedia.org/wikipedia/commons/1/13/London_U.... It shows step-free areas for wheelchair users. It is pretty useful to me.

As for the first link, I immediately had to come up with a way to click on the warheads programmatically. I saved the world! :D

[Theodores]

That checkbox feature in the Tube Map is awesome. I need to up my SVG game.

Bookmarked!

[lilyball]

That first link doesn't work in Safari, and I'm really wondering what's missing. Clicking the button works, but clicking the warheads does nothing. I also don't get the crosshairs cursors that I see when I try this in Firefox.

[Natsu]

After reading the headline and before reading the article, I thought it'd be something like a visual hash of readme files, as an easy way to see if anything had changed between releases.

I was thinking that might be a useful thing for people to spot when a ToS, EULA, etc. changed since those are long documents that frequently get sneaky revisions.

[terribleperson]

I really like the timer display in that missile command clone. The animated numbers make it easy to keep time with it in your peripheral vision.

[blackant]

I have an animated SVG on my README that is rebuilt once a day to include the weather and day of the week. Built during jury duty a few years ago :P https://github.com/jasonlong

[sotix]

This is so cool!

[mbs159]

Looks great!

[paulirish]

If the target is a GitHub readme, then you can embed a video directly. eg https://github.com/paulirish/git-recent#readme

That said, OP's SVG trick may be a smarter choice if the content is a terminal capture.

[pamelafox]

The nice thing about videos is the play/pause/slider UI. Some platforms do add play/pause explicitly to GIFs, using some JS, but as far as I know (and you would know more), that's not built into browsers yet. That's been one of the reasons I often end up using videos instead.

When I've personally animated SVGs for use in RevealJS presentations, I tend to use CSS animations that I could control with JS if I wanted.

[c-hendricks]

If you're going this route of adding a straight up video (which isn't bad!) it helps to edit the readme directly on GitHub. That way they're uploaded to githubusercontent (or whatever the domain is) and not taking up space in your repository.

[socalgal2]

SVG can be color responsive (change color based on the user's dark/light prefs). It can also be size responsive (change based on max width or aspect). Video can't

https://jsbin.com/nohamuguze/edit?html,css,output

edit: sigh.... Works in Firefox and Chrome. Has issues in Safari - I'm sure I could futs with it more and get it to work everywhere but still, sadness

[pcthrowaway]

The SVG trick is less usable for screen captures IMO, since you lose controls.

I think it's best for embedding a motion demo of a feature your software provides, no more than 5 seconds. Even then, a video option may be useful to some people.

[felizuno]

wow Paul I haven't seen your name in years but loved what you used to do with Echo Nest and the Rdio API <3

[yawnxyz]

It's pretty unintuitive that you can just copy text straight from an animation, but that's the neatest part of this!

[ndr]

What would be wild is if the animation pauses on mouse-over.

It's quite a challenge for copy-paste to be useful when the terminal is scrolling.

[westurner]

Tools for making animated SVGs from terminal recordings:

asciinema2svg: https://github.com/thenets/asciinema2svg

termsvg: https://github.com/MrMarble/termsvg

/? terminal svg: https://hn.algolia.com/?q=terminal+svg

/? svg animation: https://hn.algolia.com/?dateRange=all&page=0&prefix=false&qu...

[xml]

A word of caution: There are SVGs which can freeze a page, so make sure that you do not link to any third party SVGs. This is a known bug, but both the Google Chrome and Mozilla team do not want to fix it.

Here is an evil example SVG for demonstration.

DON'T CLICK THIS LINK UNLESS YOU WANT TO RISK CRASHING YOUR BROWSER!

https://asdf10.com/danger.svg

[mmis1000]

Crash a single page or even the whole browser isn't really a security problem though. In fact, there are so many ways to freeze the whole tab or even browser ui with build-in function if you apply it way too many times. (For example, a long chain of blur filters will make the chrome ui non responsive because the render time will skyrocket.)

Although if the affect area does escape the tab, the issue will have higher priority because that would be annoying to user.

[pcthrowaway]

Wait so are recursive XXE attacks like (I'm assuming) this one possible on Github READMEs? Or have they somehow mitigated them?

[pjc50]

"SVG is inherently animated" is new to me, and now I'm going to spend my time on the bus thinking what might be done with that. Does it support infinite loop?

[snackbroken]

> Does it support infinite loop?

Yes, by setting the repeatCount or repeatDur attribute of the <animate> tag to "indefinite". Notably, since <animation> tags effect individual attributes and not the image as a whole, different parts of the image can be on different animation cycles and don't have to add up to some small common multiple.

[abirch]

Yes

https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...

  <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate
      attributeName="rx"
      values="0;5;0"
      dur="10s"
      repeatCount="indefinite" />
  </rect>
  </svg>

[jerf]

SVG embeds Ecmascript (or Javascript as the rest of the world knows it): https://www.w3.org/TR/SVG11/script.html

So not only do you get all the animation support from the attributes, you can fill in anything you need from scripting.

[Jtsummers]

> Does it support infinite loop?

Yes it does.

https://www.w3schools.com/graphics/svg_animation.asp - Has some examples, you may need to refresh to see some of them (ones that don't repeat) in action as you scroll down the page.

[matths]

I like little TIL posts like this, introducing new tools and sharing first-hand experiences with them. Working around restrictions (like using animations in Github Markdown) leads to this kind of creative stuff. I looked at the resulting SVG https://koaning.io/posts/svg-gifs/parrot.svg and realised that a lot of inline SVG elements are used within inline SVG within..the SVG. I've never seen that before. So thank you very much for sharing.

[Aardwolf]

So one could make a quine: an animated SVG that shows its own source code being typed into a text editor

[exabrial]

I freakin love SVG. Someday I hope we just end up with a browser standard:

* pluggable execution engine/memory model (WASM, JVM, CLR, etc)

* SVG output (binary or text)

From there, the developer can choose whatever model he wants to display a "page", no longer be limited to the Document Object Model.

[lpghatguy]

Once upon a time, Flash, Java, Silverlight, ActiveX, etc. ruled the web.

I think the world is _much_ better off today, with a common language and platform. I don't think those big third party runtimes could survive in the browser in today's threat environment.

[CharlesW]

> From there, the developer can choose whatever model he wants to display a "page", no longer be limited to the Document Object Model.

How are apps like AutoCAD Web, Photopea, Figma, Google Docs, Google Earth Web, and Flutter for Web apps (CanvasKit) different than what you're asking for? AFAIK developers aren't forced to use the DOM for applications where it's not the best choice.

[socalgal2]

The DOM (HTML) has the advantage that it's designed to be responsive to different displays. SVG is not

[viraptor]

For some sick reason now I really want to convert some SVG architecture diagrams to movies which reveal the nodes in a dramatic anime battle style with zoom-ins, freeze frames, pulsating lines around, etc.

[x187463]

Well, this is cool. I'll have to see how it handles the sorts of effects I show in the README at https://github.com/ChrisBuilds/terminaltexteffects. I don't know much about SVG but anything that attempts to actually store the text is going to create a very large amount of data. I'll try it for fun.

[edwinjm]

For anyone interested, here’s my animated GitHub readme: https://github.com/edwinm

[mass_and_energy]

Fun fact: since an SVG is technically code and not a binary image file, LLMs are capable of writing them! I tested this with Claude Sonnet 4 and within 7 minutes I was able to describe what I wanted the animated logo to do, and it delivered the SVG faithfully. Even embedded it into the README.md

[ordinarily]

I used SVG animations (and sites like https://www.svgator.com/) long before stuff like Rive or Lottie was commonplace. SVG animations are great.

[latexr]

For those interested in the crazy things SVG can do, Sarah Drasner’s talk is a must.

https://www.youtube.com/watch?v=4laPOtTRteI

[layer8]

What does “Github supports these” mean here? Isn’t it the browser that has to support them?

[c-hendricks]

Github could (should) be doing some sanitation of the HTML included in the readme, so they absolutely could be removing some nasty things SVGs support

[ramones13]

I can’t comment on this one specifically, but SVG animations take notably more CPU usage to render/animate in Chromium browsers compared to GIF or WAAPI. And they block the main thread for at least some animations.

[spauldo]

That's pretty typical. Every element of an SVG is an object with a bunch of properties that can be manipulated and scripted and whatnot. It's great for a lot of things, but it's a lot more resource intensive than "dump this set of pixels onto the screen here" like GIF does or even "perform this set of drawing commands" like HTML canvas does.

[taoh]

Using SVG for Demos is much better than GIFs or Videos due to the lightweight nature. We have created a tool to make the recording and sharing CLI tool demos much easier: https://github.com/DeepGuide-Ai/dg . Simply call `dg capture` and it generates the svg and content ready to paste to README. An added benefit is it can be used for CI validations. It utilizes termsvg under the hood. Would love your comments.

[nico]

This is very cool and useful for the readmes. Thank you for sharing

I’m wondering what other applications this could have

At least every CLI/terminal tool could use it to showcase their application

[sheepybloke]

Also looks like this is supported in Gitlab as well!

Example from the Mariner repo[1] after doing a quick google and finding a link to the site.

[1] https://gitlab.com/radek-sprta/mariner/blob/master/README.md

[perching_aix]

That is terrifying. Does look great though!

I thought people were just doing GIF color palette optimization with ffmpeg instead.

[hnlmorg]

Why “terrifying”?

[firefax]

there's also an apng standard that almost noone makes use of despite not being patent uncumbered like gif is and it does a good job compressing more "pixel art" or line drawings in the way gif does. (tends to be a bit less efficient with actual photographs)

[duskwuff]

It's actually supported in all major browsers now, too: https://caniuse.com/apng

And even in software which don't support APNG, it'll render as the first frame of the animation, which is probably a fine fallback.

[mkl]

GIF hasn't been patent-encumbered since 2004. APNG was initially released in 2004. MNG was earlier, but didn't catch on.

[sevensor]

Cool, but I’m not clear on why you have to upload and then download your cast file to make this work.

[7h3kk1d]

I don't think you do. The --in param on svg-term-cli worked for me locally.

[jgalt212]

I've been waiting forever for email to support SVG. And the wait continues.

Gmail get it together!

https://www.caniemail.com/features/image-svg/

[notpushkin]

Hmm, can you try to sniff it by the MX servers used? (i.e. if address ends with @gmail.com or MX resolves to *.google.com, send PNG instead)

[MangoToupe]

I find it interesting that GIFs went from being implied to be bad quality to being a market of good quality despite little actually changing except for bandwidth.

[spauldo]

I'm pretty sure no one has ever considered GIFs to be high quality. Unless you're a soft-G GIF person describing it to a confused person who thinks you mean the peanut butter :)

[remram]

I'm late to the party, but can anybody explain how that works? I am looking at the SVG source and I'm very confused.

[chrisweekly]

Obligatory mention of Sarah Drasner's fantastic (and somehow still valid and eye-opening in 2025) "SVGs Can Do That?" talk from 2017: https://slides.com/sdrasner/svg-can-do-that

[Datagenerator]

Today I learned something new, thx!

[eviks]

How do you pause/rewind it to actually read that terminal command?

[defraudbah]

anyone knows if it's possible to convert gif to svg or mp4? for instance, I'd like to share a screen recording in svg. It might sound like a dumb idea, maybe it is

[spauldo]

You probably don't want a vector format for screen recording, unless you have a very strange screen. You want a raster format.

And sure, you can convert GIF to MP4, but I would question the workflow of anyone using animated GIFs for screen capture in the first place.

[jackbrookes]

just record as mp4 in the first place, gif has limited colour palette, low frame rate and poor compression

[shmerl]

Github supports SVG but doesn't support AVIF still.

[SchemaLoad]

iOS only recently added support for AVIF, and there are still some in use devices which can't update to a version which supports it.

[heldrida]

Glad this was brought back to attention!

[oblio]

SVG is another proof of worse is better. Nothing should be animated via JavaScript, at least not imperatively.

[0x457]

but SVG embeds ECMAScript...

[s1291]

https://news.ycombinator.com/newsguidelines.html

[iw7tdb2kqo9]

Even though you are just showing off your big brain, animation is totally different thing. GIFs is more understandable as it is a collection of repeating photos.

[xyst]

This is nice until you realize `svg-term-cli` appears to be abandoned

https://github.com/marionebl/svg-term-cli/commits/master/

Last commit ~6 years ago. Does not appear to be any viable forks either.

Fortunately, I use nix to manage my system which sort of forces me to inspect the maintenance history of projects. Better than blindly installing `npm` packages in global namespace.

asciinema on the other hand is very interesting. Seems I can do without the svg aspect here, but something to keep in mind (svg animations).

[jlarocco]

Did you hit a bug or security issue that's blocking you from using it?