8 ms·

An SVG is all you need

347 points by sadiq 10mo ago

deleted 10mo ago
[deleted]
WorldPeas 10mo ago
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
- fragmede 10mo ago
  JavaScript to catch keypress events and edit the SVG in situ maybe?
- zamadatix 10mo ago
  The magic here is happening via the <script> tags, where you have access to the browser APIs like you would an <canvas> instead of <svg>. E.g. here's a sample I forked following the mouse using <svg> with <script> inside https://codepen.io/zamadatix/pen/emZXZKx?css-preprocessor=scss https://codepen.io/zamadatix/pen/emZXZKx?css-preprocessor=sc... Libraries like three.js had SVG rendering as an option but it got deprecated as <canvas> with more direct GPU APIs was a lot more efficient and flexible.
sturbes 10mo ago
I just went down the same rabbit hole, it is totally fun! https://turbek.com/Designing-Interactive-SVGs-with-AI/ https://turbek.com/Designing-Interactive-SVGs-with-AI/ TLDR: - 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
- psygn89 10mo ago
  I don't think LLM's are that great at manipulating SVG unless you mean like small edits like rotation and font size. Cool article though, I'll have to think how I can leverage it.
  - sturbes 10mo ago
    Of course, but in comparison to bitmap tools like midjourney, you can communicate with an AI by specifying a SVG element to be manipulated. "Rotate ID "logo" 30 degrees" is very legible to the AI
lucid-dev 10mo ago
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!
- tetris11 10mo ago
  Surely D3 is what you're referring to
- some_guy_nobel 10mo ago
  SVG has been transforming web-experiences (particularly for viz) for quite some time now, see: - https://mlu-explain.github.io/neural-networks/ https://mlu-explain.github.io/neural-networks/ - https://www.nytimes.com/spotlight/graphics https://www.nytimes.com/spotlight/graphics - https://pudding.cool/ https://pudding.cool/
ludwigschubert 10mo ago
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/ https://distill.pub/2016/augmented-rnns/ [1] https://github.com/distillpub/post--augmented-rnns/blob/master/public/assets/rnn_write.html https://github.com/distillpub/post--augmented-rnns/blob/mast...
WillAdams 10mo ago
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/tPictures/PS20028-100.svg 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 10mo ago
  That looks cool!
martijn_himself 10mo ago
>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.
- SoKamil 10mo ago
  They are also not supported on iOS native apps. We use pdfs for vectors.
- avsm 10mo ago
  What was the SVG that didn't work? In Jon's example in the original post, the SVG he embeds there was one he wrote in around 2005. That's a pretty impressive run for it to render 20 years on...
- stanac 10mo ago
  SVGs also are mostly unsupported for og:image tags (dependents on the app/browser). I know it's supper specific and I am not even sure if open graph is standardized protocol or not, but it's used everywhere.
  - airstrike 10mo ago
    yeah, I was super disappointed to find that out when I built previews for https://hexrgb.pages.dev https://hexrgb.pages.dev
  - deleted 10mo ago
    [deleted]
tracerbulletx 10mo ago
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.
xxmarkuski 10mo ago
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.
- ktpsns 10mo ago
  I am not sure about your use case. There exist many JS libraries which will generate client side QR codes. How many of them do you handle that you optimize for file size? Or is it just an academic interest? SVGs are XML so technically, yes, you can just embed your visually encoded payload data with namespaces attributes and elements. If you don't want to use namespaces, you can use off-canvas texts, hidden/opacity=0 texts or even XML comments. You can even use the regular metadata section of SVGs. You can make the whole QR code within the SVG a clickable link.
- deleted 10mo ago
  [deleted]
- paularmstrong 10mo ago
  > I use ChatGPT to compress SVGs, in particular QR codes Why? svgomg.net exists, uses far fewer resources, and is going to give you much better results.
  - OuterVale 10mo ago
    Heads up. The site you linked is just a wrapping of the original with adverts and tracking scripts. It isn't running the latest version either. Much better off using the creator's version. https://jakearchibald.github.io/svgomg/ https://jakearchibald.github.io/svgomg/
