<div>Hi,</div>
<div>&nbsp;</div>
<div>I have an SVG image that shows up a grey triangle at the end of a grey box where some titles will go.</div>
<div>&nbsp;</div>
<div>Basically I set a table width to 100% with 2 columns, one with no width specified and one with 2.5mm column-width, which will be where the triangle will go.</div>
<div>The height of the table has an initial value of 5mm (i.e. initially it should look 2.5mm by 5mm). However it may increase if the text inside wraps (probably close to 2.5mm by 9mm). In that case the image also needs to increase in height, but not in width. Since SVG is vector-based, the triangle should still look good, but obviously the angle would change.</div>

<div>&nbsp;</div>
<div>Here is the code I put inside the 2nd column:</div>
<div>&nbsp;</div>
<div>&lt;fo:block line-height=&quot;0pt&quot;&gt;&lt;fo:external-graphic content-width=&quot;scale-to-fit&quot; content-height=&quot;scale-to-fit&quot; scaling=&quot;non-uniform&quot; scaling-method=&quot;resample-any-method&quot;&gt;<br>
&lt;xsl:attribute name=&quot;src&quot;&gt;url(&#39;&lt;xsl:call-template name=&quot;imagesloc&quot; /&gt;triangle.svg&#39;)&lt;/xsl:attribute&gt;<br>&lt;/fo:external-graphic&gt;&lt;/fo:block&gt;</div>
<div>&nbsp;</div>
<div>I have also tried this (since the width is going to be constant):</div>
<div>&nbsp;</div>
<div>&lt;fo:block line-height=&quot;0pt&quot;&gt;&lt;fo:external-graphic content-width=&quot;2.5mm&quot; content-height=&quot;scale-to-fit&quot; scaling=&quot;non-uniform&quot; scaling-method=&quot;resample-any-method&quot;&gt;<br>
&lt;xsl:attribute name=&quot;src&quot;&gt;url(&#39;&lt;xsl:call-template name=&quot;imagesloc&quot; /&gt;triangle.svg&#39;)&lt;/xsl:attribute&gt;<br>&lt;/fo:external-graphic&gt;&lt;/fo:block&gt;</div>
<div>&nbsp;</div>
<div>My problem is that the SVG is showing at 100% of its width and height, in any scenario. It is refusing to scale to fit the area allocated to it.</div>
<div>&nbsp;</div>
<div>Any ideas please?</div>