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!
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.
(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.)
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:
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.
>They are supported on just about every device and platform
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.
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.
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.
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.
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 some editing!
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.
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.
BUT seeing a two-decade-old vector still render correctly gives me confidence that the core spec is solid.
Yeah; I've built a map viewer in SVG+JS for my small browser game, and it works quite well for that purpose, but when I tried to repurpose the underlying code for a different game, with a much higher object density, it became quite unmanageably slow. (I rebuilt the map for that game using canvas, but it does lose me some functionality.)
"""
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.
"""
I do like seeing larger labs/companies releasing research full of SVGs. In recent memory, I quite liked this from NVIDIA:
This really reminds me of a new paper [1] from my colleagues. All figures in the paper link to a website, where the figures can be reproduced and dynamically changed in the browser from the source data. It's really cool, it is a static website that runs DuckDB, WebR, and ggplot. Here [2] is an example for the first figure.
Around 15 years ago, I built a barbecue controller. This controller had four temperature probes that could be used to check the temperature of the inner cooking chamber as well as various cuts of meat. It controlled servos that opened and closed vents and had a custom derived PID algorithm that could infer the delayed effects of oxygen to charcoal.
Anyway, of relevance to this thread is that the controller connected to the local wireless network and provided an embedded HTTP server with an SVG based web UI that would graph temperatures and provided actual knobs and dials so that the controller could be tweaked. SVG in the browser works nicely with Javascript.
This way - even if the user changes themes, the colors of the image will be consistent with whatever theme is currently active. Also - the loading time is near-instant since we don't need to fetch the img file for the blog post image - just render the svg.
I recently found out that it is surprisingly hard to convert an SVG file that consists of series of line segments into a list of those line segments in Python.
I tried with ChatGPT and Claude but both were not able to find a solution that respects the entire specification, especially transforms.
Initially, my expectation was that there must be a library for this kind of thing, but alas.
Even though the article is mostly talking about visualizations, but I thought I'd share that I did at one point build a dance choreography software that renders the UI entirely SVG. I was surprised as to how well that worked.
If you're curious, it's called StageKeep, and you can find it here. https://stagekeep.com/
The original project used React Three Fiber, but refactored it to SVG for reasons I don't quite remember. I was inspired by signed distance functions, and the fact that one function could have such an outsized visual effect. Although the software doesn't use SDFs, but I like the idea of atomic functions that accepts some input, and outputs SVG.
SVG was once hailed as the Flash-killer. With SVG + CSS + JavaScript you could do anything you could do with Flash, including those fancy Flash websites or complex applications. There just weren't any good authoring tools, while Flash had an amazing one.
Then Flash just died without being replaced by anything
This is a brilliant piece of software and I've had a blast learning about it.
I would LOVE to see this feature: pass it a video, get a formulated choreography based on that video. For example, take a Project21 or Avantgardey video, do some AI/ML voodoo, import their choreography.
Minor nit but I noticed at the bottom the text reads “Start free tiral”. Maybe a dance-themed joke that went over my head? But probably intended to be “trial” :^)
I love seeing old formats hold up this well. SVG surviving 20 years of browser evolution is a pretty strong argument for “boring tech” done right.
It makes me wonder why we don’t see more research papers ship with fully self-contained interactive SVGs today — the tooling and browser performance are better than ever.
I remember an employee of mine, who was possibly the best engineer I ever knew, wrote up a specification document for his own vignetting algorithm, in Postscript.
The algorithm provided a 100X performance improvement over the classic Monte Carlo stuff that Tokyo had written.
The charts in the document were executable Postscript, running his algorithm.
That got the attention of the Ph.Ds in Tokyo. He was a high school-educated neurodivergent.
56 comments
[ 4.9 ms ] story [ 67.0 ms ] threadTLDR:
- SVG image files: powerful like HTML
- Supported widely in browsers
- Designer tools make SVGs
- SVGs are written in a language
- LLMs are great at manipulating language
- Designers can collaborate interaction into life
(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.)
[0] https://distill.pub/2016/augmented-rnns/ [1] https://github.com/distillpub/post--augmented-rnns/blob/mast...
https://github.com/shapeoko/Docs/blob/gh-pages/content/tPict...
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.
Done using Inkscape if memory serves.
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.
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.
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.
BUT seeing a two-decade-old vector still render correctly gives me confidence that the core spec is solid.
I believe Slack is an electron app so it might be easy to implement.
Simple? No. SVGs are not simple. If they were simple they weren't so capable.
https://news.ycombinator.com/item?id=20980837
Like for QR Code, precise maps or +100 pixels wide squares. More than 100 "DOM" elements and it will take multiple seconds to show.
The animations also are slow too, compared to canvas, plain CSS or Lottie but nothing very cursed, it's mostly fine.
""" 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. """
I do like seeing larger labs/companies releasing research full of SVGs. In recent memory, I quite liked this from NVIDIA:
https://research.nvidia.com/labs/dbr/blog/illustrated-evo2/
[1] Paper: https://www.cs.cit.tum.de/fileadmin/w00cfj/dis/papers/clouds...
[2] Figure 1: https://tum-dis.github.io/cloudspecs/?state=N4IgzgjgNgigrgUw...
Anyway, of relevance to this thread is that the controller connected to the local wireless network and provided an embedded HTTP server with an SVG based web UI that would graph temperatures and provided actual knobs and dials so that the controller could be tweaked. SVG in the browser works nicely with Javascript.
We use SVGs on https://typequicker.com/press for the blog post hero images.
This way - even if the user changes themes, the colors of the image will be consistent with whatever theme is currently active. Also - the loading time is near-instant since we don't need to fetch the img file for the blog post image - just render the svg.
I tried with ChatGPT and Claude but both were not able to find a solution that respects the entire specification, especially transforms.
Initially, my expectation was that there must be a library for this kind of thing, but alas.
If you're curious, it's called StageKeep, and you can find it here. https://stagekeep.com/
The original project used React Three Fiber, but refactored it to SVG for reasons I don't quite remember. I was inspired by signed distance functions, and the fact that one function could have such an outsized visual effect. Although the software doesn't use SDFs, but I like the idea of atomic functions that accepts some input, and outputs SVG.
Then Flash just died without being replaced by anything
I would LOVE to see this feature: pass it a video, get a formulated choreography based on that video. For example, take a Project21 or Avantgardey video, do some AI/ML voodoo, import their choreography.
Think that'd be possible?
But can it read email? https://www.laws-of-software.com/laws/zawinski/
The algorithm provided a 100X performance improvement over the classic Monte Carlo stuff that Tokyo had written.
The charts in the document were executable Postscript, running his algorithm.
That got the attention of the Ph.Ds in Tokyo. He was a high school-educated neurodivergent.
github: https://github.com/davefowler/markdown-svg playground: https://markdown-svg-production.up.railway.app