jonludlam 10mo ago
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 10mo ago
  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 10mo ago
    Except in an email. Because email is pain.
morshu9001 10mo ago
An SVG and JS, right? It's not interactive on its own.
- avsm 10mo ago
  The JS is embedded within the SVG file and not exposed outside it
  - strickinato 10mo ago
    Sort of... the SVG is referencing `svgscript.js` which is being fetched from the server (https://jon.recoil.org/blog/2025/12/svgscript.js https://jon.recoil.org/blog/2025/12/svgscript.js)
  - zamadatix 10mo ago
    The JS is exposed in the full page's context the same as if you included a <script> under a <div> instead of <svg>. In much the same way, whether the <script> is before or after the <svg> tag doesn't matter - it's just a script working on a single DOM (with different namespaces for certain elements) either way.
    - morshu9001 10mo ago
      I guess the point is you can give a single .svg file with the js inside. But you can also give a single .html with svg and js inside.
      - deleted 10mo ago
        [deleted]
orliesaurus 10mo ago
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.
- greazy 10mo ago
  what dashboard software do you recommend?
- lucgommans 10mo ago
  > 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 https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP ² https://github.com/cure53/DOMPurify https://github.com/cure53/DOMPurify
- e12e 10mo ago
  > would love to see more tooling to lint and sanitize them before deployment Did you see?: https://github.com/cloudflare/svg-hush https://github.com/cloudflare/svg-hush
drewg123 10mo ago
I hate that slack doesn't support svg. So we end up taking screenshots of svg flame graphs when discussing things.
- dorfsmay 10mo ago
  Have you created an issue/suggestion? I believe Slack is an electron app so it might be easy to implement.
mogoh 10mo ago
> vector graphics in a simple XML format. Simple? No. SVGs are not simple. If they were simple they weren't so capable.
tanx16 10mo ago
Here's a fun older thread on a similar topic - SVG is Turing Complete: https://news.ycombinator.com/item?id=20980837 https://news.ycombinator.com/item?id=20980837
_ache_ 10mo ago
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 10mo ago
  I embedded a chess engine in SVG image of a chess board (https://github.com/jnykopp/svg-embedded-chess 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 10mo ago
    interesting -- is there any video of the art installation
    - newcup 10mo ago
      Sadly, seems there is not. But the artist has still the web page up he used for the installation: https://heikkihumberg.com/chess/ 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.
      - albert_e 10mo ago
        Cool thanks. Is there a way to control the speed. When I load a single SVG into browser, it runs through the whole game in a flash. (Edge shows animation; chrome and firefox show static image for me)
some_guy_nobel 10mo ago
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: https://research.nvidia.com/labs/dbr/blog/illustrated-evo2/ https://research.nvidia.com/labs/dbr/blog/illustrated-evo2/
- fooker 10mo ago
  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 10mo ago
    How complex are you talking about? I've done animations with hundreds of elements and it's fine.
    - fooker 10mo ago
      A typical scene graph for a visually interesting 2D game has more than 5000 elements and works on a 15 year old computer without issues.
  - Grimblewald 10mo ago
    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.
- mmooss 10mo ago
  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.
nanolith 10mo ago
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 10mo ago
  This sounds awesome. Did you ever filmed it working?
  - imp0cat 10mo ago
    Exactly my thoughts! Where is the youtube video? :D I really want to see it. :)
  - nanolith 10mo ago
    Sadly, I did not. I have the source code on an old laptop somewhere. I was disheartened when I considered productizing it and discovered just how deep of a patent tarpit I was dealing with. It's on my list to revisit in the future. At this point, most of the patents are coming up on expiration, and it would make for a great open source project. Hardware has gotten much better over the subsequent years; there are nicer lower power solutions with integrated Bluetooth LE as well as other low power wireless technologies.
absoluteunit1 10mo ago
I love working with SVGs. We use SVGs on https://typequicker.com/press 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.
amelius 10mo ago
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.
- nish__ 10mo ago
  Can't you do it by hand pretty easily? It's a list of coordinates separated by spaces. For example: "100,100 100,200 200,200 200,100"
  - amelius 10mo ago
    No, the specification is more complicated, for example elements (and sub-elements recursively) can have transforms applied to them.
    - boothby 10mo ago
      Excellent point. Inkscape has (had?) a feature to simplify SVG files, which pushed transformations down the tree. I never needed to use this in an automated process, just the occasional file.
- e12e 10mo ago
  I mean - it's XML so you could go that way and extract the d element from path element? But there seems to be a lot of SVG specific tooling and code to do this in python? Eg: https://github.com/RaubCamaioni/svgpath https://github.com/RaubCamaioni/svgpath
  - deleted 10mo ago
    [deleted]
- boothby 10mo ago
  I find svg.path to be good for parsing path data https://pypi.org/project/svg.path/ For actually parsing the file, there are a number of options (in the end, it's an XML file and I tend to treat it as such)
iamsal 10mo ago
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/ 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.
- jfengel 10mo ago
  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 10mo ago
    That's good for blocking. Then, for movement, what? Probably not Labanotation.
- great_tankard 10mo ago
  Very cool. Are you a dancer yourself?
  - iamsal 10mo ago
    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/ https://www.instagram.com/reel/CyhL5kitUbD/
    - 10mo ago
nwgo 10mo ago
[dead]
ivanjermakov 10mo ago
> A completely self-contained SVG file can either fetch data from a versioned repository or embed the data directly But can it read email? https://www.laws-of-software.com/laws/zawinski/ https://www.laws-of-software.com/laws/zawinski/
yusufcengiz 10mo ago
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.
ChrisMarshallNY 10mo ago
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.
thingsilearned 10mo ago
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 https://github.com/davefowler/markdown-svg playground: https://markdown-svg-production.up.railway.app https://markdown-svg-production.up.railway.app
- notpushkin 10mo ago
  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 ;)
  - thingsilearned 10mo ago
    Yeah, my use case would have required a heavy node or playwright import to convert the SVGs to other formats or show them correctly outside of browsers. This keeps it all SVG and it looks and feels good and lighter.
