SVG images stored in FNCBitmapContainer display correct in design-time but not in run-time

WEB TMS WEB Core
1

In the demo code attached I have a SVG image loaded into a FNCBitmapContainer and the FNCBitmapContainer is assigned to a FNCPageControl to provide the image to a page tab. During design-time the image is displayed correctly, but during run-time the image size is so big you only see a corner of it in the page tab and then as you resize the browser, the image size is also changed.
If I replace the SVG image in the FNCBitmapContainer with a PNG file, it works as expected.
How do I fix this behaviour?

Code.zip (55.1 KB)

2

This is because at designtime, VCL is used which has it's own SVG engine. It translates the SVGs into a set of graphic instructions. In TMS WEB Core, the SVG is as-is which means it just displays the SVG without parsing it and without scaling it. In this case, the SVG files need to have the correct size prior to adding them to the bitmapcontainer.

3

The explanation of the SVG engine makes sense, so I have added 3 different sizes of the SVG icon and assigned them to the page tabs. As the windows is resized the icons also sizes which not something that I expect (see attached video). How do I fix this behavior?
Video.zip (1.1 MB)

Code.zip (55.9 KB)

4

Hi,

The issue lies in the SVG, it automatically scales to 100%, please modify this line in the SVG:

<svg width="100%" height="100%"

to

<svg width="64" height="64"

for the 64 pixel one. You can re-use this image for the other sizes as well. There is no need to add multiple SVGs. The only thing to be aware of is that it should be a fixed size SVG.