<![CDATA[Jsreport external svg file rendering issue.]]>We are evaluating jsreport to use it as a pdf report generating tool in out project. However we are facing few hurdles. I've described the problem in detailed below.
Please let us know if there is a possible solution to this problem and wheather we are on the right track.

Problem Description:
I have a svg file that is mounted on AWS S3. I am trying to render the svg in my report using a <img> tag as follows:
<img src={{this.diagram.backgroundImageUrl}} alt="diagramImg"/>
'this.diagram.backgroundImageUrl' is a s3 link.
I've attached a screenshot of the result image rendered in the PDF. Also,attaching the actual image that needs to be rendered.
The svg file has image tags: for eg. <image width="60" height="60" xlink:href="assets/img/test.svg">. Inorder to match the test.svg file path I've mounted all the assets in my Project folder. The root folder structure looks like this -ProjectName/assets/img/test.svg.
I've added them as assets using following steps: new file->assets->select local file->upload.

We've experimented with few solutions to check wheather jsreport can render svgs from external resources like S3.
1]Download a svg from the internet, mount in the project folder and try rendering. This works fine.

2]Downloaded the svg file from s3. Added it to the project structure at the same level as the assets folder. We were trying to
figure out if the <image> tag within svg picks the file path from assets folder when saved locally. This did not work as expected. We have the same result as the problem description.2_1673507773185_jsreport playground screenshot.jpg 1_1673507773185_folder structure.jpg 0_1673507773184_actual image.jpg

]]>https://forum.jsreport.net/topic/2678/jsreport-external-svg-file-rendering-issueRSS for NodeMon, 07 Sep 2026 00:23:14 GMTThu, 12 Jan 2023 07:16:41 GMT60<![CDATA[Reply to Jsreport external svg file rendering issue. on Invalid Date]]>We are evaluating jsreport to use it as a pdf report generating tool in out project. However we are facing few hurdles. I've described the problem in detailed below.
Please let us know if there is a possible solution to this problem and wheather we are on the right track.

Problem Description:
I have a svg file that is mounted on AWS S3. I am trying to render the svg in my report using a <img> tag as follows:
<img src={{this.diagram.backgroundImageUrl}} alt="diagramImg"/>
'this.diagram.backgroundImageUrl' is a s3 link.
I've attached a screenshot of the result image rendered in the PDF. Also,attaching the actual image that needs to be rendered.
The svg file has image tags: for eg. <image width="60" height="60" xlink:href="assets/img/test.svg">. Inorder to match the test.svg file path I've mounted all the assets in my Project folder. The root folder structure looks like this -ProjectName/assets/img/test.svg.
I've added them as assets using following steps: new file->assets->select local file->upload.

We've experimented with few solutions to check wheather jsreport can render svgs from external resources like S3.
1]Download a svg from the internet, mount in the project folder and try rendering. This works fine.

2]Downloaded the svg file from s3. Added it to the project structure at the same level as the assets folder. We were trying to
figure out if the <image> tag within svg picks the file path from assets folder when saved locally. This did not work as expected. We have the same result as the problem description.2_1673507773185_jsreport playground screenshot.jpg 1_1673507773185_folder structure.jpg 0_1673507773184_actual image.jpg

]]>https://forum.jsreport.net/post/11595https://forum.jsreport.net/post/11595Invalid Date<![CDATA[Reply to Jsreport external svg file rendering issue. on Invalid Date]]>You can see here there should be no problem in rendering external svg.
https://playground.jsreport.net/w/anon/p9HO7zN_

The image rendering is chrome's responsibility. jsreport doesn't tweak this. If you can see the image properly with html recipe in the browser, it should work also in chrome-pdf.

Is it a public s3 url? Can you share it?

]]>https://forum.jsreport.net/post/11596https://forum.jsreport.net/post/11596Invalid Date<![CDATA[Reply to Jsreport external svg file rendering issue. on Invalid Date]]>The s3 url-
https://s3.amazonaws.com/avdesign-staging-mobiuso/4bf503ec-65eb-4371-972f-17c3c0d647be/d9d9fcf9-2f72-4b28-9834-7404fb8bf0a2/5c3fef45-de9c-45d9-a897-a51953de948a/64caa655-f0d5-4b70-8947-158ebdea2a17/84f22a3f-a0b4-48b8-9c65-156449b68393.svg

]]>https://forum.jsreport.net/post/11598https://forum.jsreport.net/post/11598Invalid Date<![CDATA[Reply to Jsreport external svg file rendering issue. on Invalid Date]]>Try this html

<img src='https://s3.amazonaws.com/avdesign-staging-mobiuso/4bf503ec-65eb-4371-972f-17c3c0d647be/d9d9fcf9-2f72-4b28-9834-7404fb8bf0a2/5c3fef45-de9c-45d9-a897-a51953de948a/64caa655-f0d5-4b70-8947-158ebdea2a17/84f22a3f-a0b4-48b8-9c65-156449b68393.svg' />

It doesn't work in the browser as well therefore it can't work in jsreport.

The problem will be with paths inside the svg

<image x="0" y="0" width="750" height="1276" xlink:href="e3f1ec83-cd8a-422c-a644-0e7b73ff2c7d.jpeg"

This doesn't get resolved properly. I am not an expert in this. Maybe you need to set some base url for svg. Or convert svgs to pngs.

]]>https://forum.jsreport.net/post/11599https://forum.jsreport.net/post/11599Invalid Date