felineflock 10mo ago
"SVG Considered Harmful" https://www.cloudflare.com/cloudforce-one/research/svgs-the-hackers-canvas/ https://www.cloudflare.com/cloudforce-one/research/svgs-the-...
- perilunar 10mo ago
  "Since SVGs are essentially code, they can embed JavaScript" Odd thing to say. Everything on a computer is "essentially code", executable or not.
- tomalbrc 10mo ago
  First off, what kind of SVG reader does cloudflare assume to just open SVGs and Willy nilly run contained js? Is that a windows os feature? Second, do they not know about Content Security Policies? And as a side note: Cloudflare itself is considered harmful
tylervigen 10mo ago
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 10mo ago
  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 10mo ago
    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 10mo ago
      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.
      - tambourine_man 10mo ago
        PDF is also a lot less powerful, purposefully so. You can start an infinite loop just by double-clicking a PS file, for instance. It is extremely useful to have a full programing language as a file format, though. I miss macOS’s Preview.app auto-converting PS to PDF when double-clicked. It was a way to easily distribute a document that could randomize question orders each time it opened, print multiple bingo cards from a single file, etc. The stack-based and reverse Polish notation thing was also fun.
krisoft 10mo ago
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.
codedokode 10mo ago
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.
- bobbylarrybobby 10mo ago
  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.
  - m-a-t-t-i 10mo ago
    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>
    - cubefox 10mo ago
      I don't think that helps with embedding fonts.
    - codedokode 10mo ago
      So if you save the SVG image, it won't display without Internet connection. Not great.
