SVG Shape with PNG Image Is Not Displayed in React after Sanitization in C#

Aspose.Slides Product Family
, ,
1

Dear Aspose,
We have a problem with Aspose generated Svg containing Png image the way how it is done for this particular case.
The problem is that we use React on FE to display html, that has to pass sanitization.

DOMPurify.sanitize(complexHtml)

Unfortunately after this step image is not displayed.

For other images we do not have the problem - this is example of SVG with PNG that works after sanitization:
SvgWithPngThatWorksAfterSanitization.html

What Aspose does for this SVG instead of using image directly,
It defines symbol that contains the image
It defines the pattern that uses the symbol
It defines rectangle that uses the pattern

Also attaching sample application demonstrating the problem:
Bug-1294919-PPT-HiddenPresentationTable.zip (282.3 KB)

Thanks for looking.
PS: Also including results made by latest tool Aspose.Slide-25.4 on Windows.

Best Regards
Pavel

2

@ottap,
Thank you for describing the issue. We are sorry that you encountered this problem. I need some time to check the issue. I will get back to you as soon as possible.

3

@ottap,
Thank you for your patience. Unfortunately, I was unable to reproduce the problem you described. I followed the instructions below.

1. Create a working folder

mkdir test-app
cd  test-app

2. Add your component

Rename the file to ReactScript.jsx (JSX requires the .jsx extension) and place it in this folder.

3. Write a Dockerfile

FROM node:20-alpine AS build
WORKDIR /app

RUN npm create vite@latest my-app -- --template react

COPY ReactScript.jsx /app/my-app/src/ReactScript.jsx

RUN printf "import React from 'react';\n\
import ReactDOM from 'react-dom/client';\n\
import { MyImg2 } from './ReactScript.jsx';\n\
ReactDOM.createRoot(document.getElementById('root')).render(<MyImg2 />);\n" \
> /app/my-app/src/main.jsx

WORKDIR /app/my-app
RUN npm install \
 && npm install dompurify \
 && npm run build

FROM nginx:alpine
COPY --from=build /app/my-app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

4. Build the image

docker build -t svg-react .

5. Run the container

docker run -d -p 80:80 --name svg-app svg-react

6. Open the app

Visit http://localhost. The page should show the line “This is svg generated by Aspose 25.4” and your embedded SVG image.

The result: result.png (38.2 KB)

Please check the issue carefully again. If the issue persists, please share more details on how to reproduce it.