Converts the collection to a .svg file and returns the data URL that describes the contents of the file.

var shape = Pablo.circle({r:50});
alert(shape.dataUrl());

An .svg file must include a root <svg> element. If the collection does not contain a single <svg> element, its elements are cloned, appended to a new <svg> element and the <svg> element is cropped to fit the contents before the data URL is created.

Returns the data URL that describes the collection as a file of the specified type, which can be "svg" (the default), "png" or "jpeg". The data URL is passed to the callback function.

var shape = Pablo.circle({r:50});

shape.dataUrl('svg', function(dataUrl){
    alert(dataUrl);
});

shape.dataUrl('png', function(dataUrl){
    alert(dataUrl);
});

shape.dataUrl('jpeg', function(dataUrl){
    alert(dataUrl);
});

SVG data URLs

All modern browsers support SVG data URLs. To confirm, check that Pablo.support.dataUrl === true.

if (Pablo.support.dataUrl){
    // get data URL
}
else {
    // fallback
}

PNG and JPEG data URLs

Not all browsers support PNG and JPEG data URLs. To confirm, check Pablo.support.image.png() and Pablo.support.image.jpeg() - see Pablo.support. These are both functions that accept a callback, which is passed true or false. Chrome 32 and Firefox 24 are known to support all the data URL types.

Pablo.support.image.png(function(support){
    if (support){
        // get data URL
    }
    else {
        // fallback
    }
});

Pablo.support.image.jpeg(function(support){
    if (support){
        // get data URL
    }
    else {
        // fallback
    }
});

You can pass an SVG data URL directly to the Pablo() method to recreate the collection. For example, the data URL might have been previously saved in the browser’s local storage or on the server:

var shape = Pablo.circle({r:50}),
    dataUrl = shape.dataUrl();

// Later...
Pablo(dataUrl).appendTo(demoElement);