Even tho it's 8y old, Sarah Drasner's famous "SVG Can Do That?" talk is still eye-opening for many. CSS has matured a ton since then (I'm less sure about SVG per se)... in any case it's HIGHLY recommended.
Probably “SVG Animations” available through O’Reilly. It is from 2017. While many of the frameworks used have come and gone; there are a few stable concepts. If you can get it on sale, I’d recommend. Full price is a hard sell.
From the table of contents this looks like a book sponsored by and written to promote GreenSock. Which would be fine if the title was not misleading. Apparently SMIL is mentioned only in one chapter as "not suggested" solution.
One fun thing that can be done with SVG files: you can use entities in an inline DTD to define constants to be shared across different places in the file. You can see some great examples of this in the SVGs in David Ellsworth's "Squares in Squares" page [0].
The major browsers have no issues with this, though note that some tools like Inkscape won't parse the DTD nor expand the entities.
Maybe I am missing something, but can't find any !doctype or !element that would represent a DTD on that page. If you are talking simply about SVG defs and use - that isn't a DTD.
They're all in the standalone files, e.g., look at the source of https://kingbird.myphotos.cc/packing/square-11.svg. It defines a bunch of entities to represent various lengths and angles, which obviously can't be <use>d. (CSS variables would be an alternative these days, but many non-browser tools such as librsvg will have trouble with those as well.)
You say "entities" but that term is actually the name for SGML/XML's mechanism to define arbitrary syntactic content for reference/reuse with entity references a la &ref, whereas in SVG you can park shapes/paths/whatever under refs, giving those an id attribute value, and then <use> those element in the body SVG content, which is also what the page you linked is using (for each individual SVG ie. there's no sharing of rectangles across the many pictures since these are pulled-in individually via <embed> inot their own DOM rather than used as inline SVG).
I wonder why SVG's original designers found it necessary to supply an ad-hoc re-implementation of the entity mechanism. I think it might have to do with how rendering properties can be overridden at the usage site? At least I don't think it was established that browsers ignore entity definitions or basically anything in the document prolog/DOCTYPE considering SVG was part of W3C's push to replace HTML's SGMLish legacy syntax with XHTML/XML.
Entities seem to be resolved at parse time, so they are more like a preprocessor directives. <use> is much more powerful as all instances are "live" and updated dynamically when you change the original object.
If I recall correctly, the primary motivation behind <symbol> and <use> was interoperability with corresponding primitives in Adobe Illustrator.
To be clear, it's using both of them for different purposes, you'll find both <use> elements and <!ENTITY> declarations in files like https://kingbird.myphotos.cc/packing/square-11.svg. You can't <use> a numeric quantity in an attribute, the closest alternative for those would be CSS variables.
As for the existence of <use>, I agree with jarek-foksa, the idea is that the original element and all its clones from <use> are linked in the DOM at runtime, as opposed to DTD entities which are baked in textually. Also, most people hate XML, I'd imagine they'd hate internal DTDs doubly so, especially with how little information can be found about them outside the XML standard.
(Browser devs also love to beat the drum of minimizing attack surface, so it's a bit surprising that DTDs and XML stylesheets still work at all. I'd expect them to tear out that functionality in a heartbeat if it were ever used in a modern exploit.)
"A Deep Dive Into SVG Path Commands" by Nanda Syahrasyad [0] is really great for understanding how SVG paths are composed. It's from almost 2 years ago now and really opened my eyes to all that SVGs can do and exactly how they're doing it.
I really miss Macromedia Flash. There wasn't a single tech like Flash and SWF format which flourished with so many indie games and animated movies available without any extra downloads (other than Flash Player). Barier to entry was so low.
Now, take SVG, it has potential to do everything what SWF could. But there is no editor like Flash and scene/object based coding solution like ActionScript. And each browser has own quirks so only simple SVG is guaranteed to be displayed everywhere.
Well it still exists as Adobe Animate which can export to html.
Comparing SVG to Flash seems like an apples to oranges comparison anyway. The format does not have to do everything that Flash did but can rely on the other technologies in the browser.
I worked on a project that did something fun with SVGs like this. It was built with React, and we had a series of still illustrations with an animated element, with its colour controlled by a CMS.
The frontend would basically call an API that would return an SVG image with the right colour assigned and the animation done by hiding and showing svg elements.
Complex animated SVG is fun to roll until you get into the weeds of SMIL and Safari bricks your phone for missing a leading 0 on a float or some random nonsense.
I think GP is suggesting that the idea the GGP encountered an SVG that bricked their iPhone (without being a specifically crafted exploit payload) is an extraordinary claim that would require extraordinary evidence.
GP was right. I was pretty sure your interpretation is correct, but I've seen enough things over the years that I was curious if there were any more details about actual bricking.
I wrote a game of Tetris in JavaScript with SVG many years ago. It had nice graphics and was smoothly animated. I hadn’t heard of anyone else using SVG like that at the time.
That landing page is a nauseatingly laggy experience on a very powerful M1 Pro laptop. And slow to load, all for some fancy lines? I'd take a product that focuses on substance over style as dev. Don't get me wrong, style is important and I like pretty things, but here it seems the tradeoff is not well done.
> laggy experience on a very powerful M1 Pro laptop
Apple's M series chips aren't really all that powerful, but they are very power efficient. There are far faster laptops out there than what Apple offers, though they do consume more power. My AMD-based laptop outperforms the M1 Pro by a wide margin, though it is a power hog. I had no problem viewing the Unkey website. If you're using Safari, that may also be a problem, because Safari honestly sucks.
I'm on Chrome and the page was fine-ish after the first full scroll, but that first scroll was quite laggy. Note, I'm extra sensitive to this kind of stuff.
> Apple's M series chips aren't really all that powerful, but they are very power efficient.
> Assuming the same instructions per cycle (IPC) and mapping of instructions to cycles, Zen 3 should be ~1.53x faster than Firestorm by virtue of clock frequency. Yet the micro-architecture released in the same year as Zen 3, goes from exceeding it to closely trailing it in terms of absolute throughput when the effects of branch misprediction are minimized.
Their newest generation of P-cores is simply unmatched in terms of ST perf, an M4 core can do 4k points in Geekbench ST, AMD's best Desktop offering does ~3.5k at a much higher clock frequency. For web browsing ST perf is king.
SVG+CSS is super powerful, a simple feature that I love is making diagrams respect dark/light mode, without any javascript. Check the diagrams here for example: https://blog.davidv.dev/posts/ipvs-lb/
SVG feels like a very underexplored and underused territory. You can do so many things with it. It really depends on your imagination. But you’ll possibly need to “hardcore” a lot of stuff, so yeah, depends on the use case as well.
It's a fun format that's easy to generate, but after trying to do complicated things with it.. you kind of understand why. It's underused b/c
- Complex graphics render different in different browsers. So you can't rely on it shows up the same (never had the same issue with a PDF for example)
- There are quite a few renderers but they typically don't implement large parts of SVG b/c it's too complex.. So you can never really be sure what parts are "safe" to use.
- Large complex graphics display extremely slowly (again, compared to a PDF)
- There is basically one editor.. Inkscape. And it's got it's own quirks and doesn't match Chrome/Firefox's behavior. Ex: You can add arrows to lines in Inkscape and they don't display in Firefox
It's also just got too many weird corner case limitations. For instance you can embed a SVG in another SVG (say to make a composite diagram). But you can't embed a SVG in to an SVG in to an SVG. On the web if you inline or link an SVG you also end up with different behaviors
Do you mean in terms of open source vector editors? As there a wide variety of tools with SVG authoring/editing capability, among the most well-known being Adobe Illustrator, Sketch, Affinity Photo/Designer, even some web apps are available that were made for online SVG editing (eg: SVGator).
Inkscape, like some tools such as Affinity's, adds its own XML namespace with custom attributes and values, though for arrows I would expect it to use native `marker` elements.
It's certainly true that with SVG's flexibility and particularly with cross-browser handling differences/bugs it can become its own task to get consistent presentation when doing more complex things with it. Still very fond of the format.
Inkscape is the only major vector graphics editor that relies on SVG as its native file format. Most other apps are merely allowing you to import/export SVG files which is often a lossy process (e.g. vector objects with filter effects might get rasterized).
SVGator is focused primarily on animation and it's rather pricey. Boxy SVG might be a better choice if you are looking for a web-based SVG editor (disclaimer: I'm the developer).
Browsers will render SVG files. SVG files can link to other SVG files. Just need to configure the server to serve SVG by default — most servers don't but it's an easy config change.
- adding toolpath information so as to use Flash as the engine for a Computer Aided Manufacturing tool: https://github.com/Jack000/PartKAM
- (this was my project along w/ Edward R. Ford) adding hyperlinks to part lists to highlight parts in an assembly diagram: https://github.com/shapeoko/Docs --- unfortunately, that doesn't seem to work anymore.
Is there any SVG extension which allows density of line? I have a plotter which can lift/lower a pen; it's driven from SVG files. It'd be sweet to allow the pen to lower while the line is being drawn (as we often do with handwriting).
Oh - it's an Axidraw, from Evil Mad Scientist Labs - great device, wonderful people.
It's pretty easy to store custom instructions in plain SVG files and interpret them in with your reader. For example I have a multi-purpose laser-cutter / plotter and I use opacity for laser power, stroke weight for movement speed, green channel for number of passes, blue channel for z-axis height and red channel for lowering the pen or turning of the laser etc.
Fun to see how apparent boundaries can be pushed or broken with clever use of lesser known features.
That said, most of this is probably better done with CSS today.
My only professional exposure to SVG was when a pen tester found my predecessor's code had unintentionally allowed them, and that one can do injection attacks from the SVG itself. Of course this was around the time a client discovered SVG worked for them, so I had to make support official and defeat injection attacks. Good times.
For as long as SVG's been around its potential feels untapped. I can't think of any other element that can encapsulate functional HTML, CSS and JS -- basically an entirely different HTML document -- as easily
SVG feels much like HTML to me, especially when animations are involved: on the first sight it is quite nice and simple, does its job well, can be handled by fairly basic viewers (as well as converters, editors) and generated easily. Then there are even more features with CSS and JS, which also look neat, but then simplicity goes away, along with it goes the wide support of full functionality, and compatibility (due to partial support, unexpected behaviors in different contexts). It still looks like a fine option when animations are needed, but I would rather avoid those in SVG when they are not necessary.
One nice thing about SVGs is that they can be connected to the dom, you can do css, and easier to debug than canvas. Performance is the only thing holding it back from making declarative code for plotting and mapping charts.
I always thought transforms were an odd inclusion in SVG until I tried to make my own icons/logo with it. Those curves are challenging to get right. When I got done with the second logo I decided it looked flat and I needed to skew it 10°. The thought of rewriting all of those lines and curves suddenly made rotation seem like a much much better idea. Good thing too because it looked weird next to test and I changed the angle several more times to make the kerning look right.
I love what you have done here — it's very graceful.
I was feeling great but now I think "I have a lot to learn — I'd better get going!"
If you are interested in SVG animation, I wrote a program to do it from within Adobe Illustrator — see examples and how it works at https://svija.com/en/animation
Haven't done much recently, but I do really like SVG. I did a fun project for a grid scale battery company in 2017. I generated graphical reports of battery status and health. I used a .Net extension in Sql Server to generate the graphics from the database.
This taught me that SVGs can be animated with CSS. Cool!
I wonder if anybody has recreated vector graphics games like Asteroids using SVGs and animation. You'd have to use JS to change the shape and direction of the asteroids when they're shot, but that would just require a bit of JS.
I discovered this shortly after introducing The Secret of Kells to a child and had terrible, beautiful ideas about overly ornate websites that I have since thought better of. Mostly.
And the oft overlooked synergy with aria work is test automation. Code that is hard to screen read is often also difficult to integration or E2E test accurately.
i'll be a contrarian, that css and svg "hacks" like this are "impressive" are a symptom of a web-platform that is dogshit for multimedia. If a game did this nobody would even blink, the fact that it's another convoluted css hack makes it "notable".
Regular LLMs are quite bad at it (see simonwillison's blog post). However this paper [0] describes an apparently sound approach using Neural Radiance Fields (NeRFs), however their github repo [1] has been "code coming soon!" for months now, so you can't really use it.
In at least my limited experience, they're kind of bad. They can retrieve shapes that already exist, sometimes inaccurately, but they are less reliable at creating novel ones
Even tho it's 8y old, Sarah Drasner's famous "SVG Can Do That?" talk is still eye-opening for many. CSS has matured a ton since then (I'm less sure about SVG per se)... in any case it's HIGHLY recommended.
Slides: https://slides.com/sdrasner/svg-can-do-that
Video: https://youtu.be/ADXX4fmWHbo?si=6YPZkopyEDc8PSte
Big fan of her book as well though I don’t know if the recommended tools are still relevant.
Which book are you referring to?
Probably “SVG Animations” available through O’Reilly. It is from 2017. While many of the frameworks used have come and gone; there are a few stable concepts. If you can get it on sale, I’d recommend. Full price is a hard sell.
From the table of contents this looks like a book sponsored by and written to promote GreenSock. Which would be fine if the title was not misleading. Apparently SMIL is mentioned only in one chapter as "not suggested" solution.
Appreciate the intro to the book above - two additional useful SVG books. I think O'Reilly has a few more SVG titles
SVG Essentials: https://www.oreilly.com/library/view/svg-essentials-2nd/9781...
SVG Text Layout: https://www.oreilly.com/library/view/svg-text-layout/9781491...
The fact there’s a book on just text layout helped me learn how much depth there is in SVG.
One fun thing that can be done with SVG files: you can use entities in an inline DTD to define constants to be shared across different places in the file. You can see some great examples of this in the SVGs in David Ellsworth's "Squares in Squares" page [0].
The major browsers have no issues with this, though note that some tools like Inkscape won't parse the DTD nor expand the entities.
[0] https://kingbird.myphotos.cc/packing/squares_in_squares.html
Maybe I am missing something, but can't find any !doctype or !element that would represent a DTD on that page. If you are talking simply about SVG defs and use - that isn't a DTD.
They're all in the standalone files, e.g., look at the source of https://kingbird.myphotos.cc/packing/square-11.svg. It defines a bunch of entities to represent various lengths and angles, which obviously can't be <use>d. (CSS variables would be an alternative these days, but many non-browser tools such as librsvg will have trouble with those as well.)
You say "entities" but that term is actually the name for SGML/XML's mechanism to define arbitrary syntactic content for reference/reuse with entity references a la &ref, whereas in SVG you can park shapes/paths/whatever under refs, giving those an id attribute value, and then <use> those element in the body SVG content, which is also what the page you linked is using (for each individual SVG ie. there's no sharing of rectangles across the many pictures since these are pulled-in individually via <embed> inot their own DOM rather than used as inline SVG).
I wonder why SVG's original designers found it necessary to supply an ad-hoc re-implementation of the entity mechanism. I think it might have to do with how rendering properties can be overridden at the usage site? At least I don't think it was established that browsers ignore entity definitions or basically anything in the document prolog/DOCTYPE considering SVG was part of W3C's push to replace HTML's SGMLish legacy syntax with XHTML/XML.
Entities seem to be resolved at parse time, so they are more like a preprocessor directives. <use> is much more powerful as all instances are "live" and updated dynamically when you change the original object.
If I recall correctly, the primary motivation behind <symbol> and <use> was interoperability with corresponding primitives in Adobe Illustrator.
> which is also what the page you linked is using
To be clear, it's using both of them for different purposes, you'll find both <use> elements and <!ENTITY> declarations in files like https://kingbird.myphotos.cc/packing/square-11.svg. You can't <use> a numeric quantity in an attribute, the closest alternative for those would be CSS variables.
As for the existence of <use>, I agree with jarek-foksa, the idea is that the original element and all its clones from <use> are linked in the DOM at runtime, as opposed to DTD entities which are baked in textually. Also, most people hate XML, I'd imagine they'd hate internal DTDs doubly so, especially with how little information can be found about them outside the XML standard.
(Browser devs also love to beat the drum of minimizing attack surface, so it's a bit surprising that DTDs and XML stylesheets still work at all. I'd expect them to tear out that functionality in a heartbeat if it were ever used in a modern exploit.)
It might work in browsers but a lot of SVG tooling will ignore DTD because it’s a DOS risk.
E.g. Billion laughs attack https://en.wikipedia.org/wiki/Billion_laughs_attack
You can also extract different parts of an existing svg and use (clone) them elsewhere on the page.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...
I've used this to succinctly define a Sierpinski carpet on Wikimedia Commons a while ago: https://commons.wikimedia.org/wiki/File:Sierpinski_carpet_6....
That file was able to lock up or crash most SVG renderers back then.
That page took a good five seconds to render on my 2022 iPhone se
"A Deep Dive Into SVG Path Commands" by Nanda Syahrasyad [0] is really great for understanding how SVG paths are composed. It's from almost 2 years ago now and really opened my eyes to all that SVGs can do and exactly how they're doing it.
[0] https://www.nan.fyi/svg-paths
I really miss Macromedia Flash. There wasn't a single tech like Flash and SWF format which flourished with so many indie games and animated movies available without any extra downloads (other than Flash Player). Barier to entry was so low.
Now, take SVG, it has potential to do everything what SWF could. But there is no editor like Flash and scene/object based coding solution like ActionScript. And each browser has own quirks so only simple SVG is guaranteed to be displayed everywhere.
Well it still exists as Adobe Animate which can export to html.
Comparing SVG to Flash seems like an apples to oranges comparison anyway. The format does not have to do everything that Flash did but can rely on the other technologies in the browser.
I think web assembly can be comparable, e.g. unity/unreal/godot can compile to the browser pretty easily.
The problem is that each of these apps can be quite bloated and in the tens of MBs range not the usual single digit MB.
Sounds like there is a startup opportunity here to recreate this
I worked on a project that did something fun with SVGs like this. It was built with React, and we had a series of still illustrations with an animated element, with its colour controlled by a CMS.
The frontend would basically call an API that would return an SVG image with the right colour assigned and the animation done by hiding and showing svg elements.
You can see an example here: https://web.archive.org/web/20221020133516im_/https://uncrow...
Complex animated SVG is fun to roll until you get into the weeds of SMIL and Safari bricks your phone for missing a leading 0 on a float or some random nonsense.
"bricks"?
It's slang; picture a literal brick (akin to a rock or stone). Your device is "bricked" if something has rendered it useless.
I think GP is suggesting that the idea the GGP encountered an SVG that bricked their iPhone (without being a specifically crafted exploit payload) is an extraordinary claim that would require extraordinary evidence.
Also easy to interpret generously as hyperbole.
Especially if you know how easy it can be to accidentally do something that works fine in other browsers but makes Safari kill the tab.
Doesn't actually brick the device but a fairly hard failure in the browser.
GP was right. I was pretty sure your interpretation is correct, but I've seen enough things over the years that I was curious if there were any more details about actual bricking.
I wrote a game of Tetris in JavaScript with SVG many years ago. It had nice graphics and was smoothly animated. I hadn’t heard of anyone else using SVG like that at the time.
I also made a game called Pro Office Calculator (available on Steam), which includes a Doom-style 3D engine for which I used Inkscape as my map editor. Here’s an example of a map: https://github.com/robjinman/pro_office_calc/blob/develop/da...
Reminds me of Avara which used MacDraw as a level editor. Very cool!
For anyone who is using creatively using JS to create SVG dynamically and looking for work, DM me!
Not that guy, but just chiming in so you have some visibility.
Love this! I think SVG is super underrated, particularly in the age of diffusion based image generation. I’ve written briefly about it here: https://rorads.github.io/technical/quick-ai-reflection-on-sv...
Made a small silly game recently just for fun, using mostly CSS animated SVG tiles for rendering: https://pipeline-panic.vercel.app/
Nice. Reminds me of the board game Waterworks from the 70s.
https://boardgamegeek.com/boardgame/333/waterworks
Source code can be found here: https://github.com/danielstocks/pipeline-panic
This is a great little game! Thanks for sharing the source, too -- v nicely done.
It's a fun little game, thank you for sharing!
Nice!
> Unkey's landing page is a nice example.
That landing page is a nauseatingly laggy experience on a very powerful M1 Pro laptop. And slow to load, all for some fancy lines? I'd take a product that focuses on substance over style as dev. Don't get me wrong, style is important and I like pretty things, but here it seems the tradeoff is not well done.
Sounds like a problem with apple's implementation? I don't have any problem with firefox on an old 9th gen i5.
> laggy experience on a very powerful M1 Pro laptop
Apple's M series chips aren't really all that powerful, but they are very power efficient. There are far faster laptops out there than what Apple offers, though they do consume more power. My AMD-based laptop outperforms the M1 Pro by a wide margin, though it is a power hog. I had no problem viewing the Unkey website. If you're using Safari, that may also be a problem, because Safari honestly sucks.
I'm on Chrome and the page was fine-ish after the first full scroll, but that first scroll was quite laggy. Note, I'm extra sensitive to this kind of stuff.
> Apple's M series chips aren't really all that powerful, but they are very power efficient.
In terms of single threaded performance, they are both. Especially the IPC is very impressive take a look at for example https://github.com/Voultapher/sort-research-rs/blob/main/wri...
> Assuming the same instructions per cycle (IPC) and mapping of instructions to cycles, Zen 3 should be ~1.53x faster than Firestorm by virtue of clock frequency. Yet the micro-architecture released in the same year as Zen 3, goes from exceeding it to closely trailing it in terms of absolute throughput when the effects of branch misprediction are minimized.
Their newest generation of P-cores is simply unmatched in terms of ST perf, an M4 core can do 4k points in Geekbench ST, AMD's best Desktop offering does ~3.5k at a much higher clock frequency. For web browsing ST perf is king.
SVG+CSS is super powerful, a simple feature that I love is making diagrams respect dark/light mode, without any javascript. Check the diagrams here for example: https://blog.davidv.dev/posts/ipvs-lb/
SVG feels like a very underexplored and underused territory. You can do so many things with it. It really depends on your imagination. But you’ll possibly need to “hardcore” a lot of stuff, so yeah, depends on the use case as well.
It's a fun format that's easy to generate, but after trying to do complicated things with it.. you kind of understand why. It's underused b/c
- Complex graphics render different in different browsers. So you can't rely on it shows up the same (never had the same issue with a PDF for example)
- There are quite a few renderers but they typically don't implement large parts of SVG b/c it's too complex.. So you can never really be sure what parts are "safe" to use.
- Large complex graphics display extremely slowly (again, compared to a PDF)
- There is basically one editor.. Inkscape. And it's got it's own quirks and doesn't match Chrome/Firefox's behavior. Ex: You can add arrows to lines in Inkscape and they don't display in Firefox
It's also just got too many weird corner case limitations. For instance you can embed a SVG in another SVG (say to make a composite diagram). But you can't embed a SVG in to an SVG in to an SVG. On the web if you inline or link an SVG you also end up with different behaviors
> There is basically one editor.. Inkscape.
Do you mean in terms of open source vector editors? As there a wide variety of tools with SVG authoring/editing capability, among the most well-known being Adobe Illustrator, Sketch, Affinity Photo/Designer, even some web apps are available that were made for online SVG editing (eg: SVGator).
Inkscape, like some tools such as Affinity's, adds its own XML namespace with custom attributes and values, though for arrows I would expect it to use native `marker` elements.
It's certainly true that with SVG's flexibility and particularly with cross-browser handling differences/bugs it can become its own task to get consistent presentation when doing more complex things with it. Still very fond of the format.
Inkscape is the only major vector graphics editor that relies on SVG as its native file format. Most other apps are merely allowing you to import/export SVG files which is often a lossy process (e.g. vector objects with filter effects might get rasterized).
SVGator is focused primarily on animation and it's rather pricey. Boxy SVG might be a better choice if you are looking for a web-based SVG editor (disclaimer: I'm the developer).
Seems like it hits limits really fast — management/legibility gets difficult without groups and layers and performance doesn’t seem to scale well.
One thing i'd like to see is an entire site built with SVG and JS without any HTML at all. It's possible but i haven't seen anyone do it yet.
so how can you know it's actually possible?
Browsers will render SVG files. SVG files can link to other SVG files. Just need to configure the server to serve SVG by default — most servers don't but it's an easy config change.
Actually just found one, via an old stack overflow post. Only a three page test, but proves the point:
https://svg.nicubunu.ro
Two usages which I thought were interesting:
- adding toolpath information so as to use Flash as the engine for a Computer Aided Manufacturing tool: https://github.com/Jack000/PartKAM
- (this was my project along w/ Edward R. Ford) adding hyperlinks to part lists to highlight parts in an assembly diagram: https://github.com/shapeoko/Docs --- unfortunately, that doesn't seem to work anymore.
I agree. I’m sure there’s limitations, but svg feels more like a wysiwyg for web design than css
Is there any SVG extension which allows density of line? I have a plotter which can lift/lower a pen; it's driven from SVG files. It'd be sweet to allow the pen to lower while the line is being drawn (as we often do with handwriting).
Oh - it's an Axidraw, from Evil Mad Scientist Labs - great device, wonderful people.
It's pretty easy to store custom instructions in plain SVG files and interpret them in with your reader. For example I have a multi-purpose laser-cutter / plotter and I use opacity for laser power, stroke weight for movement speed, green channel for number of passes, blue channel for z-axis height and red channel for lowering the pen or turning of the laser etc.
Probably you would want to do that with G-code.
I've been doing that sort of thing in:
https://github.com/WillAdams/gcodepreview
Fun to see how apparent boundaries can be pushed or broken with clever use of lesser known features.
That said, most of this is probably better done with CSS today.
My only professional exposure to SVG was when a pen tester found my predecessor's code had unintentionally allowed them, and that one can do injection attacks from the SVG itself. Of course this was around the time a client discovered SVG worked for them, so I had to make support official and defeat injection attacks. Good times.
Awesome post, site design is dope as well
For as long as SVG's been around its potential feels untapped. I can't think of any other element that can encapsulate functional HTML, CSS and JS -- basically an entirely different HTML document -- as easily
SVG feels much like HTML to me, especially when animations are involved: on the first sight it is quite nice and simple, does its job well, can be handled by fairly basic viewers (as well as converters, editors) and generated easily. Then there are even more features with CSS and JS, which also look neat, but then simplicity goes away, along with it goes the wide support of full functionality, and compatibility (due to partial support, unexpected behaviors in different contexts). It still looks like a fine option when animations are needed, but I would rather avoid those in SVG when they are not necessary.
One nice thing about SVGs is that they can be connected to the dom, you can do css, and easier to debug than canvas. Performance is the only thing holding it back from making declarative code for plotting and mapping charts.
What performance issues have you encountered? Perf was decent 10 years ago so long as you avoided filters, but even that has improved.
I always thought transforms were an odd inclusion in SVG until I tried to make my own icons/logo with it. Those curves are challenging to get right. When I got done with the second logo I decided it looked flat and I needed to skew it 10°. The thought of rewriting all of those lines and curves suddenly made rotation seem like a much much better idea. Good thing too because it looked weird next to test and I changed the angle several more times to make the kerning look right.
Couple of (nice?) things I've built with SVG:
Sun Clock: https://sunclock.net
Degrees What?: https://degreeswhat.com
I love what you have done here — it's very graceful.
I was feeling great but now I think "I have a lot to learn — I'd better get going!"
If you are interested in SVG animation, I wrote a program to do it from within Adobe Illustrator — see examples and how it works at https://svija.com/en/animation
A lot of ecosystem vibe seems to go to Lottie at the moment though.. does SVG cover a matching feature set? is there hope for a conversion tool?
Haven't done much recently, but I do really like SVG. I did a fun project for a grid scale battery company in 2017. I generated graphical reports of battery status and health. I used a .Net extension in Sql Server to generate the graphics from the database.
This taught me that SVGs can be animated with CSS. Cool!
I wonder if anybody has recreated vector graphics games like Asteroids using SVGs and animation. You'd have to use JS to change the shape and direction of the asteroids when they're shot, but that would just require a bit of JS.
Video I bookmarked when I was stuck in backend land because I knew I’d want to learn it some day:
https://youtube.com/watch?v=wc8ovZZ78SY
I discovered this shortly after introducing The Secret of Kells to a child and had terrible, beautiful ideas about overly ornate websites that I have since thought better of. Mostly.
It would be more performant to use canvas, but it might be kind of fun to do with svg
Easier to do a11y in SVG.
And the oft overlooked synergy with aria work is test automation. Code that is hard to screen read is often also difficult to integration or E2E test accurately.
i'll be a contrarian, that css and svg "hacks" like this are "impressive" are a symptom of a web-platform that is dogshit for multimedia. If a game did this nobody would even blink, the fact that it's another convoluted css hack makes it "notable".
Great article! On mobile I can't find anywhere to demo/see the animated content in action, not sure if it's desktop only or what.
All I want is a browser that executes WASM and displays SVG... get out out of JS/HTML hell.
Svg Tailwind combo makes hover animations easy and fun.
Any examples? This sounds interesting to me.
Live preview: https://play.tailwindcss.com/db6WOoLcg8
Insane. I had no idea Grok previews were that smooth
oh wow!!
svg based games, wen?
wasn't that flash player?
soon
[dead]
>height="20"
What fresh hell is this?
What's the issue?
HTML attribute: height="20"
CSS property: height: 20px;
JS statement: element.style.height = "20px";
Was always fascinated by SVG art. How good are LLMs in generating SVGs?
Getting better!
https://simonwillison.net/2024/Oct/25/pelicans-on-a-bicycle/
Perhaps a generous definition of "better"... but some of those genuinely made me laugh!
Regular LLMs are quite bad at it (see simonwillison's blog post). However this paper [0] describes an apparently sound approach using Neural Radiance Fields (NeRFs), however their github repo [1] has been "code coming soon!" for months now, so you can't really use it.
0 - https://arxiv.org/pdf/2501.03992
1 - https://github.com/SagiPolaczek/NeuralSVG
Checkout StarVector: https://github.com/joanrod/star-vector/
I've gotten decent outputs with Claude with iteration (sending both text feedback and screenshot for context) and then tweaked the output in Inkscape.
https://github.com/simonw/pelican-bicycle/blob/main/README.m...
In at least my limited experience, they're kind of bad. They can retrieve shapes that already exist, sometimes inaccurately, but they are less reliable at creating novel ones