Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Easy SVG sparklines

alexplescan.com

Post reply on HN
Print view View original

71–80 of 106 posts

Re: Easy SVG sparklines

#71

Post by jwr »

I'm going to be the Smug Lisp Weenie here (I wonder who gets the reference), and comment on this:

> One of my favourite things about creating sparklines like this is that I can create the SVGs entirely on the backend. I don’t need to worry about using a JavaScript charting library, or sending the “points” data to the frontend. The browser requests an SVG. The server returns it. Simple!

Me, I don't care where I create the SVGs. Most of my Clojure code is shared between backend and frontend (compiled and running on the JVM in the backend and compiled to JavaScript in the frontend). So I can generate SVGs wherever, it doesn't matter, the code is only written once. Or rather, it might matter, because my website uses server-side rendering, so the same thing must be generated on both sides.

I'll see myself out now.

Re: Easy SVG sparklines

#74

Post by lucideer »

jwr wrote: post #71

I'm going to be the Smug Lisp Weenie here (I wonder who gets the reference), and comment on this: > One of my favourite things about creating sparklines like this is that I can create the SVGs entirely on the backend. I don’t need to worry about using a JavaScript charting library, or sending the “points” data to the frontend. The browser requests an SVG. The server returns it. Simple! Me, I don't care where I create…

I mean... isomorphic code isn't unique to Clojure & is how many JS/NodeJS apps work...

Re: Easy SVG sparklines

#75

Post by chefandy »

javajosh wrote: post #47
chefandy wrote: post #38

Maybe it's just because I have so much experience with design and visual art, but I think SVG is one of the most, if not the most underutilized web format. It's great for the self-contained static vector graphics that it's most commonly used for, but it can do so much more. SMIL animations can be a little clunky, but having an alternative to gif and video that doesn't require JS is pretty rad-- especially for throbbe…

>SVG is one of the most, if not the most underutilized web format Yes. I think the problem is that you have to learn to author with it before you program with it, and the learning curve is actually fairly steep. OTOH the feedback is immediate and satisfying. Personally, I've ignored SVG's built-in animation capabilities in favor of pumping DOM modifications into the scenegraph with a (requestAnimationFrame) timer. Th…

Yeah it's great with JS, and I use it for most dynamic things I do with SVG. I'd still stick with SMIL for little animated icons that would be deployed multiple places and other little problems like that.

> Yes. I think the problem is that you have to learn to author with it before you program with it, and the learning curve is actually fairly steep.

Good point.

Re: Easy SVG sparklines

#76

Post by chefandy »

psygn89 wrote: post #60
chefandy wrote: post #38

Maybe it's just because I have so much experience with design and visual art, but I think SVG is one of the most, if not the most underutilized web format. It's great for the self-contained static vector graphics that it's most commonly used for, but it can do so much more. SMIL animations can be a little clunky, but having an alternative to gif and video that doesn't require JS is pretty rad-- especially for throbbe…

I wish would accept `fill` property through css. There's a neat trick to colorize SVG's: https://angel-rs.github.io/css-color-filter-generator/

There's definitely some super clunky stuff, there. "This is an image! no... wait... this is an embedded document! no... hold on... it's an ima... hmm...."

It all makes sense from a technical perspective when you dig into it, but it's totally counterintuitive in surprising ways, sometimes.

Re: Easy SVG sparklines

#77

Post by mighmi »

jwr wrote: post #71

I'm going to be the Smug Lisp Weenie here (I wonder who gets the reference), and comment on this: > One of my favourite things about creating sparklines like this is that I can create the SVGs entirely on the backend. I don’t need to worry about using a JavaScript charting library, or sending the “points” data to the frontend. The browser requests an SVG. The server returns it. Simple! Me, I don't care where I create…

What's Clojure's WASM story like? That would be much more exciting than having to transpile to JS.

Re: Easy SVG sparklines

#78

Post by nologic01 »

SVG feels like the neglected stepchild of the web universe for reasons that are not entirely clear.

While its obviously not the solution to any and all visualizations in the browser its a remarkable addition to html and the dom. It should not really be considered a foreign format but the natural native one.

SVG can go a long way on its own or together with server side templates (as this post nicely demonstrates) but imho its pairing with js libraries such as d3 or vega is (still) out of this world in terms of the user experience they create.

Re: Easy SVG sparklines

#79

Post by thehappypm »

Lockal wrote: post #20
thehappypm wrote: post #11

Earlier quoted context omitted.

Hard to imagine that pure-HTML SVG is really slower than Canvas which relies on JS..

It is, it is! SVG is DOM, with event handling on every node, with attempts to apply CSS rules. Canvas for non-interactive charts is just "draw once and forget". It is a sequence of moveTo + lineTo, then you have a bitmap and nothing else. Extremely basic graphics, modern JS engines will handle it in the blink of an eye. I don't even mention the fact that article suggests to return each SVG sparkline in a separate req…

Guess it depends on your definition of performance.
Post reply on HN