Live data from Hacker News

SVG can do that?

slides.com

181–190 of 202 posts

Re: SVG can do that?

#181
post #77

By "SVG can do that?", it appears they actually just meant "JavaScript can do that?", as all the cool animations and stuff are all just JS-driven. Unless I misread it?

This. Had a lengthy discussion exactly on this point in context of this very article couple of days back in office :)

Totally agree with you!

Re: SVG can do that?

#182
post #110

Earlier quoted context omitted.

When I started learning React, I realised a dream of mine could finally come true: a proper Celtic Knotwork generator. Uses SVG and React together in harmony. http://celtic-knotwork.online

Pardon my ignorance, but aren't these patterns just composed of certain tiles in rows and columns? This is something you can do equally well with raster graphics, so what's the gain of using SVG here?

I tried that on an earlier version, but there's complications ;)

The "double corded" style paints one side of a cord red and the other blue. The problem comes when the pattern changes what side is which. You can play around with it to see - put in some breakpoints and you'll see the "sides" switch on some cells. This can't be done with tiles.

The tile manipulation is actually no simpler than drawing SVG, because the hard bit is calculating the entry and exit points for each tertiary cell. And SVG produces better results :)

I also plan on doing some more stuff with it someday - like deforming the grid by moving the corners. This is pretty simple with SVG but would be really hard with tiles.

Re: SVG can do that?

#183
Welp, time to learn SVG! So much more functionality than CSS. Gorgeous examples. I wonder if it's much slower to load though?

Re: SVG can do that?

#184
post #153

Earlier quoted context omitted.

When I started learning React, I realised a dream of mine could finally come true: a proper Celtic Knotwork generator. Uses SVG and React together in harmony. http://celtic-knotwork.online

Awesome. Is the code for this open source? (I'm just afraid the world could lose this should you decide to take it down some day!)

Not yet - it's on github (the site runs off Github pages) but I need to prune the repo of private keys before I open-source it. Given the reaction here, I'll try and open it over the weekend :)

Re: SVG can do that?

#185
post #36

It's always been a curiosity of mine why SVG didn't get more attention from browsers through the years to solve the performance issues. It's open source, cross platform, "dynamic" in a sense AKA no compiling needed, light weight, supports shapes and text, offers immediate responsiveness, etc. Why the lack of love while we pour ever increasing energy into mangling HTML and CSS and every six months a new JS framework/m…

SVG support is a lot better now but it used to be horrible. A few years ago I wrote a simple game in SVG and it would be broken in almost all mobile browsers at the time.

Re: SVG can do that?

#186

Earlier quoted context omitted.

> has a number-of-elements performance ceiling if you're drawing things rather than using images, which feels like it defeats the purpose. Well you can generate your imagery programmatically and then render it to canvas as a raster image. Canvas is not purely for implementing a web based drawing app.

Software rasterisation is slow and power-inefficient, and does not scale particularly well with screen size.

when you are faced with between rendering hundreds of thousands of SVG DOM element vs in memory generation of a final raster image, the latter will always be more performant.

Re: SVG can do that?

#187

Earlier quoted context omitted.

> has a number-of-elements performance ceiling if you're drawing things rather than using images, which feels like it defeats the purpose. Well you can generate your imagery programmatically and then render it to canvas as a raster image. Canvas is not purely for implementing a web based drawing app.

But you can also embed a raster image in SVG.

The context of the discussion is to leverage SVG's DOM based approach to render on screen elements

Re: SVG can do that?

#188
post #92

SVG has the opposite performance profile of Canvas. SVG hits a performance ceiling as number of elements increases. Canvas, since it's rasterized image can handle a rasterized representation of millions of SVG elements. However as Canvas dimension increase, it will hit a performance ceiling.

(Edit moved to here from the wrong thread) This comes up on each SVG thread and I post the same comment each time (so excuse me if you've heard this from me before). We render SVG that contain beyond 100k nodes in the browser and find that it works fine. You need to be careful with your manipulations and we've developed a couple of tricks to keep things snappy, but the final experience is great. Here's a demo of it i…

so with your 100k node ceiling. Have you tested across different OSs/CPUs/Browsers? Have you found tremendous variety in performance?

Re: SVG can do that?

#189
post #149

Earlier quoted context omitted.

Cool, could you please explain what are they? To me, personally, SVG is the last resort.

In brief, our product includes a web-based process flow component, typical nodes-and-edges kind of thing. Much better done with SVG IMHO, with first-class support for box & line modelling and styling. But the powers-that-be decreed we'd do it all in HTML & CSS.

nodes-and-edges thing is the classic problem that is perfectly solved by SVG. Other than that it's quite useless though IMHO.

Re: SVG can do that?

#190
post #149

Earlier quoted context omitted.

In brief, our product includes a web-based process flow component, typical nodes-and-edges kind of thing. Much better done with SVG IMHO, with first-class support for box & line modelling and styling. But the powers-that-be decreed we'd do it all in HTML & CSS.

nodes-and-edges thing is the classic problem that is perfectly solved by SVG. Other than that it's quite useless though IMHO.

Well, I'll happily agree that SVG is a perfect fit for data-driven graphics, but that represents are reasonably large set of solutions, so I'd not say "useless" at all.
Post reply on HN