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

41–50 of 106 posts

Re: Easy SVG sparklines

#41

Post by josephcsible »

dylan604 wrote: post #39
tripflag wrote: post #28

Earlier quoted context omitted.

This is only an issue on chrome-based browsers; performance in Firefox is much closer to what you would expect. You can/could (late 2022) reliably crash chrome by displaying 1000+ unique SVG files on one page, with each SVG simply displaying a single line of text. My current workaround is rendering the SVGs to png serverside if the client is chrome-based, as canvas feels like the wrong solution.

Since the vast majority of users are a chromium based browser, doesn't this put the burden on your server pretty much all of the time? why even bother with code to do 2 different things when the other thing is such a niche segment of users?

This kind of thinking is how we ended up with the IE6 disaster.

Re: Easy SVG sparklines

#42

Post by dylan604 »

josephcsible wrote: post #41
dylan604 wrote: post #39

Earlier quoted context omitted.

Since the vast majority of users are a chromium based browser, doesn't this put the burden on your server pretty much all of the time? why even bother with code to do 2 different things when the other thing is such a niche segment of users?

This kind of thinking is how we ended up with the IE6 disaster.

That's my point of having the logic to do multiple workflows based on browser type.

Re: Easy SVG sparklines

#45

Post by antonhag »

nnf wrote: post #3

Simple, data-driven graphics like this is one area where SVG really shines, I think. No need to load a JavaScript charting library if you just want some simple line charts like this. I create SVG images fairly often, and maybe half the time I find myself hand-coding them, or at least hand-tweaking them, since I enjoy the magic of seeing code turn into something visual.

An alternative if you want a bit more help with charting, without client side JS, is to use d3-shape (https://github.com/d3/d3-shape) to server-side render SVGs.

Re: Easy SVG sparklines

#46

Post by javajosh »

bla3 wrote: post #40
javajosh wrote: post #37

I like it! But instead of modifying your data to suit SVG's default coordinate system, I suggest using a top-level "g" tag with a "transform/scale" attribute. Like this: A static svg unit circle Example adapted from: https://simpatico.io/svg.md#naturalunits In this way you can use the intuition about the coordinate system that you built in school.

Doesn't this flip all text in the SVG upside down?

Alas, yes. And you have to reflip it with another g/scale. But such is life!

Re: Easy SVG sparklines

#47

Post by javajosh »

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. This gives you exquisite control requiring very little code.

https://simpatico.io/svg.md#clocksvg

Re: Easy SVG sparklines

#48

Post by XCSme »

xyzzy_plugh wrote: post #24
Lockal wrote: post #10

But SVG is slower than Canvas. The main use case for sparklines is embedding them into cells, many hundreds or even thousands of them [1]. With hundreds of SVG files page becomes becomes visibly slower (first paint, scroll, interactions). I suggest to invest some time and check canvas solution too. [1]: https://www.google.com/search?q=sparkline&tbm=isch

Of course SVG is slower than Canvas. SVG is fundamentally much more powerful. Canvas is just a pixel buffer. You know what's even faster than Canvas? JPEG. Of course these tools have different use cases. Handling scaling events and interactivity with Canvas is far, far more laborious. The great thing about SVG (and to a lesser extent JPEGs) is that you can produce them anywhere, not just in a browser with a JavaScrip…

> You know what's even faster than Canvas? JPEG

Is that true? Isn't canvas a bitmap whereas JPEG requires decoding?

Re: Easy SVG sparklines

#50

Post by gabereiser »

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…

+1 for requestAnimationFrame. SMIL animations are cool until you try doing 1,000 of them. Still, I do agree that SVG is underutilized. Not only can it do so much more but it has effects that can be used in conjunction with DOM elements. Things like dropshadow, glow, blur, greyscale, duotone, etc. Check out this SVG glitch effect [0]

[0] https://codepen.io/DirkWeber/pen/YzBYWY

Post reply on HN