10 ms·
Pablo is a small, open-source JavaScript library for SVG
- bovermyer 5y agoI'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 https://ironarachne.com/#/starsystem - the planet and star images are SVG https://ironarachne.com/#/heraldry 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.
- jitl 5y agoI 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.
- rcarmo 5y agoCute, but the demo appears to be completely broken on an iPad.
- chiefalchemist 5y agoI had an issue on Android Firefox with the first demo but the other two were ok.
- chiefalchemist 5y agoNice. 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?
- p4bl0 5y agoNo 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/ http://slides.pablojs.com/.
- coldtea 5y ago>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...
- etc-hosts 5y agoits a reference to the Modern Lovers song "Pablo Picasso" (I think)
- mark_h 5y agoAll 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) https://en.wikipedia.org/wiki/Pablo_Picasso_(song)
- p4bl0 5y agoIt 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 https://news.ycombinator.com/item?id=29292805
- p4bl0 5y agoThat'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).
- marcellus23 5y ago
- city41 5y agoPablo 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.
- dym_sh 5y agoyeah, it's not a new one. today Svelte would be the #1 pick for part-SVG full-page infographics with transitions and animations
- ttiurani 5y agoI'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?
- deergomoo 5y agoSvelte 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.
- mvolfik 5y agoWhat 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/ https://svelte.dev/tutorial/
- SquareWheel 5y agoIt's rare to see JS libraries releasing on bower nowadays. Is there any particular reason that was chosen over NPM?
- alvarlagerlof 5y agoI think this is an old library
- SquareWheel 5y agoYes, looks like it hasn't received an update in quite some time. https://github.com/premasagar/pablo https://github.com/premasagar/pablo
- coldtea 5y agoHow does it compare to Snap.svg? I haven't used it much either, but I've used its precursor Raphael and it was great.
- deleted 5y ago[deleted]
- jancsika 5y agoDoes 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.
- joshuanapoli 5y agoWhen would dynamically generated SVG be preferable to using an html canvas?
- intrasight 5y agowhen you want vector instead of raster
- AndrewSwift 5y agoI wonder if we can use it with Svija (https://svija.love 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.
- deleted 5y ago[deleted]
- sigg3 5y agoThat's a great idea. Do you support Inkscape?
- AndrewSwift 5y agoWe 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
- bobbylarrybobby 5y agoI’ve been working on a project that makes creating SVGs — with all assets embedded — as simple as possible. https://github.com/rben01/collagen https://github.com/rben01/collagen
- picardo 5y agoThis 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.
- jasonlaster11 5y agoHere's a replay of the rocket demo if others are curious how it works. https://app.replay.io/recording/3cc35235-0a00-4fff-a1eb-7ffad8983621?point=49326820156158985585113280901284041&time=17222.330956478978&hasFrames=true# https://app.replay.io/recording/3cc35235-0a00-4fff-a1eb-7ffa... https://www.loom.com/share/059d3d0770db447a8287c05bf269b476 https://www.loom.com/share/059d3d0770db447a8287c05bf269b476
- superkuh 5y agoSomeone 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).
- vegadw 5y agoDespite 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/ https://opguides.info/design/dacadc/ so I'm really glad it made it to the front page!