VladVladikoff 10mo ago
I have been pushing SVG hard for a decade now, but to be honest AVIF is magic. It even crushes SVG file sizes.
sbrother 10mo ago
I once built a music game that basically ran entirely on SVG. We hacked Musescore to attach the same UUID to both the note head in SVG and the MusicXML object in two different output modes, and then used that to synchronise the sheet music scrolling with a MIDI stream. If you're interested you can see it in action in our failed Kickstarter video from like eight years ago: https://www.youtube.com/watch?v=vgbB5Q4-dgY https://www.youtube.com/watch?v=vgbB5Q4-dgY
p0w3n3d 10mo ago
I believe SVG is not accessible for visually impaired. Not sure what is the current status tho. Still, the one-SVG-to-have-it-all might be an overkill for a web page. Both semantically and syntactically...
anilakar 10mo ago
I remember making an .svg spirit thermometer that polled our local weather station and scaled the red bar accordingly some 12 years ago. A nice gimmick but I didn't see any real use for it. We joked about making a single-image SCADA monitor screen.
- anilakar 10mo ago
  Can't edit the previous message anymore, but I just vibecoded a functional replica while waiting for a pipeline to run: https://prkele.prk.tky.fi/~anilakar/thermo.svg https://prkele.prk.tky.fi/~anilakar/thermo.svg
giamma 10mo ago
I believe that would result in non accessible content, I believe screen readers cannot properly assist impaired users with SVG content. As such I think it's not a good idea for a document that should have a large audience.
- james-bcn 10mo ago
  Is there any appropriate solution for complex interactive charts and graphs?
  - giamma 10mo ago
    Good question. In general charts are not accessible because visually impaired users cannot use a mouse. You would need an interacting charting library that works with a keyboard and that is readable by a screen reader.
bflesch 10mo ago
I still wonder why PDF remains so prevalent and why it can't just be a single SVG file for each page of the PDF.
- maxloh 10mo ago
  There are many things that are missing with SVG. For example, putting all the pages in a single file, encryption, forms, etc. Also note that different browsers might render and print the same SVG differently, which is not ideal for a print-oriented format.
CupricTea 10mo ago
A few years ago I learned just enough d3 to show an interactive 2D lollipop graph. Later I learned just enough SVG to get a small diagram out for a college class. I think going back if I were to redo that first interactive graph I'd probably just do it in raw SVG.
caminanteblanco 10mo ago
SVG's are so fun! The amount of logic you can put into an SVG is absolutely wild given what they're generally used for. My desktop wallpaper uses embedded JS to create a random Barnsley fern fractal every time the system starts, so it's different every time. The only problem is that only browsers have the full SVG spec support I needed to get it to work correctly, but that's nothing that systemd and puppeteer can't fix.
zajio1am 10mo ago
I notice one issue in SVG support in browsers that make it pretty unusable. When multiple polygons connect by edge, renderers alpha-blend their edges as if they are in general position, causing visible 'seam'. This is well-known problem in 2D graphics, usually handled by explicit selection of blending functions, but i cannot find anything about how to fix it in SVG.
myjumpingsocks 10mo ago
heck yeah. bring back the hype over SVGs. the amount of things you can do has always amazed me. just using SVG filters, interactions, accessibility...
digdugdirk 10mo ago
Is there a 3D equivalent (technical or spiritual) of SVG? I've been working on a CAD visualizer, and I'm looking for something lightweight that I can use to build up representative changes to cad models without having to do a full loop through the CAD application, pull a full .step export, and visualize that. SVGs will work nicely for showing 2d sketches, but I'm hoping for something similar for the models themselves, without the slowdown of having to use the underlying CAD software for visualization.
12345678UP 10mo ago
This was delightful. I would greatly enjoy seeing more use cases, as well as new editors, and new ways of working with SVG while keeping with it's capabilities and capacities. Once I happened upon carto.net namely this: https://old.carto.net/papers/svg/samples/index.shtml#iact https://old.carto.net/papers/svg/samples/index.shtml#iact I was absolutely sold on SVG. now I find this: https://cartosvg.com/ https://cartosvg.com/ which is mind blowing the capability and capacity, just the first example from link, really makes my day https://cartosvg.com/italia https://cartosvg.com/italia then the 2nd! It's compelling. I wish I could have built what i was trying to conceive building using OSC (Open Sound Control), but what i was setting out to do was ultimately brought into the world by Hexler's TouchOSC, i just wish somehow someone could have took VST to a unified front, and made it random controller populatable. impossible back then, yes. Today, different.

