⚓Overview

Pablo is a high-performance JavaScript library for creating and manipulating SVG (scalable vector graphics). Its API is inspired by jQuery, Underscore and Raphaël. It targets modern desktop and mobile browsers, and is less than 5KB, with no dependencies.

Some example uses: interactive drawings, data visualisation, games, responsive graphics and rich visual interfaces.

Pablo is low-level, lightweight and expressive. It exposes a simple interface that gives access to all of SVG’s granularity and power, creating and manipulating collections of SVG elements. The library stays fast and lean by targetting the most recent desktop and mobile browsers, while failing gracefully elsewhere.

Pablo can create anything that SVG can. It simplifies the task of generating, modifying and interacting with the graphics, and connecting it to the other parts of a JavaScript program.

See the API Reference for Pablo’s extensive API.

⚓ Download

Star the project on GitHub, or download it:

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

⚓ Getting started

For production, download the minified script and call it from your HTML:

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

Check that the browser supports basic SVG:

if (Pablo.isSupported){
    /* Pablo code here */
    alert('Yes!');
}
else {
    /* Alternative content */
    alert("Noo");
}

Start drawing:

/* Inside an HTML element, append an <svg> root */
var paper = Pablo(demoElement).svg({height:220}),
    /* Create <circle> element, with attributes */
    circle = paper.circle({
        cy: '50%',
        fill: 'rgba(127, 159, 95, 0.2)',
        stroke: '#777'
    });

/* Duplicate the element */
circle.duplicate(20)
    /* Modify attributes */
    .attr({
        /* Attribute functions, called for each element */
        cx: function(el, i) {return i * 4 + 1 + '%'},
        r:  function(el, i) {return i + 1 + '%'}
    })
    /* Add a listener for mouseover & touchstart events */
    .on('mouseover touchstart', function(){
        /* Wrap this element in a Pablo collection */
        var circle = Pablo(this),
            /* Create a random position and colour */
            r = parseInt(circle.attr('r'), 10),
            xMax = 100 - r * 2,
            cx = xMax * Math.random() + r + '%',
            hue = Math.random() * 360,
            color = 'hsla(' + hue + ', 90%, 50%, 0.2)';

        / * Apply new attributes to the <circle> element */
        circle.attr({cx:cx, fill:color});
    });

In this documentation, all code snippets with ‘Run’ buttons are editable (except on mobiles).

See the API Reference for full details.

It’s early days, so your feedback is welcome. For bug reports and requests, please use the GitHub ‘Issues’ page or contact @premasagar.

Pull requests are welcome. To update the pages on pablojs.com, the Markdown files in the /docs folder should be changed.

testcard.js

⚓ Build Process

The build process handles code linting and minification. Grunt is Pablo’s build tool so node is required.

Installing grunt

$ npm uninstall -g grunt # for old grunt users
$ npm install -g grunt-cli

Building

$ git clone git@github.com:dharmafly/pablo.git
$ cd pablo/build
$ npm install
$ grunt

A copy of pablo.min.js will be saved in the build/dist directory.

In the future the build process may be used to create custom, module builds of Pablo.

⚓ Running Tests

Run the tests at pablojs.com/tests.

Or run them locally by checking out the repo, running grunt in the build folder and opening tests/index.html in the browser.