Returns a new, empty Pablo collection.

var collection = Pablo();
alert(collection.length);

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

var collection = Pablo();

collection.push(Pablo.circle());
alert(collection.length);

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'});

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
Pablo('#foo');

// Multiple elements, specified by class
Pablo('.bar');

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

// Complex selectors
Pablo('#thing g.foo > 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.

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

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

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

Converts SVG markup into a collection of elements.

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

Pablo(demoElement)
    .svg()
    .append(shapes)
    .crop();

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

See also the collection method, markup().

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

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

Pablo(dataUrl).appendTo(demoElement);

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

See also the collection method, dataUrl().