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.

Download

Star the project on GitHub, or download it:

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

Demo

Pablo, using CSS transitions and transforms. Press ‘Esc’ to exit.

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.

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>

Or, 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: In the docs, you can click and edit any code snippets that have ‘Run’ buttons.

/* 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, fill:'red'})
    /* Add an event listener to the circle */
    .on('click', function(event){
        /* On click, set the `fill` attribute */
        Pablo(this).attr('fill', 'green');
    });

External SVG files can be imported and interacted with.

/* Load an SVG file */
Pablo(demoElement).load('/rocket.svg', function(rocket){
    /* Find some elements */
    rocket.find('path, rect')
        /* Change their attributes */
        .attr('opacity', 0.2)
        /* Set a stagger function */
        .stagger(function(current, previous){
            Pablo(previous).attr('opacity', 0.2);
            Pablo(current).attr('opacity', 1);
        }, {t:100});

    /* Some time later... */
    window.setTimeout(function(){
        /* Create a transition */
        rocket.transition({
            name: 'transform',
            dur: 1000,
            to: {translateX:'700px'}
        });
    }, 5000);
});

Learn Pablo

Browser support

Pablo and SVG is supported in all modern browsers, including Internet Explorer 9 and mobile web browsers. IE9 does not support some SVG features, like animation.

To test if a particular browser or device is supported by Pablo, run the test suite on the device. Read more about the test suite and detecting support at runtime.

Inspiration

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).

Contributing

Painting is just another way of keeping a diary.
Pablo Picasso