An SVG is all you need
by sadiq on 12/11/2025, 7:25:14 PM
https://jon.recoil.org/blog/2025/12/an-svg-is-all-you-need.html
Comments
by: some_guy_nobel
I agree with the author when they write:<p>""" In my idealistic vision of how scientific publishing should work, each paper would be accompanied by a fully interactive environment where the reader could explore the data, rerun the experiments, tweak the parameters, and see how the results changed. """<p>I do like seeing larger labs/companies releasing research full of SVGs. In recent memory, I quite liked this from NVIDIA:<p><a href="https://research.nvidia.com/labs/dbr/blog/illustrated-evo2/" rel="nofollow">https://research.nvidia.com/labs/dbr/blog/illustrated-evo2/</a>
12/11/2025, 10:31:26 PM
by: _ache_
I really like SVG, I did a lot of things with it and some interesting ones. The only blame I have is that it is sometime slow.<p>Like for QR Code, precise maps or +100 pixels wide squares. More than 100 "DOM" elements and it will take multiple seconds to show.<p>The animations also are slow too, compared to canvas, plain CSS or Lottie but nothing very cursed, it's mostly fine.
12/11/2025, 10:14:18 PM
by: orliesaurus
My day job involves building dashboards, and SVGs have been invaluable for crisp icons and graphs... the portability across sizes is a blessing, but some of the more exotic filter effects still fail in certain browsers.<p>ALSO I've run into security reviews that flag inline SVGs because they can embed scripts... would love to see more tooling to lint and sanitize them before deployment.<p>BUT seeing a two-decade-old vector still render correctly gives me confidence that the core spec is solid.
12/11/2025, 9:31:49 PM
by: ludwigschubert
The first Distill publication[0] made tasteful use of minimal interactivity through JavaScript/d3.js[1] on top of SVGs. Many of the illustrations were initially drawn in GUI editors.<p>(Outstanding work by Shan Carter; it’s what I first saw of his style and it’s what made me want to join his team.)<p>[0] <a href="https://distill.pub/2016/augmented-rnns/" rel="nofollow">https://distill.pub/2016/augmented-rnns/</a> [1] <a href="https://github.com/distillpub/post--augmented-rnns/blob/master/public/assets/rnn_write.html" rel="nofollow">https://github.com/distillpub/post--augmented-rnns/blob/mast...</a>
12/11/2025, 8:30:52 PM
by: jonludlam
Author here: I've just made a ninja edit of the post as it didn't really make clear a quite important point - the SVG is literally 20 years old, and still works, astonishingly. I'm not sure much else I wrote around the time would still work without <i>some</i> editing!
12/11/2025, 9:21:22 PM
by: WillAdams
Ages ago, when doing the instructions for the opensource CNC Shapeoko v2 it became necessary (after the project was featured w/ a full page in _Popular Mechanics_ magazine to cater to users who could not visualize as well as the early adopters were able to, so the diagrams were made interactive:<p><a href="https://github.com/shapeoko/Docs/blob/gh-pages/content/tPictures/PS20028-100.svg" rel="nofollow">https://github.com/shapeoko/Docs/blob/gh-pages/content/tPict...</a><p>Used to be if that was opened in a web browser one could click on the parts list to show/hide or highlight/unhighlight the matching items in the diagram.<p>Done using Inkscape if memory serves.
12/11/2025, 8:38:40 PM
by: martijn_himself
>They are supported on just about every device and platform<p>Except they aren't. I recently used a simple SVG in a background and Safari wasn't able to render it properly so after trying lots of different things I gave up and used different sizes of raster images instead.
12/11/2025, 8:45:55 PM
by: xxmarkuski
I use ChatGPT to compress SVGs, in particular QR codes. Many QR code SVG generators produce inefficient SVGs, and conventional SVG compressors often lack the understanding required for some compression techniques. ChatGPT can replace alignment indicators with <use> elements.<p>Is there a way to embed the data encoded in the QR code directly within the image? This would allow the data to be parsed directly by the browser, eliminating the need for computer vision to decode it again. Going further, for web images QR codes could be efficiently encoded and rendered by the browser.
12/11/2025, 9:01:40 PM
by: tanx16
Here's a fun older thread on a similar topic - SVG is Turing Complete:<p><a href="https://news.ycombinator.com/item?id=20980837">https://news.ycombinator.com/item?id=20980837</a>
12/11/2025, 10:13:56 PM
by: tracerbulletx
This feels a little bit like discovering frontend software development? I guess we're done with the trend of being scared of bundling features and running them in the browser close to the user with JavaScript.
12/11/2025, 8:56:31 PM
by: morshu9001
An SVG and JS, right? It's not interactive on its own.
12/11/2025, 9:31:38 PM
by: WorldPeas
all we need is keyboard input and audio output and we have (most of) flash back. I may have to look into this in my idle hours
12/11/2025, 7:28:00 PM
by: lucid-dev
This is going to really transform some data visualization things I've been thinking about. I've always loved SVG since working with Illustrator and Inkscape back in the day, but I didn't realize how much it could tie in with the modern web and interactivity. Thank you!
12/11/2025, 8:17:03 PM
by: mogoh
> vector graphics in a simple XML format.<p>Simple? No. SVGs are not simple. If they were simple they weren't so capable.
12/11/2025, 10:04:44 PM
by: drewg123
I hate that slack doesn't support svg. So we end up taking screenshots of svg flame graphs when discussing things.
12/11/2025, 9:41:34 PM
by: sturbes
I just went down the same rabbit hole, it is totally fun! <a href="https://turbek.com/Designing-Interactive-SVGs-with-AI/" rel="nofollow">https://turbek.com/Designing-Interactive-SVGs-with-AI/</a><p>TLDR:<p>- SVG image files: powerful like HTML<p>- Supported widely in browsers<p>- Designer tools make SVGs<p>- SVGs are written in a language<p>- LLMs are great at manipulating language<p>- Designers can collaborate interaction into life
12/11/2025, 8:14:36 PM