Returns a new, empty Pablo collection.

var collection = Pablo();

Elements can be added to the empty collection with .push() and related methods.

var collection = Pablo();


Pablo(elements, [attributes])

Returns a new collection containing the element(s).

elements could be a DOM element, another collection, an array of elements, a DOM node list, jQuery collection or other array-like object.

If attributes are specified, they are set on each element.

var element = document.getElementById('foo'),
    collection = Pablo(element, {fill:'red'});

Pablo(selectors, [context])

Returns a collection of elements that match the specified CSS selectors, or comma-separated list of selectors.

By default, this searches the global document, but an optional context element or elements can be passed.

// A single element, specified by id

// Multiple elements, specified by class

// Multiple selectors
Pablo('circle, line, #foo, .bar');

// Complex selectors
Pablo('#thing > circle[data-foo=bar]:first-child')

Both SVG and HTML elements can be targeted. Pablo uses the browser’s native selector engine (Element.querySelectorAll), so can accept any selector that the browser understands.

If a context is given, then only elements that are descendents of the context will be returned. The context can be an element, DOM list, array or collection.

Pablo('.hexagon', myShapes);

This is equivalent to Pablo(myShapes).find('.hexagon') - see the find() method.

Pablo(elementName, attributes)

Creates a named element with the specified attributes, and returns it in a collection.

Attributes are given as properties and values of a JavaScript object.

Pablo('rect', {width:50, height:50});

To create an element this way, the attributes object is required, even if it is empty. If the attributes argument is missing - in this example, giving Pablo('rect') - then Pablo will treat it as a selection and would return all existing <rect> elements in the document.

All the different types of SVG element can be created in this way, although they are more typically created by using an element method - e.g. Pablo.rect({width:50, height:50}).

Creating HTML

It is not possible to create HTML elements with this method. To achieve that, use Pablo(document.createElement('div')) or similar. (HTML creation may be supported in future).

Pablo(elementNames, [attributes])

Creates multiple named elements and returns them in a collection. The attributes are optional.

Pablo(['rect', 'line', 'line'], {stroke:'black'});

Pablo(markup, [attributes])

Converts SVG markup into a collection of elements.

var markup = '<circle cx="50" cy="50" r="50"/>',
    shapes = Pablo(markup);


If attributes are specified, they are set on each element.

See also the collection method, markup().

Pablo(dataUrl, [attributes])

Converts a data URL for an SVG file into a collection of elements.

var dataUrl = 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSItNTAgLTUwIDEwMCAxMDAiPjxjaXJjbGUgcj0iNTAiPjwvY2lyY2xlPjwvc3ZnPg==';


If attributes are specified, they are applied to the collection.

See also the collection method, dataUrl().

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