347 points by sadiq 10mo ago

deleted 10mo ago

[deleted]

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

fragmede 10mo ago
JavaScript to catch keypress events and edit the SVG in situ maybe?
zamadatix 10mo ago
The magic here is happening via the <script> tags, where you have access to the browser APIs like you would an <canvas> instead of <svg>. E.g. here's a sample I forked following the mouse using <svg> with <script> inside https://codepen.io/zamadatix/pen/emZXZKx?css-preprocessor=scss https://codepen.io/zamadatix/pen/emZXZKx?css-preprocessor=sc... Libraries like three.js had SVG rendering as an option but it got deprecated as <canvas> with more direct GPU APIs was a lot more efficient and flexible.

sturbes 10mo ago

I just went down the same rabbit hole, it is totally fun! https://turbek.com/Designing-Interactive-SVGs-with-AI/ https://turbek.com/Designing-Interactive-SVGs-with-AI/ TLDR: - 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

psygn89 10mo ago
I don't think LLM's are that great at manipulating SVG unless you mean like small edits like rotation and font size. Cool article though, I'll have to think how I can leverage it.
- sturbes 10mo ago
  Of course, but in comparison to bitmap tools like midjourney, you can communicate with an AI by specifying a SVG element to be manipulated. "Rotate ID "logo" 30 degrees" is very legible to the AI

lucid-dev 10mo ago

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!

tetris11 10mo ago
Surely D3 is what you're referring to
some_guy_nobel 10mo ago
SVG has been transforming web-experiences (particularly for viz) for quite some time now, see: - https://mlu-explain.github.io/neural-networks/ https://mlu-explain.github.io/neural-networks/ - https://www.nytimes.com/spotlight/graphics https://www.nytimes.com/spotlight/graphics - https://pudding.cool/ https://pudding.cool/

ludwigschubert 10mo ago

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/ https://distill.pub/2016/augmented-rnns/ [1] https://github.com/distillpub/post--augmented-rnns/blob/master/public/assets/rnn_write.html https://github.com/distillpub/post--augmented-rnns/blob/mast...

WillAdams 10mo ago

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/tPictures/PS20028-100.svg 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 10mo ago
That looks cool!

martijn_himself 10mo ago

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

SoKamil 10mo ago
They are also not supported on iOS native apps. We use pdfs for vectors.
avsm 10mo ago
What was the SVG that didn't work? In Jon's example in the original post, the SVG he embeds there was one he wrote in around 2005. That's a pretty impressive run for it to render 20 years on...
stanac 10mo ago
SVGs also are mostly unsupported for og:image tags (dependents on the app/browser). I know it's supper specific and I am not even sure if open graph is standardized protocol or not, but it's used everywhere.
- airstrike 10mo ago
  yeah, I was super disappointed to find that out when I built previews for https://hexrgb.pages.dev https://hexrgb.pages.dev
- deleted 10mo ago
  [deleted]

tracerbulletx 10mo ago

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.

xxmarkuski 10mo ago

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.

ktpsns 10mo ago
I am not sure about your use case. There exist many JS libraries which will generate client side QR codes. How many of them do you handle that you optimize for file size? Or is it just an academic interest? SVGs are XML so technically, yes, you can just embed your visually encoded payload data with namespaces attributes and elements. If you don't want to use namespaces, you can use off-canvas texts, hidden/opacity=0 texts or even XML comments. You can even use the regular metadata section of SVGs. You can make the whole QR code within the SVG a clickable link.
deleted 10mo ago
[deleted]
paularmstrong 10mo ago
> I use ChatGPT to compress SVGs, in particular QR codes Why? svgomg.net exists, uses far fewer resources, and is going to give you much better results.
- OuterVale 10mo ago
  Heads up. The site you linked is just a wrapping of the original with adverts and tracking scripts. It isn't running the latest version either. Much better off using the creator's version. https://jakearchibald.github.io/svgomg/ https://jakearchibald.github.io/svgomg/

