How to load a image in the artboard or root node when clicked

Adobe XD UXP Plugin API
1

I have a doubt about adding a image to the artboard. Eg: In the panel I have a image(Svg) , when I click that image(Svg) it should load to the artboard or root node. How this can be done. Or can I copy the image to the clipboard. I checked with clipboard API but I saw only one method to copy the text. If there is any method to copy image to clipboard kindly provide the answer

2

I think it is only possible set clipboard content to text. But there is a better way. If you open an XD document and manually drag an image file onto an artboard, it will create a Rectangle, then set the Fill property of that Rectangle to an ImageFill (supports PNG, JPEG, and GIF). If you drag an SVG file onto an artboard, XD will create a Path, then set the Path’s pathData to the contents of the SVG file. If the SVG contains multiple paths, then XD will create a Group of Paths. So to add an image to an artboard, create the desired type of GraphicNode, set its Fill or pathData to the image, then insert the node into the artboard using addChild(). To help illustrate, here is an example plugin that adds an SVG chart to an artboard:

2 Likes
3

Thank you, I will check with this

4

I checked with the Example plugin but i see only path which is created. I can understand the logic behind but Can you throw some more light on how to group a Svg image ( as the Svg containes many shapes For Eg: Group (1234) {
width: 795.39, height: 574.03
global X,Y: 8933, 2878
parent: Artboard (‘Web 1920 – 4’)
children: [Ellipse, Text, Rectangle, Path, Rectangle, Ellipse, Group, Path, Path]
}) From the above example of an SVG image we can know the following children’s by viewing but how to find and group them) . And about ImageFill ,i have the path of the of the image (but it requires file object) How to provide the file object without using getFileForOpening().

5

The ImageFill object needs either base-64 encoded image data or a reference to a file URI. If getFileForOpening() is not appropriate for your plugin, you can also reference a file in the plugin’s temporary or data folder. This example plugin may be helpful:

The plugin APIs have only limited support for SVGs. One idea that may be worth trying is to convert the SVG to base-64 encoded image data:
https://ourcodeworld.com/articles/read/1072/how-to-convert-a-html-svg-node-to-base64-with-javascript-in-the-browser

6

OK I will try with conversion but how to use serialize element (XMLSerializer) in xd? It through an error that XMLSerializer is not defined

1 Like
8

However, XMLSerializer and btoa is not supported in xd plugin