Pablo

For full documentation and interactive examples, see pablojs.com.

Pablo is a small, open-source JavaScript library for SVG, the web standard for vector graphics. It can be used for vector-based art, games, visualisations and interfaces.

Pablo focuses on simplicity and performance, targeting modern browsers for both desktop and mobile.

SVG has the potential to fulfil everything that Flash did for vector graphics on the web. However, SVG is severely behind Flash in terms of its developer tools. Pablo is a tiny offering to this cause.

Pablo is extendable via plugins and has no dependency on other JavaScript libraries.

• By Premasagar Rose (Dharmafly)
• Website: pablojs.com
• Repo: github.com/premasagar/pablo
• Open source: MIT license

Download

For production, use pablo.min.js.
For development, use pablo.js.

A test suite and changelog are available.

=====

How it works

Both SVG or HTML can be used in Pablo, although the main focus is on SVG.

Pablo acts as a thin wrapper around the contents of a web page, making it easier to work with dynamically-generated SVG and avoiding the verbose code required when using raw JavaScript.

Pablo provides methods like circle() and line() to create each kind of SVG element. It has methods for manipulating SVG and HTML, e.g. to change the appearance, size or position, and methods for filtering and sorting the elements.

It has a simple plugin system, allowing new functionality to be added.

Which browsers are supported

Basic SVG is supported in all modern browsers, including Internet Explorer 9 and mobile web browsers ([browser support table][browsers]).

Except in a couple of instances, Pablo doesn't attempt to workaround the lack of support in older browsers, although does let you know if the browser [is supported][issupported].

How it feels

Pablo's API is inspired by jQuery, Underscore, Backbone and Raphaël, although knowledge of these libraries isn't required. Using Pablo is to use SVG, so a growing knowledge of SVG goes hand-in-hand with using the library. See the Resources page for links and books on SVG.

See Pablo's API Reference for the details.

=====

Contributing

Your feedback is welcome. For bug reports and requests, please use the GitHub 'Issues' page or contact @premasagar.

[Pull requests][pullrequests] are welcome.

To update the documentation on pablojs.com, fork the [dharmafly/pablo-docs][pablo-docs] repo, edit the Markdown files in the docs folder on the master branch, and then send a pull request with the changes.