Images

When creating a content extension, one of the available options for the Content type field is Images. If you select this option, the extension can import image files, such as photos or illustrations, into Canva.
If you're looking for the API reference, see /content/resources/find.
Examples
These are some examples of apps with content extensions that support images:
​Brandfetch​
​Bynder​
​Pixton​
To find more examples, see canva.com/apps.
Supported image types
This section describes the types of images a content extension can import into Canva.
GIF
You can't import GIFs into Canva as images. You can only import them as embeds or videos.
JPG / JPEG
Under 25 MB in size
Not more than 100 million total pixels (width × height)
PNG
Under 25 MB in size
Not more than 100 million total pixels (width × height)
HEIC
Under 25 MB in size
Not more than 100 million total pixels (width × height)
SVG
Under 10 MB in size
Saved with an SVG Profile of "SVG 1.1"
The following elements are stripped from SVG images:
script
metadata
style
You must wrap SVG attribute values in double quotes, not single quotes. For example, version="1.0" is valid, while version='1.0' is not.
For additional requirements that apply to this content type, see Choose the best content types.
Additional considerations
Cross-Origin Resource Sharing (CORS) can interfere with the importing of images. To learn more, see CORS.
For guidelines on choosing the layout that’s most appropriate for your content type, see Choose the best layout.
Example
This example assumes the extension is configured to support images.
1
const axios = require("axios");
2
const express = require("express");
3
​
4
const app = express();
5
​
6
app.use(express.json());
7
app.use(express.static("public"));
8
​
9
app.post("/content/resources/find", async (request, response) => {
10
  // Get a list of images
11
  const { data } = await axios.get("https://picsum.photos/v2/list");
12
​
13
  // Create an array of resources
14
  const resources = data.map((resource) => {
15
    return {
16
      type: "IMAGE",
17
      id: resource.id, // This ID should always refer to the same piece of media
18
      name: resource.author || resource.id,
19
      thumbnail: {
20
        url: resource.download_url,
21
      },
22
      url: resource.download_url,
23
      contentType: "image/jpeg",
24
    };
25
  });
26
​
27
  // Respond with the resources
28
  response.send({
29
    type: "SUCCESS",
30
    resources,
31
  });
32
});
33
​
34
app.listen(process.env.PORT || 3000);
Copied!

Content types

Embeds

Last modified 19d ago

Copy link

Contents

Examples

Supported image types

Additional considerations

Example