Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

An SVG is all you need

jon.recoil.org

Post reply on HN
Print view View original

121–130 of 155 posts

Re: An SVG is all you need

#121

Post by zdragnar »

wongarsu wrote: post #99
iamsal wrote: post #40

Even though the article is mostly talking about visualizations, but I thought I'd share that I did at one point build a dance choreography software that renders the UI entirely SVG. I was surprised as to how well that worked. If you're curious, it's called StageKeep, and you can find it here. https://stagekeep.com/ The original project used React Three Fiber, but refactored it to SVG for reasons I don't quite remembe…

SVG was once hailed as the Flash-killer. With SVG + CSS + JavaScript you could do anything you could do with Flash, including those fancy Flash websites or complex applications. There just weren't any good authoring tools, while Flash had an amazing one. Then Flash just died without being replaced by anything

Part of the problem was that browsers never really fully optimized svg, especially with CSS. Animated stroke patterns were especially rough, if my memory serves.

Re: An SVG is all you need

#122

Post by immibis »

tylervigen wrote: post #67

Two years ago I re-vamped my "Spurious Correlations" side project, which is mostly just a bunch of charts. However, I couldn't find a charting software I liked that would display clean, simple visuals with the constraints I wanted. (I had used pCharts and HighCharts in the past, but didn't like charting in Javascript or PHP.) I decided to "roll my own" and write Python scripts that outputted SVG markup. I was worried…

> I was worried this would go about as well as every other "roll your own" project does

We as an industry need to get rid of this fear of creating stuff.

Re: An SVG is all you need

#123

Post by Jensson »

chiefalchemist wrote: post #107
wongarsu wrote: post #99

Earlier quoted context omitted.

SVG was once hailed as the Flash-killer. With SVG + CSS + JavaScript you could do anything you could do with Flash, including those fancy Flash websites or complex applications. There just weren't any good authoring tools, while Flash had an amazing one. Then Flash just died without being replaced by anything

Thank gawd. Flash, gawd bless it, was a low point in internet history. People simply couldn’t resist misusing it and abusing it. I’m not blaming the tool per se. But Flash’s addictiveness caused reasonable people to make gawd-awful UI and UX decisions. Crushing Flash is probably Jobs’ most underrated accomplishment.

It ended an era of easy to make web games though.

Re: An SVG is all you need

#124

Post by elviejo »

wongarsu wrote: post #99
iamsal wrote: post #40

Even though the article is mostly talking about visualizations, but I thought I'd share that I did at one point build a dance choreography software that renders the UI entirely SVG. I was surprised as to how well that worked. If you're curious, it's called StageKeep, and you can find it here. https://stagekeep.com/ The original project used React Three Fiber, but refactored it to SVG for reasons I don't quite remembe…

SVG was once hailed as the Flash-killer. With SVG + CSS + JavaScript you could do anything you could do with Flash, including those fancy Flash websites or complex applications. There just weren't any good authoring tools, while Flash had an amazing one. Then Flash just died without being replaced by anything

Steve jobs killed it when said it would work on the iPhone because if the "huge" memory and battery resources. He said Javascript and HTML was everything you needed.

Here is the original memo: https://www.editionmultimedia.fr/wp-content/uploads/2020/12/...

Re: An SVG is all you need

#125

Post by CupricTea »

A few years ago I learned just enough d3 to show an interactive 2D lollipop graph. Later I learned just enough SVG to get a small diagram out for a college class. I think going back if I were to redo that first interactive graph I'd probably just do it in raw SVG.

Re: An SVG is all you need

#126

Post by danaris »

chiefalchemist wrote: post #107
wongarsu wrote: post #99

Earlier quoted context omitted.

SVG was once hailed as the Flash-killer. With SVG + CSS + JavaScript you could do anything you could do with Flash, including those fancy Flash websites or complex applications. There just weren't any good authoring tools, while Flash had an amazing one. Then Flash just died without being replaced by anything

Thank gawd. Flash, gawd bless it, was a low point in internet history. People simply couldn’t resist misusing it and abusing it. I’m not blaming the tool per se. But Flash’s addictiveness caused reasonable people to make gawd-awful UI and UX decisions. Crushing Flash is probably Jobs’ most underrated accomplishment.

Honestly, I blame Adobe most for the death of Flash.

If they had been willing to invest the resources needed to make it both performant and, most importantly, secure, there's a much better chance that it would have survived—it might even have been enough for Jobs to be willing to have it work on the iPhone. (Maybe.)

Too many people lamenting how the death of Flash ended a thriving ecosystem of games and other art forms forget that Flash was also a huge resource hog, one of the #1 sources of crashes on many systems, and an absolutely massive vector for malware. I'd love to see some statistics on just how many infections were enabled by Flash, and how fast that declined once it stopped being a requirement to browse large chunks of the web.

And don't forget, either, that Flash wasn't originally an Adobe product: they took it over when they bought Macromedia, eliminating their biggest competitor and guaranteeing their monopoly. I wasn't really paying that much attention to the space, but it wouldn't surprise me if under Macromedia, it was getting better and more frequent updates.

Re: An SVG is all you need

#127

Post by danaris »

codedokode wrote: post #73

Downsides of using SVG: - cannot wrap text - cannot embed font glyphs - your SVG might be unreadable if the user doesn't have the font installed. You can convert letters to curves, but then you won't be able to select and edit text. It's such an obvious problem, yet nobody thought of it, how? Photoshop solved this long time ago - it saves both text and its rendering, so the text can always be rendered. - browsers do…

> and has text converted to curves.

But this then loses the ability to select it as text—which, at least in Safari, is present with an SVG element.

So either way you don't get full functionality.

Re: An SVG is all you need

#128

Post by caminanteblanco »

SVG's are so fun! The amount of logic you can put into an SVG is absolutely wild given what they're generally used for. My desktop wallpaper uses embedded JS to create a random Barnsley fern fractal every time the system starts, so it's different every time. The only problem is that only browsers have the full SVG spec support I needed to get it to work correctly, but that's nothing that systemd and puppeteer can't fix.

Re: An SVG is all you need

#129

Post by danaris »

_ache_ wrote: post #29

I really like SVG, I did a lot of things with it and some interesting ones. The only blame I have is that it is sometime slow. Like for QR Code, precise maps or +100 pixels wide squares. More than 100 "DOM" elements and it will take multiple seconds to show. The animations also are slow too, compared to canvas, plain CSS or Lottie but nothing very cursed, it's mostly fine.

Yeah; I've built a map viewer in SVG+JS for my small browser game, and it works quite well for that purpose, but when I tried to repurpose the underlying code for a different game, with a much higher object density, it became quite unmanageably slow. (I rebuilt the map for that game using canvas, but it does lose me some functionality.)

Re: An SVG is all you need

#130

Post by zajio1am »

I notice one issue in SVG support in browsers that make it pretty unusable. When multiple polygons connect by edge, renderers alpha-blend their edges as if they are in general position, causing visible 'seam'. This is well-known problem in 2D graphics, usually handled by explicit selection of blending functions, but i cannot find anything about how to fix it in SVG.
Post reply on HN