I am trying to determine what the capabilities are for creating shapes within a PowerPoint slide using the Node SDK.
I have an SVG file to work with, although it does not seem possible to directly convert an SVG to a PPTX file while still maintaining the individual shape information. The only workflow I have seen mentioned is to go from SVG -> PDF -> PPTX, which technically works, although the resulting PDF contains only images of the shapes from the original SVG, not the shapes themselves. If there is a method for directly converting an SVG to PPTX while still maintaining the individual shape content, that would solve my issue.
If not, I have also been exploring manually creating a Presentation and populating its slides with each individual shape defined in the SVG, although the available shape creation methods appear limited, and the documentation only goes over simple examples. I can say that I am able to successfully generate simple shapes on presentation slides, but I have not found a way to generate a custom path, or even a way to specify which direction a line moves in. As an example, say I want to use two lines to create an “X” shape. From what I can tell, each of those two lines seems to expose the exact same information using the Node SDK. I can set the x/y (left/upper) values of the bounding box, and define a width and height. However, that is not enough information to determine if the line moves from the top-left to the bottom-right OR the bottom-left to the top-right of that bounding box. If I cannot draw custom paths or even specifiy line details, then I will not be able to manually convert SVG files to PPTX either.
Any information on either of my overall approaches would be very helpful. I have already spent hours looking over documentation and even the Node.js code itself to no avail.
@jessewilliams,
Thank you for describing the issue. We will improve our documentation.
To add an SVG image to a presentation, you should prepare a DTO for a picture frame and add the shape to a slide. The following code example shows you how to do this:
const cloud = require("asposeslidescloud")
const fs = require("fs")
const slidesApi = new cloud.SlidesApi("my_client_id", "my_client_secret")
const pptFileName = "MyPresentation.pptx" // A presentation saved to the default storage.
const slideIndex = 1
const imageFileName = "image.svg"
// Prepare the DTO for a picture frame.
const pictureFrame = new cloud.PictureFrame()
pictureFrame.pictureFillFormat = new cloud.PictureFill()
pictureFrame.pictureFillFormat.svgData = fs.readFileSync(imageFileName, "utf-8")
pictureFrame.x = 20
pictureFrame.y = 20
pictureFrame.width = 300
pictureFrame.height = 200
// Add the image to the slide.
slidesApi.createShape(pptFileName, slideIndex, pictureFrame).then((shapeInfo) => {
console.log(shapeInfo)
}).catch(function (e) {
console.error(e.message)
})
API Reference: CreateShape
If this usual way does not work for you, please share an SVG file and the expected presentation file.
svgPptxFiles.zip (164.5 KB)
Using your suggested workflow, the PPTX is created from an SVG, but still the resulting file contains only a single image of all the shapes, not individual shape objects.
I do not have an exact file to represent my expected presentation (since I have not found a way to convert them yet), but attached are close approximations. The source.svg file is what I start with. oneShape.pptx is the file that is created by running the steps from your suggested pictureFrame approach, and manyShapes.pptx is a manual approximation of the desired output.
As you can see when you open the .pptx files, oneShape.pptx contains only a single combined image of the shapes from the SVG file. You cannot actually make edits to any individual shapes within the file. However, the manyShapes.pptx file contains individual shapes, one for each from the SVG file. You can make edits to the shapes within the file, i.e. adjust thickness, border color, fill color, etc.
@jessewilliams,
Thank you for the additional information. We will reply to you as soon as possible.
@jessewilliams,
I have reviewed your requirements. This is a very interesting feature, but it requires parsing the SVG content. Perhaps Aspose.Imaging can help with this. I’ve added a ticket with ID SLIDESCLOUD-1525 to our issue tracking system. Our development team will consider implementing such a feature. You will be notified if the feature is implemented.
Thanks for the update. Obviously if there was a feature that did the conversion from SVG to PPTX in a single API call that would be ideal.
However, I’m able to parse the SVG content already, so I can also build the slide shapes manually (provided the API supports creation of complex shapes). Where I’m struggling is what request data needs to be sent to the Slides API in order to manually generate shapes? For example, how can I define the start/end points of a line? Or how can I define multiple points along a custom path?
@jessewilliams,
Unfortunately, I was also unable to do this. I’ve added a ticket with ID SLIDESCLOUD-1528 to our issue tracking system. Our developers will review your requirements. We will inform you of any progress.
The issues you have found earlier (filed as SLIDESCLOUD-1525) have been fixed in Aspose.Slides Cloud 22.8. You can check all fixes on the Release Notes page.
@jessewilliams,
To add individual shapes from an SVG file to a presentation, please try using ImportImagesFromSvg method with Aspose.Slides Cloud 22.8.
Documents: Import Shapes From SVG
@Andrey_Potapov
Thanks, this is a huge improvement. There are still a few minor issues with the stroke width importing incorrectly, but everything else looks good.
As an example of the stroke width issue, the attached SVG has a circle of stroke width 4, but it seems to import around 16 in the resulting pptx file.
svgFile.zip (3.4 KB)
@jessewilliams,
Thank you for the sample SVG file. We will reply to you as soon as possible.
@jessewilliams,
Thank you for reporting the issue. I’ve reproduced the problem with importing the shape from the SVG image and added a ticket with ID SLIDESCLOUD-1563 to our issue tracking system. We apologize for any inconvenience. Our development team will investigate the case. You will be notified when the issue is resolved.
The issues you have found earlier (filed as SLIDESCLOUD-1563) have been fixed in Aspose.Slides Cloud SDK 22.11.
You can check all fixes on the Release Notes page.