jonludlam 10mo ago

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 10mo ago
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 10mo ago
  Except in an email. Because email is pain.

morshu9001 10mo ago

An SVG and JS, right? It's not interactive on its own.

avsm 10mo ago
The JS is embedded within the SVG file and not exposed outside it
- strickinato 10mo ago
  Sort of... the SVG is referencing `svgscript.js` which is being fetched from the server (https://jon.recoil.org/blog/2025/12/svgscript.js https://jon.recoil.org/blog/2025/12/svgscript.js)
- zamadatix 10mo ago
  The JS is exposed in the full page's context the same as if you included a <script> under a <div> instead of <svg>. In much the same way, whether the <script> is before or after the <svg> tag doesn't matter - it's just a script working on a single DOM (with different namespaces for certain elements) either way.
  - morshu9001 10mo ago
    I guess the point is you can give a single .svg file with the js inside. But you can also give a single .html with svg and js inside.
    - deleted 10mo ago
      [deleted]

orliesaurus 10mo ago

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.

greazy 10mo ago
what dashboard software do you recommend?
lucgommans 10mo ago
> 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 https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP ² https://github.com/cure53/DOMPurify https://github.com/cure53/DOMPurify
e12e 10mo ago
> would love to see more tooling to lint and sanitize them before deployment Did you see?: https://github.com/cloudflare/svg-hush https://github.com/cloudflare/svg-hush

drewg123 10mo ago

I hate that slack doesn't support svg. So we end up taking screenshots of svg flame graphs when discussing things.

dorfsmay 10mo ago
Have you created an issue/suggestion? I believe Slack is an electron app so it might be easy to implement.

mogoh 10mo ago

> vector graphics in a simple XML format. Simple? No. SVGs are not simple. If they were simple they weren't so capable.

tanx16 10mo ago

Here's a fun older thread on a similar topic - SVG is Turing Complete: https://news.ycombinator.com/item?id=20980837 https://news.ycombinator.com/item?id=20980837

_ache_ 10mo ago

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 10mo ago
I embedded a chess engine in SVG image of a chess board (https://github.com/jnykopp/svg-embedded-chess 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 10mo ago
  interesting -- is there any video of the art installation
  - newcup 10mo ago
    Sadly, seems there is not. But the artist has still the web page up he used for the installation: https://heikkihumberg.com/chess/ 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.
    - albert_e 10mo ago
      Cool thanks. Is there a way to control the speed. When I load a single SVG into browser, it runs through the whole game in a flash. (Edge shows animation; chrome and firefox show static image for me)

some_guy_nobel 10mo ago

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: https://research.nvidia.com/labs/dbr/blog/illustrated-evo2/ https://research.nvidia.com/labs/dbr/blog/illustrated-evo2/

fooker 10mo ago
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 10mo ago
  How complex are you talking about? I've done animations with hundreds of elements and it's fine.
  - fooker 10mo ago
    A typical scene graph for a visually interesting 2D game has more than 5000 elements and works on a 15 year old computer without issues.
- Grimblewald 10mo ago
  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.
mmooss 10mo ago
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.

nanolith 10mo ago

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 10mo ago
This sounds awesome. Did you ever filmed it working?
- imp0cat 10mo ago
  Exactly my thoughts! Where is the youtube video? :D I really want to see it. :)
- nanolith 10mo ago
  Sadly, I did not. I have the source code on an old laptop somewhere. I was disheartened when I considered productizing it and discovered just how deep of a patent tarpit I was dealing with. It's on my list to revisit in the future. At this point, most of the patents are coming up on expiration, and it would make for a great open source project. Hardware has gotten much better over the subsequent years; there are nicer lower power solutions with integrated Bluetooth LE as well as other low power wireless technologies.

absoluteunit1 10mo ago

I love working with SVGs. We use SVGs on https://typequicker.com/press 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.

amelius 10mo ago

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.

nish__ 10mo ago
Can't you do it by hand pretty easily? It's a list of coordinates separated by spaces. For example: "100,100 100,200 200,200 200,100"
- amelius 10mo ago
  No, the specification is more complicated, for example elements (and sub-elements recursively) can have transforms applied to them.
  - boothby 10mo ago
    Excellent point. Inkscape has (had?) a feature to simplify SVG files, which pushed transformations down the tree. I never needed to use this in an automated process, just the occasional file.
e12e 10mo ago
I mean - it's XML so you could go that way and extract the d element from path element? But there seems to be a lot of SVG specific tooling and code to do this in python? Eg: https://github.com/RaubCamaioni/svgpath https://github.com/RaubCamaioni/svgpath
- deleted 10mo ago
  [deleted]
boothby 10mo ago
I find svg.path to be good for parsing path data https://pypi.org/project/svg.path/ For actually parsing the file, there are a number of options (in the end, it's an XML file and I tend to treat it as such)

iamsal 10mo ago

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

jfengel 10mo ago
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 10mo ago
  That's good for blocking. Then, for movement, what? Probably not Labanotation.
great_tankard 10mo ago
Very cool. Are you a dancer yourself?
- iamsal 10mo ago
  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/ https://www.instagram.com/reel/CyhL5kitUbD/
  - 10mo ago

nwgo 10mo ago

[dead]

ivanjermakov 10mo ago

> A completely self-contained SVG file can either fetch data from a versioned repository or embed the data directly But can it read email? https://www.laws-of-software.com/laws/zawinski/ https://www.laws-of-software.com/laws/zawinski/

yusufcengiz 10mo ago

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.

ChrisMarshallNY 10mo ago

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.

thingsilearned 10mo ago

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 https://github.com/davefowler/markdown-svg playground: https://markdown-svg-production.up.railway.app https://markdown-svg-production.up.railway.app

notpushkin 10mo ago
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 ;)
- thingsilearned 10mo ago
  Yeah, my use case would have required a heavy node or playwright import to convert the SVGs to other formats or show them correctly outside of browsers. This keeps it all SVG and it looks and feels good and lighter.

