Adding Illustrations

Illustrations function similarly to standard images but are handled separately by the Kittl SDK, enabling support for features like SVG-specific adjustments.

Adding an Illustration Directly

You can insert an illustration using kittl.design.illustration.addIllustration by pointing to its source URL.

const addResult = await kittl.design.illustration.addIllustration({
    src: 'https://example.com/vector-art.svg',
    size: {
        width: 200,
        height: 200
    },
    position: {
        absolute: {
            left: 150,
            top: 150,
        },
    },
});

if (addResult.isOk) {
    console.log('Illustration added:', addResult.result);
}

Illustrations via Upload

To handle user-uploaded vector files, use the upload API first, then pass the resulting object reference to addIllustration.

// 1. Upload the SVG blob
const uploadResult = await kittl.upload.image.upload({ blob: svgBlob });

if (uploadResult.isOk && uploadResult.result.length > 0) {
    const uploadedVector = uploadResult.result[0];

    // 2. Add as an illustration
    const addResult = await kittl.design.illustration.addIllustration({
        src: uploadedVector.objectName,
        size: {
            width: 500,
            height: 500
        },
        position: {
            absolute: {
                left: 0,
                top: 0,
            },
        },
    });

    if (addResult.isOk) {
        console.log('Uploaded illustration placed on board.');
    }
}