Is there any way for conversion of SVG to PNG/JPG Format

Adobe XD UXP Plugin API
1

Hi,

Is there any way to convert SVG to PNG/JPG .Is there any API available for the conversion? If not how it can be done in XD plugin. Can anyone Help me out

Thank you

2

Yes, the application.createRenditions() API can convert any SceneNode or group of nodes into a PNG, JPG, PDF, or SVG:

https://www.adobe.io/xd/uxp/develop/reference/application/#createrenditions

Here is an example plugin that creates a PNG from any node you have selected (including an SVG, which in an XD document is a group of paths) and displays it in the plugin’s panel:

3

Thanks @DavidXD.But it doesn’t support mine. My requirements are simple, just want to display a SVG from the file explorer to my plugin panel. Is there any other way

Thank you

4

I see. Yes, you can render an SVG image in a plugin’s panel using an HTML image element (most, but not all, SVG features are supported):

https://www.adobe.io/xd/uxp/uxp/reference-js/Global%20Members/HTML%20Elements/HTMLImageElement/

And you can set the “src” of an image to an SVG file. The simple way is to directly reference the SVG file in the panel’s HTML, such as:

<img src="myFile.svg"/>

However, in my testing it looks like the plugin will only read the SVG file from the plugin’s source folder. To allow the user to browse to any SVG file on the system, you can do the following.

// Browse to the SVG file
let fileImage = await lfs.getFileForOpening({ types: ["svg"] });
// Read the SVG contents
let imageBuffer = await fileImage.read({ format: storage.formats.utf8 });
// Create a new image element
let elemImage = document.createElement("img");
// Set the source of the image to the SVG data
elemImage.setAttribute("src", "data:image/svg+xml;charset=utf-8," + imageBuffer);
// Append the image element to the document
divImages.appendChild(elemImage);

I have attached an example plugin for your reference.

SVGPanel.zip (1.3 KB)

5

Thank you for your support @DavidXD .I used all such ways but cannot get the exact SVG image (The issue was posted in this forum How to use Svg in Xd plugin).For testing i will share the SVG (captcha.zip (2.9 KB))
.So searching for conversion of SVG to any other format (just for displaying the image ).

6

I understand your problem as XD’s SVG support in the plugin panel is not as complete as SVG in an XD document. The application.createRenditions() API will convert SVG in the document to an image, but it will not work with a file on disk.

7

so Sad @DavidXD . I see many method while searching on google like using canvas but it doesn’t work XD. That’s why i raised this in this forum . I thought someone would have done it earlier.

Thank you so much