SVGs that feel like GIFs

(koaning.io)

426 points | by cantdutchthis 20 hours ago ago

107 comments

  • unleaded 11 hours ago

    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 11 hours ago

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

      • bawolff 8 hours ago

        > 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 6 hours ago

          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.

          • bawolff 2 hours ago

            Thanks, i wasn't aware of that. That is crazy.

      • echelon 11 hours ago

        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.

        • qwertox 10 hours ago

          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 5 hours ago

          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.

        • unleaded 11 hours ago

          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)

          • comex 9 hours ago

            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 9 hours ago

              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 9 hours ago

              yes i mean vectors, of course theres some cheating to reach that figure ;)

          • mxfh 8 hours ago

            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 7 hours ago

              >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

          • viraptor 11 hours ago

            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.

          • kccqzy 9 hours ago

            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.

          • tiagod 7 hours ago

            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 5 hours ago

            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.

      • ToucanLoucan 9 hours ago

        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.

      • koakuma-chan 10 hours ago

        Huh? SVG stands for scalable vector graphics.

        • FateOfNations 10 hours ago

          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 7 hours ago

          And JavaScript starts with Java. Naming is hard.

    • johnisgood 11 hours ago

      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

    • lilyball 8 hours ago

      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.

    • Theodores 11 hours ago

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

      Bookmarked!

      • taeric 6 hours ago

        Try clicking on a line's name in the key. Very impressive map.

    • Natsu 9 hours ago

      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.

  • blackant 8 hours ago

    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 4 hours ago

      This is so cool!

  • paulirish 12 hours ago

    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 11 hours ago

      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.

      • not2b 11 hours ago

        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.

      • kzrdude 11 hours ago

        If this gets widespread use, browsers will catch up and in 5-10 years we will have pause buttons! ;)

        • justsomehnguy 10 hours ago

          Meanwhile we are still have a stupid overlay controls because 20 years ago it was an iframe for an ActiveX control.

    • c-hendricks 11 hours ago

      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 11 hours ago

        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 9 hours ago

          > 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.

    • socalgal2 6 hours ago

      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 7 hours ago

      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 5 hours ago

      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 11 hours ago

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

    • ndr 11 hours ago

      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.

    • 11 hours ago
      [deleted]
  • taoh an hour ago

    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.

  • xml 10 hours ago

    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 10 hours ago

      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 7 hours ago

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

  • pjc50 12 hours ago

    "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 11 hours ago

      > 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 9 hours ago

        That smells like Turing complete

        • fouronnes3 8 hours ago

          Tomorrow on HN: GPT-2 in pure SVG

    • abirch 12 hours ago

      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 11 hours ago

      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 12 hours ago

      > 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.

  • viraptor 11 hours ago

    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.

  • exabrial 10 hours ago

    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 9 hours ago

      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 5 hours ago

      > 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 6 hours ago

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

  • latexr 6 hours ago

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

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

  • matths 12 hours ago

    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 12 hours ago

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

  • ramones13 3 hours ago

    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.

  • x187463 11 hours ago

    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 9 hours ago

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

  • layer8 11 hours ago

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

    • c-hendricks 11 hours ago

      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 11 hours ago

        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.

        • sweetgiorni 4 hours ago

          If the SVG being linked to is hosted by GitHub, they could make arbitrary changes before serving it to the browser. IIRC, I uploaded an SVG in a GitHub comment and the resulting image had some of its interactive functionality removed. Of course, that situation is slightly different since the file was uploaded in a comment and not as part of a Git repo... but still.

        • paulryanrogers 10 hours ago

          They could follow the img src and deny any which are harmful. Or even replace them with a sanitized copy.

          • layer8 9 hours ago

            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 8 hours ago

              Doesn't Github already replace externally linked images with its own cached version when rendering out Markdown files?

            • shepherdjerred 4 hours ago

              GitHub definitely mirrors images. Any image you see on a README will be loaded from githubusercontent.com

  • ordinarily 8 hours ago

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

  • sheepybloke 7 hours ago

    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

  • firefax 7 hours ago

    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 3 hours ago

      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.

  • nico 11 hours ago

    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

  • perching_aix 13 hours ago

    That is terrifying. Does look great though!

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

    • hnlmorg 11 hours ago

      Why “terrifying”?

      • Springtime 11 hours ago

        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 11 hours ago

          Ahhh that would make sense. Thanks for the explanation

  • sevensor 12 hours ago

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

    • 7h3kk1d 12 hours ago

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

      • jodacola 8 hours ago

        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

  • chrisweekly 10 hours ago

    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

  • westurner 11 hours ago
  • Datagenerator 12 hours ago

    Today I learned something new, thx!

  • defraudbah 9 hours ago

    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 9 hours ago

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

  • heldrida 7 hours ago

    Glad this was brought back to attention!

  • shmerl 5 hours ago

    Github supports SVG but doesn't support AVIF still.

    • SchemaLoad 5 hours ago

      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.

      • shmerl 3 hours ago

        I don't think it's a big reason not to allow it, since they allow webm with AV1 video which shouldn't be any better than AVIF in practice for compatibility purposes.

  • oblio 11 hours ago

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

    • 0x457 10 hours ago

      but SVG embeds ECMAScript...

      • socalgal2 6 hours ago

        true, but script tags don't run when used in img tags which is how they work on Github READMEs

      • oblio 10 hours ago

        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 8 hours ago

          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 7 hours ago

          > 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.)

  • ayakaneko 9 hours ago

    [dead]

  • netsharc 11 hours ago

    [flagged]

  • xyst 11 hours ago

    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 10 hours ago

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