Nice things with SVG • Hacker News Board

Re: Nice things with SVG

#31

Post by xyst » Sat, Apr 12, 2025, 8:13 PM UTC

svg based games, wen?

Re: Nice things with SVG

#32

Post by nshkrcom » Sat, Apr 12, 2025, 8:16 PM UTC

[dead]

Re: Nice things with SVG

#33

Post by jamra » Sat, Apr 12, 2025, 8:53 PM UTC

chrisweekly wrote: post #18

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.

Re: Nice things with SVG

#34

Post by mvdtnz » Sat, Apr 12, 2025, 9:16 PM UTC

aiibe wrote: post #12

Svg Tailwind combo makes hover animations easy and fun.

Any examples? This sounds interesting to me.

Re: Nice things with SVG

#35

Post by braebo » Sat, Apr 12, 2025, 9:40 PM UTC

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.

Re: Nice things with SVG

#36

Post by intrasight » Sat, Apr 12, 2025, 9:51 PM UTC

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.

Re: Nice things with SVG

#37

Post by deivid » Sat, Apr 12, 2025, 10:02 PM UTC

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/

Re: Nice things with SVG

#38

Post by srid » Sat, Apr 12, 2025, 10:07 PM UTC

jamra wrote: post #33

chrisweekly wrote: post #18

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?

Re: Nice things with SVG

#39

Post by noahbald » Sat, Apr 12, 2025, 10:08 PM UTC

LegionMammal978 wrote: post #3

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…

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

Re: Nice things with SVG

#40

Post by srid » Sat, Apr 12, 2025, 10:12 PM UTC

wwweston wrote: post #19

rckt wrote: post #14

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.

Seems like it hits limits really fast — management/legibility gets difficult without groups and layers and performance doesn’t seem to scale well.

  without groups and layers

As distinct from ``?