Pablo

Overview

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. The core script is around 8KB.

Download

Star the project on GitHub, or download it:

Pablo on GitHub pablo.js v0.4.0 pablo.min.js v0.4.0 Edge (master)

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, to change the appearance, size, position and other properties. It also has methods for filtering and sorting the elements.

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

Browser support

Pablo and SVG is supported in all modern browsers, including Internet Explorer 9 and mobile web browsers.

What Pablo's like

Pablo’s is inspired by jQuery, Underscore, Backbone and Raphaël, although knowledge of these libraries isn’t required.

Pablo is quite different from D3. D3 is a purpose-built data visualisation tool, with a slightly steep learning curve at the start. By comparison, Pablo is a tool to create interactive drawings and animations in general, and it is fairly easy to learn. Pablo can definitely be used to create data visualisations, but for anything complex, D3 is the tool to use.

Pablo gives access to the browser’s full support for SVG, HTML and CSS, so a growing knowledge of these technologies will help to get the most out of Pablo. (See the Resources page for some useful links).

Getting started

Download the full script for development or the minified script for production. Add the script to the page’s HTML:

<script src="pablo.min.js"></script>

Optional: install with Bower

If you use the Bower package manager, you can install the latest version of Pablo by typing in the terminal:

bower install pablo

Start drawing

Tip: The code snippets with ‘Run’ buttons are editable.

/* Check browser support */
if (Pablo.isSupported){
    /* Inside an HTML element, append an <svg> root */
    Pablo(demoElement).svg({height:180})
        /* Append a <circle> element with attributes */
        .circle({cx:90, cy:90, r:90})
        /* Add an event listener to the circle */
        .on('click', function(event){
            /* On click, set the `fill` attribute */
            Pablo(this).attr('fill', 'red');
        });
}
else {
    /* Fallback content */
}

Learn Pablo

Contributing

Tests

To test if a particular browser or device is supported by Pablo, run the test suite on the device.

If you need to run the tests locally, checkout the repo and open tests/index.html in the browser. For the Ajax tests to pass, you should run from a localhost server.

If you are contributing to Pablo, please add or update the tests in tests/tests.js.