An SVG is all you need
jon.recoil.org
An SVG is all you need
1–10 of 155 posts
Re: An SVG is all you need
#2all 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
Re: An SVG is all you need
#3all 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
JavaScript to catch keypress events and edit the SVG in situ maybe?
Re: An SVG is all you need
#4I just went down the same rabbit hole, it is totally fun! 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
Re: An SVG is all you need
#5This 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!
Re: An SVG is all you need
#6This 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!
Surely D3 is what you're referring to
Re: An SVG is all you need
#7all 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
The magic here is happening via the tags, where you have access to the browser APIs like you would an instead of . E.g. here's a sample I forked following the mouse using with inside https://codepen.io/zamadatix/pen/emZXZKx?css-preprocessor=sc...
Libraries like three.js had SVG rendering as an option but it got deprecated as with more direct GPU APIs was a lot more efficient and flexible.
Re: An SVG is all you need
#8The 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...
Re: An SVG is all you need
#9Ages 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.
Re: An SVG is all you need
#10>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.