An SVG is all you need
106 comments
·December 11, 2025iamsal
wongarsu
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
chiefalchemist
Thank gawd. Flash, gawd bless it, was a low point in internet history. People simply couldn’t resist misusing it and abusing it. I’m not blaming the tool per se. But Flash’s addictiveness caused reasonable people to make gawd-awful UI and UX decisions. Crushing Flash is probably Jobs’ most underrated accomplishment.
jfengel
Wow, that is really cool. As a stage director I touch on choreography a bit. It would be really cool to pre-plan blocking with something like that.
Animats
That's good for blocking. Then, for movement, what? Probably not Labanotation.
great_tankard
Very cool. Are you a dancer yourself?
iamsal
Heh, thanks.
I wish I was a dancer.
That said, the founder who hired me to work on this is a dancer.
He hired me because he liked the fact that during the interview, when asked "what do you know about dance", I responded "I used to crip walk when I was in high school", so I was the top choice just for that, haha.
Edit: the Founder is Axel Villamil, and he's super charismatic. Y'all are going to love him. Here's him trying to raise an investment round https://www.instagram.com/reel/CyhL5kitUbD/
some_guy_nobel
I agree with the author when they write:
""" 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:
_heimdall
The idea of rerunning experiments only seems feasible when the entire experiment was based on modelling, presumably modelling that can easily/quickly be rerun in a browser environment.
The idea of being able to view and parse the dataset in different ways is interesting though, effectively allowing readers to interpret the experiment's resulting dataset from different angles than the author published.
mmooss
Without the OP's proposed use of SVG, what format would someone use? PDFs won't handle it well - unless PDF's interactivity capabilities are much better than I think. We never developed a client-side multimedia file format; all we have are text formats like Word and PDF, which embed images decently, and embed multimedia and interactivity (beyond form filling) in awkwardly and in a limited manner.
steezeburger
What's wrong with SVG? Notebooks have their issues but are kinda this conceptually. I guess FLAs and Flash too. But you say we never developed a "client-side multimedia file format". Is that not exactly what html + js are for?
mmooss
I mean the equivalent of a Word document: a file I can reasonably edit, including editing the multimedia and interactive/dynamic content, save, email, put on a thumb drive or Dropbox, etc.
fooker
Interactive and SVGs don't really mix, although intuitively it would seem that they do. Rendering remotely complex SVGs tale multiple seconds, while any kind of interactivity demands ~30+ frames per seconds.
Without interactivity, postscript is vector graphics too.
dekhn
How complex are you talking about? I've done animations with hundreds of elements and it's fine.
Grimblewald
I'd be curious to know what classes as complex for you, since ive done some frankly crazy stuff with svg's, which outperformed any raster implementation. Ultimately, poor performance was always my fault, especially initially when i was still treating it with paradigms better suited to the world of raster graphics.
tylervigen
Two years ago I re-vamped my "Spurious Correlations" side project, which is mostly just a bunch of charts. However, I couldn't find a charting software I liked that would display clean, simple visuals with the constraints I wanted. (I had used pCharts and HighCharts in the past, but didn't like charting in Javascript or PHP.)
I decided to "roll my own" and write Python scripts that outputted SVG markup. I was worried this would go about as well as every other "roll your own" project does, but was pleasantly surprised. It is surprisingly easy to output reliable, good-looking SVG graphics using Python. If you are making a chart, everything is just math.
The infinite scalability is almost just a happy upside to the simplicity of creating the visualizations, which is annoying in raster format. It made me like SVG even more.
eru
It's a bit sad that Postscript never caught on as much as it could have. In an alternate timeline, it could have been the HTML (and SVG) we got in ours.
shakna
Postscript is still everywhere. Its just out of sight, being used as a compile target.
PDF may have "officially" replaced it, but it is still embedded almost everywhere you look.
eru
PDF is a sad replacement for PS. As far as I can tell, it was an attempt to obscure PS, because alternative vendors were getting better as Postscript than the originators.
(There was some justification in terms of 'Oh, a binary format like PDF is more space efficient.' But PDF never really was more efficient than compressed PS.)
It's not that PS has vanished, but PS isn't nearly as 'everywhere' as HTML came to be.
crabmusket
If anyone is looking for a clean JS charting framework, I highly recommend Observable Plot.
It's from the creator of D3 and it's much easier than using raw D3. I've been using it outside the Observable platform for debug charts and notebooks, and I find its output crisp and its API very usable.
It doesn't try to have all the bells and whistles, and I'm not even sure if it has animations. But for the kind of charts you see in papers and notebooks I think it covers a lot.
leephillips
Thanks for making that website. I used examples from it in the first day of my statistics course ("by the end of this course you won't make these kinds of mistakes").
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.
(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...
nanolith
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.
tambourine_man
This sounds awesome. Did you ever filmed it working?
imp0cat
Exactly my thoughts! Where is the youtube video? :D I really want to see it. :)
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 some editing!
ianbooker
The reverse is kind of true: In the beginning, SVGs were not really an option since it lacked adoption across all major browsers, or more specifically its integration was very heterogenous.
So a SVG you authored 20 years ago for some browser will likely work everywhere today.
VladVladikoff
Except in an email. Because email is pain.
codedokode
Downsides of using SVG:
- cannot wrap text
- cannot embed font glyphs - your SVG might be unreadable if the user doesn't have the font installed. You can convert letters to curves, but then you won't be able to select and edit text. It's such an obvious problem, yet nobody thought of it, how? Photoshop solved this long time ago - it saves both text and its rendering, so the text can always be rendered.
- browsers do not publish, which version and features they support
- may contain Javascript and references to external resources, which makes it difficult to view in a secure, isolated environment
One of solutions is having two SVGs: author version, which you edit in Inkscape and which uses Inkscape-specific extensions, and published version, which is generated from the first, that uses only basic features and has text converted to curves.
geokon
plenty of other problems
- They often render differently in different browsers and other renderers. It's very frustrating to get consistent results (like a PDF). In complex diagrams I'd say it's basically impossible
- Renderers that are fast usually lack many features
- Nobody other than the browser seems to actually have all the features?
- You can link an SVG within an SVG (to make a lightweight composite image). But if you have two levels of indirection then all renderers I've tried will refuse to render the SVG
- Inkscape is basically the only good editor on Linux and it easily runs out of memory and crashes for complex images
- Complex SVGs eat all your RAM in Chromium (only marginally better in Firefox)
- Basic things like arrows from Inkscape will not render anywhere else
I still use SVGs all the time, b/c there are no good alternatives, but it's a crappy standard and I try to keep all my images/diagrams extremely simple
bobbylarrybobby
Safari supports base64-embedding font files in a <style>’s @font-face {} (iirc it's something like `@font-face { src: url('data:application/x-font-woff;charset=utf-8;base64,...'); }`) that can then be referenced as normal throughout the SVG. I don't recommend this though, nobody wants to deal with 500KB SVGs.
codedokode
The idea was that you can embed only the glyphs used in a text. For example, instead of embedding thousands of existing Chinese characters, embed only 20 of them. Embedding is necessary anyway because otherwise you cannot guarantee that your image will be displayed correctly on the other machine.
Also, allowing CSS inside SVG is not a great idea because the SVG renderer needs to include full CSS parser, and for example, will Inkscape work correctly when there is embedded CSS with base64 fonts? Not sure.
m-a-t-t-i
You can also point to font files with @font-face. I use a small custom font that's only 16 KB. Although, when opening the file locally, you have to first disable local file restrictions in safari's settings before it works...
<defs>
<style type="text/css">
@font-face {
font-family: 'A-font';
src: url('A-font.woff') format('woff');
font-weight: normal;
font-style: normal; }
</style>
</defs>codedokode
So if you save the SVG image, it won't display without Internet connection. Not great.
cubefox
I don't think that helps with embedding fonts.
_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.
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.
newcup
I embedded a chess engine in SVG image of a chess board (https://github.com/jnykopp/svg-embedded-chess) so that the engine moved the pieces automatically and played against itself, just by viewing the SVG.
This was done for a friend of mine who made an art installation that projected like some 50x20 (can’t remember exactly) of these images in a grid on a wall, for perpetual chess madness.
The number of chess SVGs a laptop’s browser was able to run simultaneously did feel suprisingly low, but luckily it was enough for that particular piece of art.
albert_e
interesting -- is there any video of the art installation
newcup
Sadly, seems there is not. But the artist has still the web page up he used for the installation: https://heikkihumberg.com/chess/
He said he used ipads as renderers. And even one grid may have looked different back in the day than that page now, as the font might be different. The SVG just uses system fonts and the chess pieces are just unicode characters.
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:
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.
sedatk
That looks cool!
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.
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.
lucgommans
> would love to see more tooling to lint and sanitize them before deployment
Sanitisation is one of two possible defences, the other being script execution controls or sandboxing. E.g., if you serve vector images on a web server, set a Content Security Policy header¹ for all your images that simply denies all scripting. You can also run it from a dummy domain ('origin') with nothing valuable on it (like how domains such as googleusercontent.com and githubusercontent.com are being used)
For sanitisation, DOMPurify² is the only widely used and tested library that I know of. It could use more bindings for other languages but, if you can call into it, it can go in your deployment pipeline. (Disclosure: I've worked with some of the people at Cure53, but not on this project)
You can also combine the approaches for defence in depth
¹ https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP
e12e
> would love to see more tooling to lint and sanitize them before deployment
Did you see?:
greazy
what dashboard software do you recommend?
krisoft
I once solved a machining problem using SVG and a bit of javascript and python.
I was prototyping an orrery. It involved cutting out a lot of ad-hoc gears and frame bits on my CNC out of a sheet of brass. It was relatively easy to generate the g-code for the individual parts using fusion360, but then it was a lot of faff to zero the machine such that it cut the part from a fresh part of the brass sheet without wasting too much metal in between the parts. It involved a lot of guesswork, and eyeballing. And even with that there was a lot of brass “wasted” between the parts especially since you could only move your part in x-y but not easily rotate it.
As a solution I wrote a python script which converted the g-code into svg, and a simple one page website where i could drag the svg around and rotate it on a visual representation of the sheet. Once i found a good safe spot for it to be cut the page told me the x,y, theta coordinates for it. And then with a separate python script i could transform the g-code using the coordinates and rotation. This way the svg renderer was doing the heavy lifting of visualising the cutting paths, and i only needed to concentrate on the relatively easy transforms.
thingsilearned
I love SVG! Recently I needed to render markdown in SVG and found no library existed for that yet so I released one:
github: https://github.com/davefowler/markdown-svg playground: https://markdown-svg-production.up.railway.app
notpushkin
I assume the goal is to get rid of all foreignObject uses eventually? (Otherwise it would be easier yo render one big foreignObject and convert everything to HTML)
Anyways, impressive, but what I’d really love to see is flexbox for SVG ;)
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.