7 ms·
SVGs that feel like GIFs
- defraudbah 1y agoanyone 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 1y agojust record as mp4 in the first place, gif has limited colour palette, low frame rate and poor compression
- defraudbah 1y agoit does, however I use it to send short demos when needed. GIF is perfect, small size, resolution isn't critical, it's a perfect choice for me. I don't like sending 300Mb of video every time I have a small thing to demonstrate, GIFs on the other hand work like a charm. Which is why I am shopping for alternatives
- spauldo 1y agoYou 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.
- perching_aix 1y agoThat is terrifying. Does look great though! I thought people were just doing GIF color palette optimization with ffmpeg instead.
- hnlmorg 1y agoWhy “terrifying”?
- Springtime 1y agoI 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 1y agoAhhh that would make sense. Thanks for the explanation
- matths 1y agoI 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 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 1y agoSo one could make a quine: an animated SVG that shows its own source code being typed into a text editor
- sevensor 1y agoCool, but I’m not clear on why you have to upload and then download your cast file to make this work.
- 7h3kk1d 1y agoI don't think you do. The --in param on svg-term-cli worked for me locally.
- jodacola 1y agoDon'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 1y 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?
- Jtsummers 1y ago> Does it support infinite loop? Yes it does. https://www.w3schools.com/graphics/svg_animation.asp 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 1y agoYes https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/animate 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 1y 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 1y agoThat smells like Turing complete
- fouronnes3 1y agoTomorrow on HN: GPT-2 in pure SVG
- jerf 1y agoSVG embeds Ecmascript (or Javascript as the rest of the world knows it): https://www.w3.org/TR/SVG11/script.html 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 1y agoIf the target is a GitHub readme, then you can embed a video directly. eg https://github.com/paulirish/git-recent#readme 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 1y agoIf 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 1y agoWere 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 1y 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.
- pamelafox 1y agoThe 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 1y agoAn 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.
- Datagenerator 1y agoToday I learned something new, thx!
- layer8 1y agoWhat does “Github supports these” mean here? Isn’t it the browser that has to support them?
- c-hendricks 1y agoGithub 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 1y agoBut 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 1y agoThey could follow the img src and deny any which are harmful. Or even replace them with a sanitized copy.
- layer8 1y agoThis 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 1y agoDoesn't Github already replace externally linked images with its own cached version when rendering out Markdown files?
- shepherdjerred 1y ago
- unleaded 1y agoYou 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_missile_demo.svg https://upload.wikimedia.org/wikipedia/commons/9/9b/SMIL_mis... missile command clone https://upload.wikimedia.org/wikipedia/commons/1/13/London_Underground_Overground_DLR_Crossrail_map.svg https://upload.wikimedia.org/wikipedia/commons/1/13/London_U... tube map https://upload.wikimedia.org/wikipedia/commons/4/49/Rolling_shutter_SMIL.svg https://upload.wikimedia.org/wikipedia/commons/4/49/Rolling_... rolling shutter animation
- leonidasv 1y agoSVG started as an open competitor to Shockwave/Flash Player and also an application format for PDAs. It almost got networking support once.
- echelon 1y agoToo 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 1y agoabsolutely. 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 1y agoPeople 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.
- yawnxyz 1y agoIt's pretty unintuitive that you can just copy text straight from an animation, but that's the neatest part of this!
- ndr 1y agoWhat 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.
- hashstring 1y agoSame, or start/stop/back/forward support. I like those neat Github gifs, but hate that I sometimes have to download it and open it frame by frame to see / copy executed commands in certain projs.
- deleted 1y ago[deleted]
- x187463 1y agoWell, 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 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 1y agoSVG is another proof of worse is better. Nothing should be animated via JavaScript, at least not imperatively.
- 0x457 1y agobut SVG embeds ECMAScript...
- oblio 1y agoFairly 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 1y agoYou'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 1y 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.)
- socalgal2 1y agotrue, but script tags don't run when used in img tags which is how they work on Github READMEs
- netsharc 1y ago[flagged]
- s1291 1y agohttps://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
- iw7tdb2kqo9 1y agoEven 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.
- westurner 1y agoTools for making animated SVGs from terminal recordings: asciinema2svg: https://github.com/thenets/asciinema2svg https://github.com/thenets/asciinema2svg termsvg: https://github.com/MrMarble/termsvg https://github.com/MrMarble/termsvg /? terminal svg: https://hn.algolia.com/?q=terminal+svg https://hn.algolia.com/?q=terminal+svg /? svg animation: https://hn.algolia.com/?dateRange=all&page=0&prefix=false&query=svg%20animation&sort=byPopularity&type=story https://hn.algolia.com/?dateRange=all&page=0&prefix=false&qu...
- xyst 1y agoThis is nice until you realize `svg-term-cli` appears to be abandoned https://github.com/marionebl/svg-term-cli/commits/master/ 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 1y agoDid you hit a bug or security issue that's blocking you from using it?
- nico 1y agoThis 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 1y agoFor 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 1y agoA 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 https://asdf10.com/danger.svg
- mmis1000 1y agoCrash 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 1y agoWait so are recursive XXE attacks like (I'm assuming) this one possible on Github READMEs? Or have they somehow mitigated them?
- hashstring 1y agoI think external entities can be disabled completely right, but who knows, it may pay off to check out what GH did here :)
- nneonneo 1y agoIt's recursive, but not XXE. It is 20 layers of nested SVG groups, where the first group contains 10 blue circles, and every subsequent group contains 10 of the previous group. This would render as around 10^20 blue circles.
- pcthrowaway 1y agoSVG is XML-based, unlike HTML which follows the SGML spec From curling the malicious page you can also see: <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000">
- chrisweekly 1y agoObligatory 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 https://slides.com/sdrasner/svg-can-do-that
- exabrial 1y agoI 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 1y agoOnce 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.
- exabrial 1y agoUnfortunately "common" means being what Google wants, and they abuse their market position to push whatever through (advertising support in an HTML client... what?)
- socalgal2 1y agoThe DOM (HTML) has the advantage that it's designed to be responsive to different displays. SVG is not
- CharlesW 1y 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.
- edwinjm 1y agoFor anyone interested, here’s my animated GitHub readme: https://github.com/edwinm https://github.com/edwinm
- ayakaneko 1y ago[dead]
- ordinarily 1y agoI used SVG animations (and sites like https://www.svgator.com/ https://www.svgator.com/) long before stuff like Rive or Lottie was commonplace. SVG animations are great.
- blackant 1y agoI 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 https://github.com/jasonlong
- punkbit 1y agoGlad this was brought back to attention!
- firefax 1y agothere'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 1y agoIt's actually supported in all major browsers now, too: https://caniuse.com/apng 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 1y agoGIF hasn't been patent-encumbered since 2004. APNG was initially released in 2004. MNG was earlier, but didn't catch on.
- sheepybloke 1y agoAlso 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 https://gitlab.com/radek-sprta/mariner/blob/master/README.md
- latexr 1y agoFor those interested in the crazy things SVG can do, Sarah Drasner’s talk is a must. https://www.youtube.com/watch?v=4laPOtTRteI https://www.youtube.com/watch?v=4laPOtTRteI
- shmerl 1y agoGithub supports SVG but doesn't support AVIF still.
- SchemaLoad 1y agoiOS 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 1y agoI 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.
- ramones13 1y agoI 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 1y agoThat'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 1y agoUsing 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 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.
- MangoToupe 1y agoI 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 1y agoI'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 :)
- mass_and_energy 1y agoFun 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
- jgalt212 1y agoI've been waiting forever for email to support SVG. And the wait continues. Gmail get it together! https://www.caniemail.com/features/image-svg/ https://www.caniemail.com/features/image-svg/
- notpushkin 1y agoHmm, 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)
- eviks 1y agoHow do you pause/rewind it to actually read that terminal command?
- remram 1y agoI'm late to the party, but can anybody explain how that works? I am looking at the SVG source and I'm very confused.