This is cool! For those who don't know, there's a font called Sparks that uses glyphs to create sparklines: https://github.com/aftertheflood/sparks
Why are the compressed fonts _5MB_!?
Easy SVG sparklines
91–100 of 106 posts
Re: Easy SVG sparklines
#92Ah! So all that complicated looking syntax is just a turtle with a pen.
This references Logo, a programming language where you control a turtle to draw shapes.
https://en.wikipedia.org/wiki/Logo_%28programming_language%2...
Re: Easy SVG sparklines
#93Earlier quoted context omitted.
Funny you say this, I spent a good 5+ hours yesterday trying to get an SVG of a UI mockup to render properly on Safari before giving up and implementing it in HTML. What was especially annoying was that different representations of the exact same SVG would behave differently (inline-svg vs img+src vs object)
SVG has… weirdnesses. I couldn’t say exactly what they are. But it feels like an older format from an XML-centric era. It also feels fairy lax on “optional features” and ambiguous spec (although I’m not sure this is true). There are noticeable differences between different rendering engines. Most of drawing works fine as markup. However, animations and simple state changes are awful. CSS is much easier to use for som…
Noticable differences between rendering engines for what? Sometimes type can be janky, but no moreso than in html/css, and in SVG you're generally turning type into vector outlines. For graphics rendering, it's completely accurate in any environment I've used it in, and that's working with very very fussy brands.
Re: Easy SVG sparklines
#94Maybe 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…
Funny you say this, I spent a good 5+ hours yesterday trying to get an SVG of a UI mockup to render properly on Safari before giving up and implementing it in HTML. What was especially annoying was that different representations of the exact same SVG would behave differently (inline-svg vs img+src vs object)
How was it made?
Re: Easy SVG sparklines
#95Earlier quoted context omitted.
SVG has… weirdnesses. I couldn’t say exactly what they are. But it feels like an older format from an XML-centric era. It also feels fairy lax on “optional features” and ambiguous spec (although I’m not sure this is true). There are noticeable differences between different rendering engines. Most of drawing works fine as markup. However, animations and simple state changes are awful. CSS is much easier to use for som…
Noticable differences between rendering engines for what? Sometimes type can be janky, but no moreso than in html/css, and in SVG you're generally turning type into vector outlines. For graphics rendering, it's completely accurate in any environment I've used it in, and that's working with very very fussy brands.
I mean I'd say this is pretty noticeable: https://imgur.com/e6TbXFj
Same screen, same zoom levels. Viewbox properly set, height/width set, confirmed compliant units. Switching between img/object would get it unblurry but then lose the embedded image data. Switching to inline-svg would in turn get the image data working but the drop shadow was completely broken.
Re: Easy SVG sparklines
#96Earlier quoted context omitted.
Funny you say this, I spent a good 5+ hours yesterday trying to get an SVG of a UI mockup to render properly on Safari before giving up and implementing it in HTML. What was especially annoying was that different representations of the exact same SVG would behave differently (inline-svg vs img+src vs object)
How was it made?
Figma, and I got to the point of running it through SVGO and hand patching any constructs that had known issues with Safari.
Going based off the types of bugs I was seeing alone I wouldn't trust SVGs for anything but the most basic shapes.
Re: Easy SVG sparklines
#97Earlier quoted context omitted.
SVG has… weirdnesses. I couldn’t say exactly what they are. But it feels like an older format from an XML-centric era. It also feels fairy lax on “optional features” and ambiguous spec (although I’m not sure this is true). There are noticeable differences between different rendering engines. Most of drawing works fine as markup. However, animations and simple state changes are awful. CSS is much easier to use for som…
Noticable differences between rendering engines for what? Sometimes type can be janky, but no moreso than in html/css, and in SVG you're generally turning type into vector outlines. For graphics rendering, it's completely accurate in any environment I've used it in, and that's working with very very fussy brands.
I don’t recall exactly. Filters or blending modes probably.
Re: Easy SVG sparklines
#98I'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...
Of course. But I'm a Smug Clojure Weenie, so. :-)
Re: Easy SVG sparklines
#99I'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.
Why would it be more exciting?
I've been running a massive SaaS app for the last several years. JavaScript is not a performance problem, especially after compiling using the Google Closure compiler "advanced" mode. Rendering is a performance problem: think large tables. WASM would bring me no significant advantages.
Re: Easy SVG sparklines
#100Maybe 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…
Safari renderer is so bad though, every single complex smil animation I’ve ever built just broke into pieces on Safari.