Load SVG in VCL TImage at Runtime

VCL TMS VCL UI Pack
1

Dear Support,

I am trying to load a SVG image in a VCL TImage at Runtime.
AdvType is added to the Uses list.
I call Image.Picture.LoadFromFile(mySvgFile); as explained on blog:

By default the Image is not visible. If I set proportionnal to True on TImage, I can see my image but very small. It seems my SVG is not scaled to the TImage size.

I did not find samples or documentation regarding this.

Am i doing something wrong ? Do you have samples?

Best regards

2

This means that the SVG file you are loading initially has a small view port size. You can turn on the stretch property to stretch the SVG file to match the size of the image.

3

View port : 100 * 100
TImage : 279 * 675

If I turn off "proportionnal" and "stretch": the image is not displayed (or too small ???)
If I turn on "proportionnal" on TImage: the image is displayed, small but! proportionnal.
If I turn on "stretch" on TImage: the image is displayed, small and deformed.

Here is the capture with "proportionnal"

SVG preview
SVG preview447×869 2.64 KB

I also attached the used svgPreview.zip (732 Bytes)

4

Note that I also use Center property. That s why the image is not at the top.

I have the same behaviour if i import the svg on Timage from designer

5

The viewport is 100x100 millimeter, not pixels. you can remove the viewport to fix the issue, we'll look into adding support for viewports in millimeters.

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="47" style="fill:#EAD0D8;stroke:#A04762;stroke-width:0.1" />
    <polygon points="45.451621,96.691636  38.569475,77.200320  54.548379,71.558364  61.430525,91.049680  45.451621,96.691636  " style="fill:white;stroke:#A04762;stroke-width:0.1" />
    <polygon points="47.891636,91.588076  43.673035,79.640336  52.108364,76.661924  56.326965,88.609664  47.891636,91.588076  " style="fill:#EAD0D8;stroke:#C9879C;stroke-width:0.1" />
    <polygon points="54.097069,81.408085  65.866751,67.595085  79.652931,79.341915  67.883249,93.154915  54.097069,81.408085  " style="fill:white;stroke:#A04762;stroke-width:0.1" />
    <polygon points="59.735965,80.957700  66.317136,73.233981  74.014035,79.792300  67.432864,87.516019  59.735965,80.957700  " style="fill:#C9879C;stroke:#C9879C;stroke-width:0.1" />
</svg>
6

In this case, how the size is determined ? Because by removing the view port, I can see my image bigger but it still does not fill the Timage width.

Is there a way to force the size from code ?

7

the size is determined by the contents in pixels. you could also specify your own viewport size, but not in millimeters.