Live data from Hacker News

An SVG is all you need

jon.recoil.org

81–90 of 155 posts

Re: An SVG is all you need

#81
post #22

Earlier quoted context omitted.

The JS is embedded within the SVG file and not exposed outside it

The JS is exposed in the full page's context the same as if you included a under a instead of . In much the same way, whether the is before or after the tag doesn't matter - it's just a script working on a single DOM (with different namespaces for certain elements) either way.

I guess the point is you can give a single .svg file with the js inside. But you can also give a single .html with svg and js inside.

Re: An SVG is all you need

#82
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…

Very cool. Are you a dancer yourself?

Heh, thanks.

I wish I was a dancer.

That said, the founder who hired me to work on this is a dancer.

He hired me because he liked the fact that during the interview, when asked "what do you know about dance", I responded "I used to crip walk when I was in high school", so I was the top choice just for that, haha.

Edit: the Founder is Axel Villamil, and he's super charismatic. Y'all are going to love him. Here's him trying to raise an investment round https://www.instagram.com/reel/CyhL5kitUbD/

Re: An SVG is all you need

#83

Around 15 years ago, I built a barbecue controller. This controller had four temperature probes that could be used to check the temperature of the inner cooking chamber as well as various cuts of meat. It controlled servos that opened and closed vents and had a custom derived PID algorithm that could infer the delayed effects of oxygen to charcoal. Anyway, of relevance to this thread is that the controller connected…

This sounds awesome. Did you ever filmed it working?

Re: An SVG is all you need

#84
I once built a music game that basically ran entirely on SVG. We hacked Musescore to attach the same UUID to both the note head in SVG and the MusicXML object in two different output modes, and then used that to synchronise the sheet music scrolling with a MIDI stream. If you're interested you can see it in action in our failed Kickstarter video from like eight years ago: https://www.youtube.com/watch?v=vgbB5Q4-dgY

Re: An SVG is all you need

#85
post #49
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…

Wow, that is really cool. As a stage director I touch on choreography a bit. It would be really cool to pre-plan blocking with something like that.

That's good for blocking. Then, for movement, what? Probably not Labanotation.

Re: An SVG is all you need

#86
post #74
post #70

Earlier quoted context omitted.

Postscript is still everywhere. Its just out of sight, being used as a compile target. PDF may have "officially" replaced it, but it is still embedded almost everywhere you look.

PDF is a sad replacement for PS. As far as I can tell, it was an attempt to obscure PS, because alternative vendors were getting better as Postscript than the originators. (There was some justification in terms of 'Oh, a binary format like PDF is more space efficient.' But PDF never really was more efficient than compressed PS.) It's not that PS has vanished, but PS isn't nearly as 'everywhere' as HTML came to be.

From the perspective of someone who worked in printing and publishing starting in the 1980s, there's more to it than that. PostScript was and is terrific as a page description language and as a printer control language. It absolutely revolutionized the printing business. For the first time, you could get complete pages (as opposed to unpaginated galleys) out of high-end imagesetters.

But it was not all that good as a way to send documents to be printed elsewhere. Postscript files were in some ways too dependent on the printer they targeted, so the person creating the PS file had to know too much about the printer that would be used to print it: its resolution and optimal halftone screen frequencies, media sizes, etc. With high-resolution output on photographic film costing around $10 per foot, mistakes could be expensive as well as time-wasting.

Fonts could also be a problem. Ideally, the PS file would contain all the fonts it required but this did not fit very well with the terms of most font licenses. And some applications would include a copy of every font used once on each page on which it was used. This was in line with Adobe's recommended Document Structuring Conventions and had the advantage of making pages within the file independent of one another, but for documents with hundreds of pages, this could add up fast and make the PS file literally hundreds of times larger than if all the fonts were included just once. With small storage media and slow network links, this was a real problem.

The "P" in PDF is for portable, and these are the problems it solved. Unlike a PS file, a PDF file is not targeted for a specific printer model, and most font licenses allowed the licensee to include subsetted fonts in PDF files. I personally prepared PS files for a few thousand books to be printed at various places around the US and later, PDF files for thousands more. There is no comparison: PDF was and is better in every way for this purpose.

Re: An SVG is all you need

#87

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…

If anyone is looking for a clean JS charting framework, I highly recommend Observable Plot.

It's from the creator of D3 and it's much easier than using raw D3. I've been using it outside the Observable platform for debug charts and notebooks, and I find its output crisp and its API very usable.

It doesn't try to have all the bells and whistles, and I'm not even sure if it has animations. But for the kind of charts you see in papers and notebooks I think it covers a lot.

Re: An SVG is all you need

#88

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…

plenty of other problems

- They often render differently in different browsers and other renderers. It's very frustrating to get consistent results (like a PDF). In complex diagrams I'd say it's basically impossible

- Renderers that are fast usually lack many features

- Nobody other than the browser seems to actually have all the features?

- You can link an SVG within an SVG (to make a lightweight composite image). But if you have two levels of indirection then all renderers I've tried will refuse to render the SVG

- Inkscape is basically the only good editor on Linux and it easily runs out of memory and crashes for complex images

- Complex SVGs eat all your RAM in Chromium (only marginally better in Firefox)

- Basic things like arrows from Inkscape will not render anywhere else

I still use SVGs all the time, b/c there are no good alternatives, but it's a crappy standard and I try to keep all my images/diagrams extremely simple

Re: An SVG is all you need

#89
I believe SVG is not accessible for visually impaired. Not sure what is the current status tho.

Still, the one-SVG-to-have-it-all might be an overkill for a web page. Both semantically and syntactically...

Re: An SVG is all you need

#90
post #52
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.

I embedded a chess engine in SVG image of a chess board ( https://github.com/jnykopp/svg-embedded-chess ) so that the engine moved the pieces automatically and played against itself, just by viewing the SVG. This was done for a friend of mine who made an art installation that projected like some 50x20 (can’t remember exactly) of these images in a grid on a wall, for perpetual chess madness. The number of chess SVGs a…

interesting -- is there any video of the art installation
Post reply on HN