Pablo is a small, open-source JavaScript library for SVG | Hacker News Reader

Pablo is a small, open-source JavaScript library for SVG

pablojs.com

160 pointsEntICOnc53 comments

No I am not ;).

Nice work (and very nice name — although know that Picasso was actually an asshole). The slides are a very nice addition to the landing pages, I think the link to them should be emphasized more: http://slides.pablojs.com/.

>although know that Picasso was actually an asshole

Well, as opposed to who of us? The main difference being that we know of his private life...

That's a good point. I'm not at all saying “#NotAllMen”.

But not all projects are named after someone, or have a reference to that someone on their front page (here, a quote).

Where does #NotAllMen fit in?

When coldtea said "Well, as opposed to who of us?" he implied that we all are assholes. Given the reason I was saying that about Picasso, which are all linked to sexist behavior and patriarchy, I understood that "us" as "men".

I didn’t infer he was talking about men specifically. Plenty of women are assholes, an equal amount to men I would say. It’s a universal human phenomenon.

Yes. That's why I explained the context which led to my understanding of his comment when you asked.

What are you responding “yes” to? The part I’m disagreeing with is that men are uniquely assholes.

I'm agreeing with “It’s a universal human phenomenon.”.

I was mostly meaning it as in: "who are we to judge", as opposed as to "we are all assholes". I'm sure plenty are assholes, plenty are not, and many women are too.

But my point was, any of us could be much worse, including those pointing the finger at Picasso, the main difference being that we don't have our lives open for all to see, as is the case with someone like Picasso.

Well I'd say most of us aren't "dating a 17 year old while 45" kind of questionable.

It wasn't that questionable in 20th century Paris, much less to artistic and bohemian circles...

They weren't exactly about puritan prudery and bourgeois morality...

Not to mention that "I disaprove of him dating a 17th year old when he was 45" to "asshole" is quite a long way...

You know that was considered fine until like a couple decades ago right? And even now it’s highly dependent on culture.

its a reference to the Modern Lovers song "Pablo Picasso" (I think)

