Live data from Hacker News

Nice things with SVG

fuma-nama.vercel.app

11–20 of 112 posts

Re: Nice things with SVG

#11

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…

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

Re: Nice things with SVG

#13
post #6
post #2

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.

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.

Re: Nice things with SVG

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

Re: Nice things with SVG

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

I agree. I’m sure there’s limitations, but svg feels more like a wysiwyg for web design than css

Re: Nice things with SVG

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

Re: Nice things with SVG

#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

Re: Nice things with SVG

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

Re: Nice things with SVG

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

Post reply on HN