felineflock 10mo ago

"SVG Considered Harmful" https://www.cloudflare.com/cloudforce-one/research/svgs-the-hackers-canvas/ https://www.cloudflare.com/cloudforce-one/research/svgs-the-...

perilunar 10mo ago
"Since SVGs are essentially code, they can embed JavaScript" Odd thing to say. Everything on a computer is "essentially code", executable or not.
tomalbrc 10mo ago
First off, what kind of SVG reader does cloudflare assume to just open SVGs and Willy nilly run contained js? Is that a windows os feature? Second, do they not know about Content Security Policies? And as a side note: Cloudflare itself is considered harmful

tylervigen 10mo ago

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 10mo ago
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 10mo ago
  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 10mo ago
    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.
    - tambourine_man 10mo ago
      PDF is also a lot less powerful, purposefully so. You can start an infinite loop just by double-clicking a PS file, for instance. It is extremely useful to have a full programing language as a file format, though. I miss macOS’s Preview.app auto-converting PS to PDF when double-clicked. It was a way to easily distribute a document that could randomize question orders each time it opened, print multiple bingo cards from a single file, etc. The stack-based and reverse Polish notation thing was also fun.

krisoft 10mo ago

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.

codedokode 10mo ago

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.

bobbylarrybobby 10mo ago
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.
- m-a-t-t-i 10mo ago
  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>
  - cubefox 10mo ago
    I don't think that helps with embedding fonts.
  - codedokode 10mo ago
    So if you save the SVG image, it won't display without Internet connection. Not great.

VladVladikoff 10mo ago

I have been pushing SVG hard for a decade now, but to be honest AVIF is magic. It even crushes SVG file sizes.

sbrother 10mo ago

I once built a music game that basically ran entirely on SVG. We hacked Musescore to attach the same UUID to both the note head in SVG and the MusicXML object in two different output modes, and then used that to synchronise the sheet music scrolling with a MIDI stream. If you're interested you can see it in action in our failed Kickstarter video from like eight years ago: https://www.youtube.com/watch?v=vgbB5Q4-dgY https://www.youtube.com/watch?v=vgbB5Q4-dgY

