ShapeRenderer picks PNG image from the wrong group shape

I have a word document with 2 group shapes. Both groups contains a PNG and a text label. The PNGs are diifferent.

When the shapes are converted into into SVGs using ShapeRenderer, the first SVG is correct but the second one is not. It has the PNG from the first group.

Here the is Java code fragment for the shape conversion

    public static String convertToSvg(ShapeBase shapeBase) {
        try {
            ShapeRenderer shapeRenderer = shapeBase.getShapeRenderer();

            ImageSaveOptions imageOptions = new ImageSaveOptions(SaveFormat.SVG);

            ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
            shapeRenderer.save(byteArrayOutputStream, imageOptions);

            return byteArrayOutputStream.toString();
        }
        catch (Exception e) {
            throw new RuntimeException(e);
        }
    }

Here is the word document.

adhoc.docx (51.2 KB)

Here the the HTML file generated from the word document. Please note that the file was not generated using Aspose HTML conversion API.

adhoc.7z (12.7 KB)

Here is a screenshot of the images in html, in case you don’t want to open the HTML file in the zip.
shapes.PNG (6.5 KB)

@fzeng2012 Unfortunately I cannot reproduce your issue with the latest Aspose.Words for Java 22.2 version. Here is the code I’m using and my output.

int i = 0;
Iterable<ShapeBase> shapes = doc.getChildNodes(NodeType.GROUP_SHAPE, true);
for (ShapeBase shape : shapes) {
    ImageSaveOptions options = new ImageSaveOptions(SaveFormat.SVG);
    String outFile = Paths.get(outputFolder, String.format("%d.svg", i++)).toString();
    shape.getShapeRenderer().save(outFile, options);
}

output.zip (15.0 KB)

If your are still facing this issue with the latest Aspose.Words version please share the full code you are using.

Thanks Konstantin.

You were right about the correctness of the SVG conversion.

I found the root cause based in your input. When the two SVG files are added to the same HTML file, because the same ID “image001” is used in both, it creates a conflict. So the question: is there a way to assign different IDs?

Here are the lines from one file. Please note the definition and the reference of image001

image id="image001" xlink:href="data:image/png;base64,iVBORw0.. base 64 content remove for clarify" width="139" height="139"

use xlink:href="#image001" width="124.27905" height="124.27905" transform="matrix(0.89409393,0,0,0.89409393,0,0)"

@fzeng2012 Unfortunately it is not possible to control the ID in SVG files generated by Aspose.Words. In your scenario the HTML producer should be responsible for the uniqueness of the IDs in inserted SVG.

Though I see a few workarounds for your case:

  1. You could perform a text search/replacement in the produced SVG output before inserting it into the resulting HTML file to replace the image IDs. It may be a replacement like <image id="image for <image id="_uniquePrefix_image" and <use xlink:href="#image for <use xlink:href="#_uniquePrefix_image.
  2. You could build up a new Document instance instead of building an HTML file. This instance could be saved then to HTML or SVG and Aspose.Words will guarantee the uniqueness of image IDs.

If the workarounds will not solve your issue we could consider adding an options to generate unique IDs in the output SVG. Please let us know if you interested in this feature and I will provide this request to our development team.

Thank you @Konstantin.Kornilov

The first option works for me. Another option for me is to manipulate the XML DOM from the SVG and replace the IDs with something unique. The second one is convenient for me because I need to parse the SVGs into DOMs before import them into a parent XML document.

Please add a feature request as it would be nice to have unique IDs for SVGs from the same document.

@fzeng2012 I have logged a feature request as WORDSNET-23550 in our defect tracking system. We will keep you informed and let you know once it is resolved.