All this time I thought it was a John Cale song! (Granted I'd never checked)

Edit: Huh, he did produce it, played on the original recording, and then released his cover before the original: https://en.wikipedia.org/wiki/Pablo_Picasso_(song)

It was not, I didn't know about that song.

I put a list of link about Picasso elsewhere in this thread: https://news.ycombinator.com/item?id=29292805

Everybody knows that Pablo Picasso was never called an asshole https://www.youtube.com/watch?v=k43XjuhInkU

I love the cover of this song on the Repo Man soundtrack

The David Bowie version is pretty cool too.

At least not in New York.

What did he do?

You could check these references:

https://www.abc.net.au/news/2019-02-13/picassos-depiction-of...

https://www.abc.net.au/news/2018-02-28/hannah-gadsby-intervi...

https://www.standard.co.uk/comment/comment/picasso-was-an-ar...

https://www.elle.com/culture/career-politics/a41293/bertoluc...

It is possible to appreciate art without tedious pro-forma denunciations of the artist's behavior? At some point a creator's name is less about a historical person or apocryphal personage than the collective value found in artifacts and ideas.

I understand why you would say that, adolph. But first, Picasso's art is tightly linked to his misbehavior, and second, we're not even talking about Picasso's art here, we're discussing the name of a project which is a direct reference to Picasso.

> Picasso's art is tightly linked to his misbehavior

No it isn't. Don't get stuck on stupid.

Please read the references I put elsewhere in this thread before saying such things. You are wrong. It's not a matter of opinion, it is a fact that some of his paintings are direct expression of his violence against women. And that his career was partly made possible by his exploitation of his (successive) wives (who he happens to have intentionally broken their career for two of them).

I'm always interested in projects like this, since my Iron Arachne project dynamically builds several types of image with SVG and I currently rely on xmlbuilder2 as my primary method of creation.

To see the results, here are two pieces of the site that use SVG:

https://ironarachne.com/#/starsystem - the planet and star images are SVG

https://ironarachne.com/#/heraldry - the coat of arms is SVG

It's kind of painful to work with xmlbuilder2 for these things, though. I've been considering moving away from SVG and just using pure WebGL for all generated images.

Pablo looks like it's meant as an animation library more than anything else; the commentary about Flash drives home that point for me. I don't think it would help me, at least not at a glance.

I would use React or a similar library with renderToStaticMarkup to produce SVG, because the JSX syntax basically gives you an XML literal. You can compose XML expression and write functions that take and return XML fragments. Those features significantly reduced the XML/HTML boilerplate for a document export system I migrated to React/JSX. The big annoyance is that it requires a build step to transform the JSX into regular JS, but if you’re using Typescript already (I was) then it’s a single flag to enable.

Or go WebGL. That also sounds like a fun learning project.

Pablo looks to be about 8 years old. I thought it must be when it mentioned installing it with Bower. Not a criticism or anything, just pointing it out.

yeah, it's not a new one.

today Svelte would be the #1 pick for part-SVG full-page infographics with transitions and animations

I've heard Svelte being promoted for SVG animations before too, but I haven't understood why. Is there some benefit Svelte specifically has here opposed to React/Vue/etc?

Svelte comes with a bunch of animation related things out of the box, whereas with Vue or React you’re going to be implementing that stuff yourself or seeking out a third party library.

What deergomoo says, and also performance - Svelte isn't really a framework, it prefers to call itself a compiler. Each component compiles into something that has no virtual-DOM overhead - what the compiler does is that it tracks which fragment depends on which value, and then at runtime when a value is updated, only the needed fragments are updated.

What I also like about it is what a .Svelte file looks like. Since it's a compiler from the very beginning, it didn't need to start as .js and only than add .jsx for a little less verbosity. Svelte file is basically a HTML file with <style> and <script> tags. Variables from javascript can be referenced in HTML simply with {var}, and there are constructs for if/else, loops and few other special things. Easier to see than describe, go to https://svelte.dev/tutorial/

I wonder if we can use it with Svija (https://svija.love).

We've been building all-SVG websites for six years, and the big hurdle has always been the complexity of creating simple SVG content.

For complex content we use Adobe Illustrator, but for documentation etc., we've not yet found a good solution.

I'm on my phone, but I can't wait to check it out on my computer.

That's a great idea.

Do you support Inkscape?

We don't right but now we're considering adding it.

If you know it well I'd like to ask you a few questions — andrew@svija.love

I’ve been working on a project that makes creating SVGs — with all assets embedded — as simple as possible. https://github.com/rben01/collagen

Does the DOM's animate method play well with SVGs yet? E.g., can you feed it an array of path data and have it do the animation over a specified duration?

Edit: assume I'm giving path data with the same commands and number of points.

Despite this being old, it did allow me to do something I've wanted to for a while on this page : https://opguides.info/design/dacadc/ so I'm really glad it made it to the front page!

Here's a replay of the rocket demo if others are curious how it works.

https://app.replay.io/recording/3cc35235-0a00-4fff-a1eb-7ffa...

https://www.loom.com/share/059d3d0770db447a8287c05bf269b476

Cute, but the demo appears to be completely broken on an iPad.

I had an issue on Android Firefox with the first demo but the other two were ok.

Nice. A few more examples would help. Also, some of us (read: less and less) remember Flash. But there are plenty who probably heard of it but never full experienced, or felt the pains it created. So yeah, more examples would be great.

P.s. Did I miss it? How many KB is the min?

When would dynamically generated SVG be preferable to using an html canvas?

when you want vector instead of raster

Someone should create a Pablo implementation that exists entirely with an .svg since they can contain and execute JS code when viewed in an HTML page by a browser (or sometimes PDF readers).

This is just a DOM manipulation library, with some animation support thrown in. It's doing the same stuff that you can do with a few D3 libraries: d3.selection + d3.transition.

How does it compare to Snap.svg? I haven't used it much either, but I've used its precursor Raphael and it was great.

It's rare to see JS libraries releasing on bower nowadays. Is there any particular reason that was chosen over NPM?

I think this is an old library

Yes, looks like it hasn't received an update in quite some time.

https://github.com/premasagar/pablo

Reply on news.ycombinator.com