p0w3n3d 10mo ago

I believe SVG is not accessible for visually impaired. Not sure what is the current status tho. Still, the one-SVG-to-have-it-all might be an overkill for a web page. Both semantically and syntactically...

anilakar 10mo ago

I remember making an .svg spirit thermometer that polled our local weather station and scaled the red bar accordingly some 12 years ago. A nice gimmick but I didn't see any real use for it. We joked about making a single-image SCADA monitor screen.

anilakar 10mo ago
Can't edit the previous message anymore, but I just vibecoded a functional replica while waiting for a pipeline to run: https://prkele.prk.tky.fi/~anilakar/thermo.svg https://prkele.prk.tky.fi/~anilakar/thermo.svg

giamma 10mo ago

I believe that would result in non accessible content, I believe screen readers cannot properly assist impaired users with SVG content. As such I think it's not a good idea for a document that should have a large audience.

james-bcn 10mo ago
Is there any appropriate solution for complex interactive charts and graphs?
- giamma 10mo ago
  Good question. In general charts are not accessible because visually impaired users cannot use a mouse. You would need an interacting charting library that works with a keyboard and that is readable by a screen reader.

bflesch 10mo ago

I still wonder why PDF remains so prevalent and why it can't just be a single SVG file for each page of the PDF.

maxloh 10mo ago
There are many things that are missing with SVG. For example, putting all the pages in a single file, encryption, forms, etc. Also note that different browsers might render and print the same SVG differently, which is not ideal for a print-oriented format.

CupricTea 10mo ago

A few years ago I learned just enough d3 to show an interactive 2D lollipop graph. Later I learned just enough SVG to get a small diagram out for a college class. I think going back if I were to redo that first interactive graph I'd probably just do it in raw SVG.

caminanteblanco 10mo ago

SVG's are so fun! The amount of logic you can put into an SVG is absolutely wild given what they're generally used for. My desktop wallpaper uses embedded JS to create a random Barnsley fern fractal every time the system starts, so it's different every time. The only problem is that only browsers have the full SVG spec support I needed to get it to work correctly, but that's nothing that systemd and puppeteer can't fix.

zajio1am 10mo ago

I notice one issue in SVG support in browsers that make it pretty unusable. When multiple polygons connect by edge, renderers alpha-blend their edges as if they are in general position, causing visible 'seam'. This is well-known problem in 2D graphics, usually handled by explicit selection of blending functions, but i cannot find anything about how to fix it in SVG.

myjumpingsocks 10mo ago

heck yeah. bring back the hype over SVGs. the amount of things you can do has always amazed me. just using SVG filters, interactions, accessibility...

digdugdirk 10mo ago

Is there a 3D equivalent (technical or spiritual) of SVG? I've been working on a CAD visualizer, and I'm looking for something lightweight that I can use to build up representative changes to cad models without having to do a full loop through the CAD application, pull a full .step export, and visualize that. SVGs will work nicely for showing 2d sketches, but I'm hoping for something similar for the models themselves, without the slowdown of having to use the underlying CAD software for visualization.

12345678UP 10mo ago

This was delightful. I would greatly enjoy seeing more use cases, as well as new editors, and new ways of working with SVG while keeping with it's capabilities and capacities. Once I happened upon carto.net namely this: https://old.carto.net/papers/svg/samples/index.shtml#iact https://old.carto.net/papers/svg/samples/index.shtml#iact I was absolutely sold on SVG. now I find this: https://cartosvg.com/ https://cartosvg.com/ which is mind blowing the capability and capacity, just the first example from link, really makes my day https://cartosvg.com/italia https://cartosvg.com/italia then the 2nd! It's compelling. I wish I could have built what i was trying to conceive building using OSC (Open Sound Control), but what i was setting out to do was ultimately brought into the world by Hexler's TouchOSC, i just wish somehow someone could have took VST to a unified front, and made it random controller populatable. impossible back then, yes. Today, different.