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

101–110 of 155 posts

Re: An SVG is all you need

#101

Post by newcup »

albert_e wrote: post #90
newcup wrote: post #52

Earlier quoted context omitted.

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

Sadly, seems there is not. But the artist has still the web page up he used for the installation: https://heikkihumberg.com/chess/

He said he used ipads as renderers. And even one grid may have looked different back in the day than that page now, as the font might be different. The SVG just uses system fonts and the chess pieces are just unicode characters.

Re: An SVG is all you need

#102

Post by anilakar »

anilakar wrote: post #91

I remember making an .svg spirit thermometer that polled our local weather station and scaled the red bar accordingly some 12 years ago. A nice gimmick but I didn't see any real use for it. We joked about making a single-image SCADA monitor screen.

Can't edit the previous message anymore, but I just vibecoded a functional replica while waiting for a pipeline to run: https://prkele.prk.tky.fi/~anilakar/thermo.svg

Re: An SVG is all you need

#103

Post by cl3misch »

mmooss wrote: post #69
steezeburger wrote: post #60

Earlier quoted context omitted.

What's wrong with SVG? Notebooks have their issues but are kinda this conceptually. I guess FLAs and Flash too. But you say we never developed a "client-side multimedia file format". Is that not exactly what html + js are for?

I mean the equivalent of a Word document: a file I can reasonably edit, including editing the multimedia and interactive/dynamic content, save, email, put on a thumb drive or Dropbox, etc.

I think HTML is exactly the "client-side multimedia file format" you want. I guess what we don't have is an established editor UI. You have to create it yourself.

It's if we had the .docx format but MS Word was read-only. You would have to create the XML and zip it yourself, to be then rendered by Word. That's effectively how I see HTML+js in browsers.

Re: An SVG is all you need

#104

Post by codedokode »

bobbylarrybobby wrote: post #79
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…

Safari supports base64-embedding font files in a ’s @font-face {} (iirc it's something like `@font-face { src: url('data:application/x-font-woff;charset=utf-8;base64,...'); }`) that can then be referenced as normal throughout the SVG. I don't recommend this though, nobody wants to deal with 500KB SVGs.

The idea was that you can embed only the glyphs used in a text. For example, instead of embedding thousands of existing Chinese characters, embed only 20 of them. Embedding is necessary anyway because otherwise you cannot guarantee that your image will be displayed correctly on the other machine.

Also, allowing CSS inside SVG is not a great idea because the SVG renderer needs to include full CSS parser, and for example, will Inkscape work correctly when there is embedded CSS with base64 fonts? Not sure.

Re: An SVG is all you need

#105

Post by codedokode »

m-a-t-t-i wrote: post #95
bobbylarrybobby wrote: post #79

Earlier quoted context omitted.

Safari supports base64-embedding font files in a ’s @font-face {} (iirc it's something like `@font-face { src: url('data:application/x-font-woff;charset=utf-8;base64,...'); }`) that can then be referenced as normal throughout the SVG. I don't recommend this though, nobody wants to deal with 500KB SVGs.

You can also point to font files with @font-face. I use a small custom font that's only 16 KB. Although, when opening the file locally, you have to first disable local file restrictions in safari's settings before it works... @font-face { font-family: 'A-font'; src: url('A-font.woff') format('woff'); font-weight: normal; font-style: normal; }

So if you save the SVG image, it won't display without Internet connection. Not great.

Re: An SVG is all you need

#106

Post by james-bcn »

giamma wrote: post #98

I believe that would result in non accessible content, I believe screen readers cannot properly assist impaired users with SVG content. As such I think it's not a good idea for a document that should have a large audience.

Is there any appropriate solution for complex interactive charts and graphs?

Re: An SVG is all you need

#107

Post by chiefalchemist »

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

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.

Re: An SVG is all you need

#108

Post by albert_e »

newcup wrote: post #101
albert_e wrote: post #90

Earlier quoted context omitted.

interesting -- is there any video of the art installation

Sadly, seems there is not. But the artist has still the web page up he used for the installation: https://heikkihumberg.com/chess/ He said he used ipads as renderers. And even one grid may have looked different back in the day than that page now, as the font might be different. The SVG just uses system fonts and the chess pieces are just unicode characters.

Cool thanks.

Is there a way to control the speed. When I load a single SVG into browser, it runs through the whole game in a flash. (Edge shows animation; chrome and firefox show static image for me)

Re: An SVG is all you need

#109

Post by giamma »

james-bcn wrote: post #106
giamma wrote: post #98

I believe that would result in non accessible content, I believe screen readers cannot properly assist impaired users with SVG content. As such I think it's not a good idea for a document that should have a large audience.

Is there any appropriate solution for complex interactive charts and graphs?

Good question. In general charts are not accessible because visually impaired users cannot use a mouse.

You would need an interacting charting library that works with a keyboard and that is readable by a screen reader.

Re: An SVG is all you need

#110

Post by OuterVale »

paularmstrong wrote: post #30
xxmarkuski wrote: post #13

I use ChatGPT to compress SVGs, in particular QR codes. Many QR code SVG generators produce inefficient SVGs, and conventional SVG compressors often lack the understanding required for some compression techniques. ChatGPT can replace alignment indicators with elements. Is there a way to embed the data encoded in the QR code directly within the image? This would allow the data to be parsed directly by the browser, eli…

> I use ChatGPT to compress SVGs, in particular QR codes Why? svgomg.net exists, uses far fewer resources, and is going to give you much better results.

Heads up. The site you linked is just a wrapping of the original with adverts and tracking scripts. It isn't running the latest version either. Much better off using the creator's version.

https://jakearchibald.github.io/svgomg/

Post reply on HN