[HN Gopher] SVGs that feel like GIFs
___________________________________________________________________
SVGs that feel like GIFs
Author : cantdutchthis
Score : 343 points
Date : 2025-07-08 08:23 UTC (14 hours ago)
(HTM) web link (koaning.io)
(TXT) w3m dump (koaning.io)
| perching_aix wrote:
| That is terrifying. Does look great though!
|
| I thought people were just doing GIF color palette optimization
| with ffmpeg instead.
| hnlmorg wrote:
| Why "terrifying"?
| Springtime wrote:
| I think some have only heard bad things about SVG exploits
| but perhaps aren't familiar that IMG embedded SVGs (like
| those used in Github readmes) don't carry those risks as
| they're restricted from running Javascript, external content
| or videos.
| hnlmorg wrote:
| Ahhh that would make sense. Thanks for the explanation
| matths wrote:
| 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 wrote:
| So one could make a quine: an animated SVG that shows its own
| source code being typed into a text editor
| sevensor wrote:
| Cool, but I'm not clear on why you have to upload and then
| download your cast file to make this work.
| 7h3kk1d wrote:
| I don't think you do. The --in param on svg-term-cli worked for
| me locally.
| jodacola wrote:
| Don't need to upload. I just tested this out because I didn't
| want to have to upload to asciinema: $
| asciinema rec test.cast <do stuff in the terminal then
| ctrl-d> $ cat test.cast | svg-term --out=test.svg
|
| And voila, no upload needed.
|
| edit: formatting
| pjc50 wrote:
| "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?
| Jtsummers wrote:
| > 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.
| abirch wrote:
| 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>
| snackbroken wrote:
| > 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.
| ngruhn wrote:
| That smells like Turing complete
| fouronnes3 wrote:
| Tomorrow on HN: GPT-2 in pure SVG
| jerf wrote:
| 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.
| paulirish wrote:
| 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.
| c-hendricks wrote:
| 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.
| hbn wrote:
| Were people doing that other option?
|
| The idea of committing a video to your repository for a PR
| seems silly. Every PR adds a new video to the codebase? Do
| you make a PR to prune them every once in a while?
| aziaziazi wrote:
| > Every PR adds a new video to the codebase
|
| Git commits only differences with the precedent commit, not
| the entire repository. Therefore the video is only
| committed once as long as that video doesn't change.
| pamelafox wrote:
| 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.
| kzrdude wrote:
| If this gets widespread use, browsers will catch up and in
| 5-10 years we will have pause buttons! ;)
| justsomehnguy wrote:
| Meanwhile we are still have a stupid overlay controls
| because 20 years ago it was an iframe for an ActiveX
| control.
| not2b wrote:
| An animated GIF is essentially a video with a large number of
| restrictions and poor compression compared to an actual
| video. Often sites convert animated GIFs to videos because
| the result is smaller and works better.
| pcthrowaway wrote:
| 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.
| socalgal2 wrote:
| 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
| felizuno wrote:
| 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
| Datagenerator wrote:
| Today I learned something new, thx!
| layer8 wrote:
| What does "Github supports these" mean here? Isn't it the browser
| that has to support them?
| c-hendricks wrote:
| 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
| layer8 wrote:
| But it's just an image link to some SVG file. No HTML
| involved, only a Markdown image link that GitHub will render
| as an HTML <img src="..."/> element. The actual SVG file
| linked to isn't even necessarily hosted by GitHub.
| paulryanrogers wrote:
| They could follow the img src and deny any which are
| harmful. Or even replace them with a sanitized copy.
| layer8 wrote:
| This is nonsense. The actual file at the URL could change
| at any time. No system is doing something like that if it
| isn't serving the file itself.
|
| And, getting back to the original point, you wouldn't be
| worrying that GitHub doesn't "support" a URL that happens
| to point to a file of a particular subformat that the URL
| itself doesn't disclose.
| Evidlo wrote:
| Doesn't Github already replace externally linked images
| with its own cached version when rendering out Markdown
| files?
| unleaded wrote:
| 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
| johnisgood wrote:
| I like https://upload.wikimedia.org/wikipedia/commons/1/13/Lond
| on_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
| leonidasv wrote:
| SVG started as an open competitor to Shockwave/Flash Player and
| also an application format for PDAs. It almost got networking
| support once.
| echelon wrote:
| Too bad nothing has ever come close to replacing the SWF
| format.
|
| You could pack so much into a single binary distributable
| media file. Games, videos, websites, infographics, tools,
| chat rooms.
|
| SWF was brilliant and it should have thrived.
| unleaded wrote:
| absolutely. really is strange that you used to be able to
| download a music video in less than 2-3mb with lossless
| video quality, but now that's not really a thing anymore. I
| feel like if Adobe didn't get greedy and encourage its use
| for absolutely everything (and/or web standards got up to
| speed faster) people wouldn't wouldn't approach talking
| about Flash with the 10-foot pole they often do today (as a
| platform--not how everyone talks about how much they loved
| flash games)
| viraptor wrote:
| People loved the games, but not the super custom flash
| based menu that requires a loading bar and works totally
| different and slightly janky on each website.
| philsnow wrote:
| A time before HIGs.. https://www.penny-
| arcade.com/comic/1999/03/03/macromedia-fla...
| comex wrote:
| What do you mean by "HD music video"? If you mean a
| literal video, then today's video and audio codecs are
| more efficient than what Flash used, not less. If the
| music videos were that small then they must have given up
| a lot in quality. If you mean a Flash vector animation,
| then that's different of course, but that doesn't
| describe a typical music video.
| kccqzy wrote:
| Conventional video codecs are also pretty good at
| compressing animations. I once made a multi-minute
| animation of a plane taking off and H.264 compresses it
| to hundreds of kilobytes.
| unleaded wrote:
| yes i mean vectors, of course theres some cheating to
| reach that figure ;)
| kccqzy wrote:
| That's because people have more bandwidth today and
| therefore videos online are higher quality now. You can
| easily transcode a music video to 3MB using modern codecs
| (and even not so modern ones like H.264), and it will
| look somewhat worse than typical online video sites but
| still pretty good.
| mxfh wrote:
| What do you mean? Lossless animations with a soundtrack
| or some embeded video?
|
| This is 570k and runs in a webassembly runtime:
|
| https://archive.org/details/flash_badger
|
| SVG could do that too. Minimal javascript plus audio
| tags.
|
| http://xn--dahlstrm-t4a.net/svg/audio/html5-audio-in-
| svg.svg
| unleaded wrote:
| >badger.swf
|
| yes stuff like that & the IOSYS MVs. you technically can
| do stuff like that today theres nothing stopping you from
| doing it with svgs but i meant more the social part of
| it. its just interesting that if you want to do the same
| thing (put an animated video on the inernet) the usual
| way its now 10x bigger yet looks worse.
|
| also i dont think theres anything like Flash (the
| authoring software) but for SVGs. i hope there is one but
| for now I wouldnt say inkscape + a text editor counts
| tiagod wrote:
| Honestly, we can have that today. The real power of Flash
| was the fully integrated development environment. It was
| one of the first programming experiences I had, and all I
| needed to do amazing stuff was a book and a copy of Flash
| MX.
| acdha wrote:
| Adobe needed to take Flash seriously as a platform.
| Instead they neglected it, making it synonymous with
| crashes and security problems, and they milked developers
| as much as possible.
|
| I bought Flash once. I found a crashing bug and jumped
| through hoops reporting it. A year or so later, they
| updated the ticket to suggest I drop $800 for the
| privilege of seeing whether it had been fixed. I did not
| make the mistake of giving them money ever again.
|
| They had such an opportunity to take advantage of a
| platform with a pre-iPhone deployment in the high 90%
| range, and they just skimped it into oblivion. What a
| disgrace for everyone who actually cared.
| qwertox wrote:
| If it weren't for Adobe's crappy support of the player, I
| would agree, but they did much more harm than good with it.
| It was a massive attack surface and they didn't care about
| closing their zero-day drive-by exploits in a sensible
| timeframe.
|
| Also they were basically the founders of persistent
| fingerprinting via Flash cookies.
|
| So no, thank you, I'm more than happy it didn't thrive more
| than it already did.
| felizuno wrote:
| SWF was simultaneously brilliant and a festering wound that
| required amputation, and I would have welcomed a
| replacement that wasn't the biggest attack surface on the
| internet. I too love Homestar Runner.
|
| IMO the fact that it belonged to Adobe was the biggest
| problem, if SWF had been managed by a more capable software
| org it could have been maintained in a way that kept it
| from getting banned from the internet. And remember, that's
| how bad it was - it got banned from the internet because it
| was absolutely indefensible to leave it around. SWF getting
| cancelled magically stopped every single family member I
| have from calling me with weird viruses and corruption they
| managed to stumble into. I saw more malicious code
| execution through SWF than I saw from my dumb little
| cousins torrenting sus ROMs and photoshop crackers. I'd
| rather not have it than have those problems persist.
| koakuma-chan wrote:
| Huh? SVG stands for scalable vector graphics.
| FateOfNations wrote:
| Functionally, it can do a lot of the same things as
| SWF/Flash. Can do animations (see article) and it's
| scriptable using JavaScript for interactivity.
| tiagod wrote:
| And JavaScript starts with Java. Naming is hard.
| ToucanLoucan wrote:
| Thank fuck it didn't. I can't fathom how quickly the
| obnoxious advertiser industrial complex would've grabbed hold
| of that and invented whole new genres of shoving products in
| our collective face.
| bawolff wrote:
| > It almost got networking support once.
|
| SVG support full javascript. It has networking support.
|
| (In web browsers the <img> tag allows only restricted subset,
| butbyou get the full thing with iframe)
| ameliaquining wrote:
| I think the above comment refers to the proposal for SVG
| 1.2 (which never shipped) to include an API for opening
| _raw network sockets_ : https://www.w3.org/TR/2004/WD-
| SVG12-20040510/#rawsocket
|
| (It observes that this feature raises certain security
| risks, but promises to figure out by the next draft how to
| fix them. This of course never happened.)
|
| I recall Hixie had a funny rant about this, but I can't
| find it.
| Theodores wrote:
| That checkbox feature in the Tube Map is awesome. I need to up
| my SVG game.
|
| Bookmarked!
| taeric wrote:
| Try clicking on a line's name in the key. Very impressive
| map.
| Natsu wrote:
| 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.
| lilyball wrote:
| 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.
| yawnxyz wrote:
| It's pretty unintuitive that you can just copy text straight from
| an animation, but that's the neatest part of this!
| ndr wrote:
| 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.
| x187463 wrote:
| 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.
| oblio wrote:
| SVG is another proof of worse is better. Nothing should be
| animated via JavaScript, at least not imperatively.
| 0x457 wrote:
| but SVG embeds ECMAScript...
| oblio wrote:
| Fairly sure there are SVG subsets that can be used. Not all
| of them embed JS.
|
| And that wasn't my point. SVG supports animation primitives.
| No need to animate through JS.
| 0x457 wrote:
| You're confusing language and runtime environment. SVG lets
| you use ecmascript of some version in its <script> tags, it
| obviously doesn't provide browser api available to you from
| javascript in a browser.
| deathanatos wrote:
| > _And that wasn 't my point. SVG supports animation
| primitives. No need to animate through JS._
|
| This isn't (AFAICT) animated via JS. (It's animated by a
| CSS animation, inside the SVG. TFA is wrong about the
| <animate> tag being what is leveraged.)
| socalgal2 wrote:
| true, but script tags don't run when used in img tags which
| is how they work on Github READMEs
| westurner wrote:
| 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...
| xyst wrote:
| 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 wrote:
| Did you hit a bug or security issue that's blocking you from
| using it?
| nico wrote:
| 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
| viraptor wrote:
| 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.
| xml wrote:
| 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 wrote:
| 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 wrote:
| Wait so are recursive XXE attacks like (I'm assuming) this one
| possible on Github READMEs? Or have they somehow mitigated
| them?
| chrisweekly wrote:
| 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
| exabrial wrote:
| 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 wrote:
| 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.
| socalgal2 wrote:
| The DOM (HTML) has the advantage that it's designed to be
| responsive to different displays. SVG is not
| edwinjm wrote:
| For anyone interested, here's my animated GitHub readme:
| https://github.com/edwinm
| defraudbah wrote:
| 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
| jackbrookes wrote:
| just record as mp4 in the first place, gif has limited colour
| palette, low frame rate and poor compression
| ordinarily wrote:
| I used SVG animations (and sites like https://www.svgator.com/)
| long before stuff like Rive or Lottie was commonplace. SVG
| animations are great.
| blackant wrote:
| 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
| heldrida wrote:
| Glad this was brought back to attention!
| firefax wrote:
| 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)
| sheepybloke wrote:
| 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
| latexr wrote:
| For those interested in the crazy things SVG can do, Sarah
| Drasner's talk is a must.
|
| https://www.youtube.com/watch?v=4laPOtTRteI
| shmerl wrote:
| Github supports SVG but doesn't support AVIF still.
___________________________________________________________________
(page generated 2025-07-08 23:00 UTC)