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

131–140 of 155 posts

Re: An SVG is all you need

#131

Post by mapt »

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

Certain businesses paid for years to keep a private-label version of Flash alive for their internal Flash business applications.

Re: An SVG is all you need

#132

Post by bikelang »

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…

Minor nit but I noticed at the bottom the text reads “Start free tiral”. Maybe a dance-themed joke that went over my head? But probably intended to be “trial” :^)

Re: An SVG is all you need

#133

Post by sturbes »

psygn89 wrote: post #14
sturbes wrote: post #4

I just went down the same rabbit hole, it is totally fun! https://turbek.com/Designing-Interactive-SVGs-with-AI/ TLDR: - SVG image files: powerful like HTML - Supported widely in browsers - Designer tools make SVGs - SVGs are written in a language - LLMs are great at manipulating language - Designers can collaborate interaction into life

I don't think LLM's are that great at manipulating SVG unless you mean like small edits like rotation and font size. Cool article though, I'll have to think how I can leverage it.

Of course, but in comparison to bitmap tools like midjourney, you can communicate with an AI by specifying a SVG element to be manipulated. "Rotate ID "logo" 30 degrees" is very legible to the AI

Re: An SVG is all you need

#135

Post by masfoobar »

zdragnar wrote: post #121
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

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.

I was doing some pretty decent rendering in HTML4 back in 2008.. supporting various browers (let alone IE6, 7 and maybe 8 at the time)

Around 2010, I did experiment with things like Silverlight and SVGs. SVGs was OK, but the performance quality was not there. It might be a lot better now.

Re: An SVG is all you need

#136

Post by digdugdirk »

Is there a 3D equivalent (technical or spiritual) of SVG? I've been working on a CAD visualizer, and I'm looking for something lightweight that I can use to build up representative changes to cad models without having to do a full loop through the CAD application, pull a full .step export, and visualize that.

SVGs will work nicely for showing 2d sketches, but I'm hoping for something similar for the models themselves, without the slowdown of having to use the underlying CAD software for visualization.

Re: An SVG is all you need

#137

Post by rikroots »

zdragnar wrote: post #121
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

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?

Re: An SVG is all you need

#138

Post by mmooss »

Agraillo wrote: post #100
mmooss wrote: post #69

Earlier quoted context omitted.

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'd say that html+js suggestion of GP still holds, but with caveats. After all these years, HTML has everything needed for this, including images that can be embedded via the data URI scheme [1]. For example, I once adjusted an Object Pascal interactive program (target: Windows/Win32) for the browser target (FreePascal compiler has the JS target). An intermediate result was a bunch of files that worked locally on des…

In essence you're describing epub, which is HTML, and I agree. It has great potential but nobody seems to see it as more than a cheap ebook format, and even that is underdeveloped in terms of capabilities: presentation quality and annotation are nowhere near PDF, for example.

Most of all it needs usable editors, and editors which integrate multimedia and dynamic content editing. End users can't turn to a different editor for each media and then integrate the output into the epub document, like a web developer does (e.g., for an image use Photoshop, save the jpg, copy to the proper directory, reference appropriately in the html).

Re: An SVG is all you need

#139

Post by mmooss »

cl3misch wrote: post #103
mmooss wrote: post #69

Earlier quoted context omitted.

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.

Yes, that's epub. See my other comment in this thread.

Re: An SVG is all you need

#140

Post by csnover »

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

Somebody did think of it. SVG 1.1 added the `` element[1]; SVG 2.0 replaced this with mandatory WOFF support.[2] A WOFF is both subsettable and embeddable using a data URI, and is supported by all the browser UAs already, so it’s obvious why this was changed, but embeddable SVG fonts have existed for a long time (I don’t know why/how they got memory holed).

> - browsers do not publish, which version and features they support

It should be possible to use CSS `@supports` for most of this and hide/show parts of the SVG accordingly in most places.[3] The SVG spec itself includes its own mechanism for feature detection[4], but since it is for “capabilities within a user agent that go beyond the feature set defined in this specification”, it’s essentially worthless.

There are obvious unsolved problems with SVG text, but they are more subtle. For example, many things one might want to render with SVG (like graphs) make more sense with an origin at the bottom-left. This is trivial using a global transform `scaleY(-100%)`, except for text. There is no “baseline” transform origin, nor any CSS unit for the ascent or descent of the line box, nor any supported `vector-effect` keyword to make the transformation apply only to the position and not the rendering. So unless the text is all the same size, and/or you know the font metrics in advance and can hard-code the correct translations, it is impossible to do the trivial thing.

There are other issues in a similar vein where scaling control is just ludicrously inadequate. Would you like to have a shape with a pattern fill that dynamically resizes itself to fill the SVG, but doesn’t distort the pattern, like how HTML elements and CSS `background` work? Good luck! (It’s possible, but much like the situation with text wrapping, requires egregious hacks.)

Some of the new `vector-effect` keywords in SVG 2 seem like they could address at least some of this, but those are “at risk” features which are not supported by UAs and may still be dropped from the final SVG 2 spec.

[0] https://www.w3.org/TR/SVG2/text.html#InlineSizeProperty

[1] https://www.w3.org/TR/SVG11/fonts.html

[2] https://www.w3.org/TR/SVG2/changes.html#fonts

[3] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/A...

[4] https://www.w3.org/TR/SVG2/struct.html#ConditionalProcessing...

Post reply on HN