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

141–150 of 155 posts

Re: An SVG is all you need

#141

Post by csnover »

codedokode wrote: post #104
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.

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 examp…

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

For better or worse, CSS parsing and WOFF support are both mandatory in SVG 2.[0][1] Time will tell whether this makes it a dead spec!

[0] https://www.w3.org/TR/SVG2/styling.html#StylingUsingCSS

[1] https://www.w3.org/TR/SVG2/text.html#FontsGlyphs

Re: An SVG is all you need

#142

Post by syngrog66 »

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.

Flash directly led to South Park, however. one of the funniest animated series ever. Worth it!

Re: An SVG is all you need

#143

Post by nanolith »

tambourine_man wrote: post #83
nanolith wrote: post #36

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?

Sadly, I did not. I have the source code on an old laptop somewhere. I was disheartened when I considered productizing it and discovered just how deep of a patent tarpit I was dealing with.

It's on my list to revisit in the future. At this point, most of the patents are coming up on expiration, and it would make for a great open source project. Hardware has gotten much better over the subsequent years; there are nicer lower power solutions with integrated Bluetooth LE as well as other low power wireless technologies.

Re: An SVG is all you need

#144

Post by sunrunner »

aa-jv wrote: post #116
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…

This is a brilliant piece of software and I've had a blast learning about it. I would LOVE to see this feature: pass it a video, get a formulated choreography based on that video. For example, take a Project21 or Avantgardey video, do some AI/ML voodoo, import their choreography. Think that'd be possible?

If this worked I'd love to see this applied to Bob Fosse's 'The Rich Man's Frug'. That kind of choreography is the kind that makes me wish I'd picked a wildly different career path.

Re: An SVG is all you need

#145

Post by codedokode »

csnover wrote: post #140
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…

> - cannot wrap text This is possible, but only in the stupid way of using a ` ` to embed HTML in your SVG (which obviously only works if your SVG renderer also supports at least a subset of HTML). SVG 2 fixes this by adding support for `inline-size`[0], so now UAs just need to… support that. > - cannot embed font glyphs - your SVG might be unreadable if the user doesn't have the font installed. You can convert lette…

Interesting, I stumbled upon SVG fonts only as a format for webfonts in CSS.

Re: An SVG is all you need

#146

Post by albert_e »

newcup wrote: post #117
albert_e wrote: post #108

Earlier quoted context omitted.

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)

There are three timeouts defined in the SVG / embedded javascript code, on lines 66-68 ( https://github.com/jnykopp/svg-embedded-chess/blob/a24249729... ) You can increase COMP_MOVE_TIMEOUT (which is now 1 millisecond) to, say, 100 milliseconds. RESET TIMEOUT defines how long the game is paused after game is finished to let the viewer to see the result, and NEW_GAME_START_TIMEOUT defines how long to wait before doing…

Thanks for the details!

Is embedding intelligent logic inside of SVGs for animation a common thing -- feels very novel to me. Kudos for the idea and execution!

I am wondering if it is possible to push it even further and bring more and more creative logic -- say to create some unique patterns / designs etc that render differently each time. Say a swirling ripples animation that keeps changing over time but never feels like it is "pre-recorded".

Also, can animated SVGs be embedded in powerpoint and the like -- so we get crisp vector animated design elements in a compact portable format?

I do worry that this can also open some possible attacks -- malicious URLs in a dynamically generated QR, for example.

Re: An SVG is all you need

#147

Post by imtringued »

csnover wrote: post #141
codedokode wrote: post #104

Earlier quoted context omitted.

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 examp…

> 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. For better or worse, CSS parsing and WOFF support are both mandatory in SVG 2.[0][1] Time will tell whether this makes it a dead spec! [0] https://www.w3.org/TR/SVG2/styling.html#StylingUsingCSS [1] https://…

That's how OpenCL died. They made difficult to implement features mandatory.

Re: An SVG is all you need

#148

Post by Timwi »

rikroots wrote: post #137
zdragnar wrote: post #121

Earlier quoted context omitted.

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.

SVG rendering on browsers is still sub-optimal, which I think is a shame as SVG has great potential if it was treated as a first-class element on the web. Recent improvements to the code driving (2D) Canvas API canvas elements shows that this work could be done across browsers. The big thing holding back development is possibly the continuing failure to finalise the SVG2 standard?

Can you describe what you think is sub-optimal? Is it just the performance or is there something else?

I've been using SVG for years for various purposes (though, admittedly, mostly static graphics) and I can't complain.

Re: An SVG is all you need

#149

Post by Timwi »

syngrog66 wrote: post #142
chiefalchemist wrote: post #107

Earlier quoted context omitted.

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.

Flash directly led to South Park, however. one of the funniest animated series ever. Worth it!

That kind of Flash is still around and well. Many newer shows are animated in Flash (MLP: FiM, Bluey, the last season of Fairly OddParents, etc.). What was killed wasn't Flash itself, but Shockwave Flash (Flash in the browser).

Re: An SVG is all you need

#150

Post by rikroots »

Timwi wrote: post #148
rikroots wrote: post #137

Earlier quoted context omitted.

SVG rendering on browsers is still sub-optimal, which I think is a shame as SVG has great potential if it was treated as a first-class element on the web. Recent improvements to the code driving (2D) Canvas API canvas elements shows that this work could be done across browsers. The big thing holding back development is possibly the continuing failure to finalise the SVG2 standard?

Can you describe what you think is sub-optimal? Is it just the performance or is there something else? I've been using SVG for years for various purposes (though, admittedly, mostly static graphics) and I can't complain.

It's sub-optimal in that browser developers have - for a number of legitimate reasons - chosen not to spend their time building SVG engines into their browsers that are efficient, robust and fast. I think its more a story of benign neglect rather than active discouragement. Compared to the Javascript and CSS engines, which have improved massively over the past decade, SVG remains ... serviceable for basic requirements (simpler stuff - static graphics, icons, etc), but nothing more. If that makes sense?
Post reply on HN