Top
Best
New

Posted by fmerian 4/12/2025

Nice things with SVG(fuma-nama.vercel.app)
575 points | 107 comments
chrisweekly 4/12/2025|
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

jamra 4/12/2025|
Big fan of her book as well though I don’t know if the recommended tools are still relevant.
srid 4/12/2025||
Which book are you referring to?
technetist 4/12/2025||
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.
j45 4/13/2025|||
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.

jarek-foksa 4/13/2025||||
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.
ifwinterco 4/14/2025||
GreenSock works and it's fine but I'm always deeply suspicious of any product that tries that hard to promote itself. If the approach is so great, let it speak for itself
LegionMammal978 4/12/2025||
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

tannhaeuser 4/13/2025||
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.

jarek-foksa 4/13/2025|||
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.

LegionMammal978 4/13/2025|||
> 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.)

lenkite 4/13/2025|||
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.
LegionMammal978 4/13/2025||
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.)
lenkite 4/14/2025||
Aah thanks - these don't show up in the chrome inspector as by that time they are apparently already substituted.
timewizard 4/12/2025|||
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...

ygra 4/12/2025||
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.

noahbald 4/12/2025|||
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

znpy 4/12/2025||
That page took a good five seconds to render on my 2022 iPhone se
joshuaturner 4/12/2025||
"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

baosoy 4/12/2025||
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...

imhoguy 4/13/2025||
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.

7952 4/13/2025||
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.

rchaud 4/14/2025||
Adobe Animate is a sad shell of Flash. It only supports 2D, where its ancient predecessor supported 3D 20 years ago. It is a largely dead product, although parts of the Flash spirit lives on in After Effects, which is a video-centric tool.
jefozabuss 4/13/2025|||
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.

mettamage 4/13/2025|||
Sounds like there is a startup opportunity here to recreate this
braebo 4/12/2025||
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.
hansvm 4/13/2025|
"bricks"?
chrisweekly 4/13/2025||
It's slang; picture a literal brick (akin to a rock or stone). Your device is "bricked" if something has rendered it useless.
EE84M3i 4/13/2025|||
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.
lawik 4/13/2025||
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.

hansvm 4/13/2025||
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.
knighthack 4/14/2025|||
I've always thought the word 'bricked' as more akin to 'turning the phone into a useless brick'.
fivestones 4/20/2025||
Same here. Like now your phone will never run again.
benjanik 4/13/2025||
For anyone who is using creatively using JS to create SVG dynamically and looking for work, DM me!
all2 4/13/2025|
Not that guy, but just chiming in so you have some visibility.
CliffStoll 4/12/2025||
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.

m-a-t-t-i 4/12/2025||
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.
WillAdams 4/12/2025||
Probably you would want to do that with G-code.

I've been doing that sort of thing in:

https://github.com/WillAdams/gcodepreview

hinkley 4/12/2025||
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.
danielstocks 4/12/2025|
Made a small silly game recently just for fun, using mostly CSS animated SVG tiles for rendering: https://pipeline-panic.vercel.app/
vunderba 4/13/2025||
Nice. Reminds me of the board game Waterworks from the 70s.

https://boardgamegeek.com/boardgame/333/waterworks

danielstocks 4/13/2025|||
Source code can be found here: https://github.com/danielstocks/pipeline-panic
chrisweekly 4/13/2025|||
This is a great little game! Thanks for sharing the source, too -- v nicely done.
two_handfuls 4/13/2025|||
It's a fun little game, thank you for sharing!
perilunar 4/13/2025||
Nice!
More comments...