51
Views
5
Comments
Solved
[Ultimate PDF] Usage of SVG Image Format
ultimate-pdf
Reactive icon
Forge asset by Leonardo Fernandes
Application Type
Reactive

Hi Guys,

I was trying to use an SVG image inside the PDF page used to generate the PDF but, every time the PDF is generated the image is not displayed.

I am using the image widget, fetching the image directly from the database.

Is this a limitation from the component?

The reason i want to use SVG is that it doesn't loose quality when upscaled.

Cheers,

Pedro Domingues

2019-07-08 11-04-35
Leonardo Fernandes
 
MVP
Solution


I don't know about that scenario. Fetching from the database means that the image is created using a base64 data-uri, and that format requires the content-type to be correctly set. Maybe OutSystems is not setting up the correct content-type for SVGs.

Does it work when you preview it in the browser?

If the problem is the content-type as I imagine, you could use an external image (instead of binary data), and in the URL use something like "data:image/svg+xml;base64," + BinaryToBase64(ImageBinary). You will need to define a BinaryToBase64 client-side function, but that can easily be done using javascript.

2019-07-08 11-04-35
Leonardo Fernandes
 
MVP

Hi Pedro.

Yes, SVGs are supported by Ultimate PDF. The demo application includes a ResumePDF which uses an SVG as a decorative background element. This is the image that is used:

And this is how it's being used in the screen:


You might want to see in Service Center if you have any Content Security Policy errors that might be blocking the image.

2026-03-23 09-58-51
Pedro Domingues
Champion

Thanks for the prompt answer Leonardo.

I saw that you are using a local resource but my case is different. I am using an Image from database and the PDF is generated with the icon of broken image.

Do you know if it works fetching the image from database as well? I don't see any reason to not work but just in case...

2026-03-23 09-58-51
Pedro Domingues
Champion

Hi again Leonardo,

If i am using a local image, as in the example provided, i am able to get the SVG image working as expected.

But, as i stated, i am fetching the image from the database. Whilst for other image formats it works, for SVG i end up having the image like this:

Have you tested with this scenario before?

Cheers,

Pedro Domingues

2019-07-08 11-04-35
Leonardo Fernandes
 
MVP
Solution


I don't know about that scenario. Fetching from the database means that the image is created using a base64 data-uri, and that format requires the content-type to be correctly set. Maybe OutSystems is not setting up the correct content-type for SVGs.

Does it work when you preview it in the browser?

If the problem is the content-type as I imagine, you could use an external image (instead of binary data), and in the URL use something like "data:image/svg+xml;base64," + BinaryToBase64(ImageBinary). You will need to define a BinaryToBase64 client-side function, but that can easily be done using javascript.

2026-03-23 09-58-51
Pedro Domingues
Champion

Hi Leonardo,

Your workaround worked like a charm!

Thanks a lot for your help.

Cheers,

Pedro Domingues

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.