- 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
- 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
by paulirish
5 subcomments
- 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.
- It's pretty unintuitive that you can just copy text straight from an animation, but that's the neatest part of this!
- 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...
- "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?
- 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
- 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.
- 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.
- 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.
- For anyone interested, here’s my animated GitHub readme:
https://github.com/edwinm
- 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.
- For those interested in the crazy things SVG can do, Sarah Drasner’s talk is a must.
https://www.youtube.com/watch?v=4laPOtTRteI
by ordinarily
0 subcomment
- I used SVG animations (and sites like https://www.svgator.com/) long before stuff like Rive or Lottie was commonplace. SVG animations are great.
by mass_and_energy
0 subcomment
- 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
- What does “Github supports these” mean here? Isn’t it the browser that has to support them?
by ramones13
1 subcomments
- 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.
- 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.
- How do you pause/rewind it to actually read that terminal command?
- 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
by sheepybloke
0 subcomment
- 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
- 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)
by perching_aix
1 subcomments
- That is terrifying. Does look great though!
I thought people were just doing GIF color palette optimization with ffmpeg instead.
- Cool, but I’m not clear on why you have to upload and then download your cast file to make this work.
by chrisweekly
0 subcomment
- 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
by Datagenerator
0 subcomment
- Today I learned something new, thx!
by defraudbah
2 subcomments
- 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
- Github supports SVG but doesn't support AVIF still.
- Glad this was brought back to attention!
- 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/
by MangoToupe
1 subcomments
- 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.
- SVG is another proof of worse is better. Nothing should be animated via JavaScript, at least not imperatively.
- [dead]
- [flagged]
- 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).
Hacker News
