ChartDirector Support - View Thread 1655473687

ChartDirector Support

Forum Home

Search

Message List Post Message

[Jun-17-2022 21:48] SVG (sean laks)
- [Jun-18-2022 03:20] Re: SVG (Peter Kwan)
  - [Jun-18-2022 04:26] Re: SVG (sean laks)
    - [Jun-18-2022 05:09] Re: SVG (sean laks)
  - [Jun-18-2022 18:26] Re: SVG (sean laks)
    - [Jun-30-2022 00:27] Re: SVG (sean laks)
    - [Jun-30-2022 02:19] Re: SVG (sean laks)
      - [Jun-30-2022 15:07] Re: SVG (Peter Kwan)

SVG

Posted by sean laks on Jun-17-2022 21:48

Hi Peter,

  I was able to leverage makechart2 to capture an SVG output. I then converted the byte array to a string, I made sure that I only took the data between <svg ....  svg> tags .
   I then put this SVG tag in a browser and the chart rendered perfect.

   When I use the same html file in iText7 pdfHTML converted, the output pdf does not have any color. Purely black and white; no loss of content

  I am able to render pdf's of other HTML files with complex SVG - So I can rule out the iText7 as the culprit here

  I suspect some tag or style or some reference within ChartDirector generated SVG is not being recognized

I have attached the converted PDF file and the input HTML to this post.

itext2.html

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg viewBox='0 0 600 320' width='600' height='320' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'><style>text,tspan {white-space:pre}</style><defs><linearGradient id='b41' x1='0.5' y1='0.5' x2='600.5' y2='0.5' spreadMethod='pad' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='#DDDDDD'/><stop offset='0.1875' stop-color='#EEEEEE'/><stop offset='0.5' stop-color='#F7F6F7'/><stop offset='0.8125' stop-color='#EEEEEE'/><stop offset='1.0' stop-color='#DDDDDD'/></linearGradient><radialGradient id='b43' cx='160' cy='175' r='110' spreadMethod='pad' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='#7F1919'/><stop offset='0.5' stop-color='#7F1919'/><stop offset='0.75' stop-color='#FF5B5C'/><stop offset='1.0' stop-color='#7F1919'/></radialGradient><radialGradient id='b45' cx='160' cy='175' r='110' spreadMethod='pad' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='#7F6619'/><stop offset='0.5' stop-color='#7F6619'/><stop offset='0.75' stop-color='#FFD65C'/><stop offset='1.0' stop-color='#7F6619'/></radialGradient><radialGradient id='b47' cx='160' cy='175' r='110' spreadMethod='pad' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='#197F19'/><stop offset='0.5' stop-color='#197F19'/><stop offset='0.75' stop-color='#5CFF5C'/><stop offset='1.0' stop-color='#197F19'/></radialGradient><radialGradient id='b49' cx='160' cy='175' r='110' spreadMethod='pad' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='#33337F'/><stop offset='0.5' stop-color='#33337F'/><stop offset='0.75' stop-color='#8584FF'/><stop offset='1.0' stop-color='#33337F'/></radialGradient><radialGradient id='b51' cx='160' cy='175' r='110' spreadMethod='pad' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='#4C7F7F'/><stop offset='0.5' stop-color='#4C7F7F'/><stop offset='0.75' stop-color='#AEFFFF'/><stop offset='1.0' stop-color='#4C7F7F'/></radialGradient><radialGradient id='b53' cx='160' cy='175' r='110' spreadMethod='pad' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='#7F7F00'/><stop offset='0.5' stop-color='#7F7F00'/><stop offset='0.75' stop-color='#FFFF33'/><stop offset='1.0' stop-color='#7F7F00'/></radialGradient><radialGradient id='b55' cx='160' cy='175' r='110' spreadMethod='pad' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='#7F337F'/><stop offset='0.5' stop-color='#7F337F'/><stop offset='0.75' stop-color='#FF84FF'/><stop offset='1.0' stop-color='#7F337F'/></radialGradient><linearGradient id='b130' x1='0.5' y1='1.5' x2='0.5' y2='20.5' spreadMethod='pad' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='#FFFFFF' stop-opacity='0.6235'/><stop offset='1.0' stop-color='#000000' stop-opacity='0.6235'/></linearGradient><linearGradient id='b131' x1='0.5' y1='318.5' x2='0.5' y2='299.5' spreadMethod='pad' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='#000000' stop-opacity='0.6235'/><stop offset='1.0' stop-color='#FFFFFF' stop-opacity='0.6235'/></linearGradient><linearGradient id='b141' x1='0.5' y1='2.5' x2='0.5' y2='20.5' spreadMethod='pad' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='#FFFFFF' stop-opacity='0.6235'/><stop offset='1.0' stop-color='#000000' stop-opacity='0.6235'/></linearGradient><linearGradient id='b142' x1='0.5' y1='317.5' x2='0.5' y2='299.5' spreadMethod='pad' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='#000000' stop-opacity='0.6235'/><stop offset='1.0' stop-color='#FFFFFF' stop-opacity='0.6235'/></linearGradient><clipPath id='b152'><path d='M0,300 L0,20 A20,20 0 0 1 20,0 L580,0 A20,20 0 0 1 600,20 L600,300 A20,20 0 0 1 580,320 L20,320 A20,20 0 0 1 0,300'/></clipPath></defs><g font-family='Arial' font-size='11px' fill='none' fill-rule='evenodd' stroke-linecap='square' stroke-miterlimit='1.42'><g clip-path='url(#b152)'><rect id='b42' x='0' y='0' width='600' height='320'/><use xlink:href='#b42' fill='url(#b41)'/><path id='b44' stroke-linecap='butt' d='M160.5,65.5 A110,110 0 0 1 258.456,125.453 L209.478,150.477 A55,55 0 0 0 160.5,120.5 L160.5,65.5 Z'/><use xlink:href='#b44' fill='url(#b43)' stroke='url(#b43)'/><path id='b46' stroke-linecap='butt' d='M50.56,171.876 A110,110 0 0 1 160.5,65.5 L160.5,120.5 A55,55 0 0 0 105.53,173.688 L50.56,171.876 Z'/><use xlink:href='#b46' fill='url(#b45)' stroke='url(#b45)'/><path id='b48' stroke-linecap='butt' d='M258.456,125.453 A110,110 0 0 1 264.966,209.951 L212.733,192.726 A55,55 0 0 0 209.478,150.477 L258.456,125.453 Z'/><use xlink:href='#b48' fill='url(#b47)' stroke='url(#b47)'/><path id='b50' stroke-linecap='butt' d='M264.966,209.951 A110,110 0 0 1 221.989,266.709 L191.244,221.105 A55,55 0 0 0 212.733,192.726 L264.966,209.951 Z'/><use xlink:href='#b50' fill='url(#b49)' stroke='url(#b49)'/><path id='b52' stroke-linecap='butt' d='M129.509,281.044 A110,110 0 0 1 50.56,171.876 L105.53,173.688 A55,55 0 0 0 145.005,228.272 L129.509,281.044 Z'/><use xlink:href='#b52' fill='url(#b51)' stroke='url(#b51)'/><path id='b54' stroke-linecap='butt' d='M221.989,266.709 A110,110 0 0 1 167.745,285.261 L164.122,230.381 A55,55 0 0 0 191.244,221.105 L221.989,266.709 Z'/><use xlink:href='#b54' fill='url(#b53)' stroke='url(#b53)'/><path id='b56' stroke-linecap='butt' d='M167.745,285.261 A110,110 0 0 1 129.509,281.044 L145.005,228.272 A55,55 0 0 0 164.122,230.381 L167.745,285.261 Z'/><use xlink:href='#b56' fill='url(#b55)' stroke='url(#b55)'/><line id='b57' x1='217.5' y1='81.5' x2='218.5' y2='80.5'/><use xlink:href='#b57' stroke='#000000'/><line id='b58' x1='218.5' y1='80.5' x2='285.5' y2='80.5'/><use xlink:href='#b58' stroke='#000000'/><line id='b59' x1='285.5' y1='80.5' x2='286.5' y2='80.5'/><use xlink:href='#b59' stroke='#000000'/><rect id='b60' x='286.5' y='73.5' width='13' height='14'/><use xlink:href='#b60' stroke='#444444'/><text id='b61' style="font-family:'Arial';font-size:13px;font-weight:bold;" x='290' y='85' textLength='7'>1</text><use xlink:href='#b61' fill='#000000'/><line id='b62' x1='270.5' y1='167.5' x2='271.5' y2='166.5'/><use xlink:href='#b62' stroke='#000000'/><line id='b63' x1='271.5' y1='166.5' x2='285.5' y2='166.5'/><use xlink:href='#b63' stroke='#000000'/><line id='b64' x1='285.5' y1='166.5' x2='286.5' y2='166.5'/><use xlink:href='#b64' stroke='#000000'/><rect id='b65' x='286.5' y='159.5' width='13' height='14'/><use xlink:href='#b65' stroke='#444444'/><text id='b66' style="font-family:'Arial';font-size:13px;font-weight:bold;" x='290' y='171' textLength='7'>2</text><use xlink:href='#b66' fill='#000000'/><line id='b67' x1='248.5' y1='241.5' x2='248.5' y2='242.5'/><use xlink:href='#b67' stroke='#000000'/><line id='b68' x1='248.5' y1='242.5' x2='285.5' y2='242.5'/><use xlink:href='#b68' stroke='#000000'/><line id='b69' x1='285.5' y1='242.5' x2='286.5' y2='242.5'/><use xlink:href='#b69' stroke='#000000'/><rect id='b70' x='286.5' y='235.5' width='13' height='14'/><use xlink:href='#b70' stroke='#444444'/><text id='b71' style="font-family:'Arial';font-size:13px;font-weight:bold;" x='290' y='247' textLength='7'>3</text><use xlink:href='#b71' fill='#000000'/><line id='b72' x1='196.5' y1='279.5' x2='196.5' y2='280.5'/><use xlink:href='#b72' stroke='#000000'/><line id='b73' x1='196.5' y1='280.5' x2='285.5' y2='280.5'/><use xlink:href='#b73' stroke='#000000'/><line id='b74' x1='285.5' y1='280.5' x2='286.5' y2='280.5'/><use xlink:href='#b74' stroke='#000000'/><rect id='b75' x='286.5' y='273.5' width='13' height='14'/><use xlink:href='#b75' stroke='#444444'/><text id='b76' style="font-family:'Arial';font-size:13px;font-weight:bold;" x='290' y='285' textLength='7'>4</text><use xlink:href='#b76' fill='#000000'/><line id='b77' x1='148.5' y1='284.5' x2='148.5' y2='285.5'/><use xlink:href='#b77' stroke='#000000'/><line id='b78' x1='148.5' y1='285.5' x2='34.5' y2='285.5'/><use xlink:href='#b78' stroke='#000000'/><line id='b79' x1='34.5' y1='285.5' x2='33.5' y2='285.5'/><use xlink:href='#b79' stroke='#000000'/><rect id='b80' x='20.5' y='278.5' width='13' height='14'/><use xlink:href='#b80' stroke='#444444'/><text id='b81' style="font-family:'Arial';font-size:13px;font-weight:bold;" x='24' y='290' textLength='7'>5</text><use xlink:href='#b81' fill='#000000'/><line id='b82' x1='71.5' y1='239.5' x2='70.5' y2='240.5'/><use xlink:href='#b82' stroke='#000000'/><line id='b83' x1='70.5' y1='240.5' x2='34.5' y2='240.5'/><use xlink:href='#b83' stroke='#000000'/><line id='b84' x1='34.5' y1='240.5' x2='33.5' y2='240.5'/><use xlink:href='#b84' stroke='#000000'/><rect id='b85' x='20.5' y='233.5' width='13' height='14'/><use xlink:href='#b85' stroke='#444444'/><text id='b86' style="font-family:'Arial';font-size:13px;font-weight:bold;" x='24' y='245' textLength='7'>6</text><use xlink:href='#b86' fill='#000000'/><line id='b87' x1='84.5' y1='96.5' x2='83.5' y2='95.5'/><use xlink:href='#b87' stroke='#000000'/><line id='b88' x1='83.5' y1='95.5' x2='34.5' y2='95.5'/><use xlink:href='#b88' stroke='#000000'/><line id='b89' x1='34.5' y1='95.5' x2='33.5' y2='95.5'/><use xlink:href='#b89' stroke='#000000'/><rect id='b90' x='20.5' y='88.5' width='13' height='14'/><use xlink:href='#b90' stroke='#444444'/><text id='b91' style="font-family:'Arial';font-size:13px;font-weight:bold;" x='24' y='100' textLength='7'>7</text><use xlink:href='#b91' fill='#000000'/><rect id='b92' x='330.5' y='88.5' width='239' height='173' rx='10'/><use xlink:href='#b92' stroke='#444444'/><rect id='b93' x='346.5' y='106.5' width='9' height='9'/><use xlink:href='#b93' fill='#FF3333' stroke='#000000'/><text id='b94' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='361' y='116' textLength='11'>1.</text><use xlink:href='#b94' fill='#000000'/><text id='b95' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='383' y='116' textLength='36'>Labor</text><use xlink:href='#b95' fill='#000000'/><text id='b96' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='511' y='116' textLength='32'>17.48</text><use xlink:href='#b96' fill='#000000'/><text id='b97' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='543' y='116' textLength='11'>%</text><use xlink:href='#b97' fill='#000000'/><rect id='b98' x='346.5' y='127.5' width='9' height='9'/><use xlink:href='#b98' fill='#33FF33' stroke='#000000'/><text id='b99' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='361' y='137' textLength='11'>2.</text><use xlink:href='#b99' fill='#000000'/><text id='b100' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='383' y='137' textLength='53'>Licenses</text><use xlink:href='#b100' fill='#000000'/><text id='b101' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='511' y='137' textLength='32'>12.59</text><use xlink:href='#b101' fill='#000000'/><text id='b102' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='543' y='137' textLength='11'>%</text><use xlink:href='#b102' fill='#000000'/><rect id='b103' x='346.5' y='148.5' width='9' height='9'/><use xlink:href='#b103' fill='#6666FF' stroke='#000000'/><text id='b104' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='361' y='158' textLength='11'>3.</text><use xlink:href='#b104' fill='#000000'/><text id='b105' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='383' y='158' textLength='35'>Taxes</text><use xlink:href='#b105' fill='#000000'/><text id='b106' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='511' y='158' textLength='32'>10.49</text><use xlink:href='#b106' fill='#000000'/><text id='b107' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='543' y='158' textLength='11'>%</text><use xlink:href='#b107' fill='#000000'/><rect id='b108' x='346.5' y='169.5' width='9' height='9'/><use xlink:href='#b108' fill='#FFFF00' stroke='#000000'/><text id='b109' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='361' y='179' textLength='11'>4.</text><use xlink:href='#b109' fill='#000000'/><text id='b110' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='383' y='179' textLength='34'>Legal</text><use xlink:href='#b110' fill='#000000'/><text id='b111' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='518' y='179' textLength='25'>8.39</text><use xlink:href='#b111' fill='#000000'/><text id='b112' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='543' y='179' textLength='11'>%</text><use xlink:href='#b112' fill='#000000'/><rect id='b113' x='346.5' y='190.5' width='9' height='9'/><use xlink:href='#b113' fill='#FF66FF' stroke='#000000'/><text id='b114' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='361' y='200' textLength='11'>5.</text><use xlink:href='#b114' fill='#000000'/><text id='b115' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='383' y='200' textLength='59'>Insurance</text><use xlink:href='#b115' fill='#000000'/><text id='b116' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='518' y='200' textLength='25'>5.59</text><use xlink:href='#b116' fill='#000000'/><text id='b117' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='543' y='200' textLength='11'>%</text><use xlink:href='#b117' fill='#000000'/><rect id='b118' x='346.5' y='211.5' width='9' height='9'/><use xlink:href='#b118' fill='#99FFFF' stroke='#000000'/><text id='b119' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='361' y='221' textLength='11'>6.</text><use xlink:href='#b119' fill='#000000'/><text id='b120' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='383' y='221' textLength='55'>Facilities</text><use xlink:href='#b120' fill='#000000'/><text id='b121' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='511' y='221' textLength='32'>20.98</text><use xlink:href='#b121' fill='#000000'/><text id='b122' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='543' y='221' textLength='11'>%</text><use xlink:href='#b122' fill='#000000'/><rect id='b123' x='346.5' y='232.5' width='9' height='9'/><use xlink:href='#b123' fill='#FFCC33' stroke='#000000'/><text id='b124' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='361' y='242' textLength='11'>7.</text><use xlink:href='#b124' fill='#000000'/><text id='b125' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='383' y='242' textLength='68'>Production</text><use xlink:href='#b125' fill='#000000'/><text id='b126' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='511' y='242' textLength='32'>24.48</text><use xlink:href='#b126' fill='#000000'/><text id='b127' style="font-family:'Arial';font-size:13px;font-style:italic;font-weight:bold;" x='543' y='242' textLength='11'>%</text><use xlink:href='#b127' fill='#000000'/><text id='b128' style="font-family:'Times New Roman';font-size:24px;font-style:italic;font-weight:bold;" x='161' y='30' textLength='278'>Donut Chart Demonstration</text><use xlink:href='#b128' fill='#000000'/><line id='b129' stroke-linecap='butt' x1='10' y1='44.5' x2='590' y2='44.5' stroke-width='2'/><use xlink:href='#b129' stroke='#000000'/><path id='b133' stroke-linecap='butt' d='M1.5,299.5 L1.5,20.5'/><use xlink:href='#b133' stroke='#FFFFFF' stroke-opacity='0.6235'/><path id='b134' stroke-linecap='butt' d='M1.5,20.5 A19,19 0 0 1 20.5,1.5'/><use xlink:href='#b134' stroke='#FFFFFF' stroke-opacity='0.6235'/><path id='b135' stroke-linecap='butt' d='M20.5,1.5 L579.5,1.5'/><use xlink:href='#b135' stroke='#FFFFFF' stroke-opacity='0.6235'/><path id='b136' stroke-linecap='butt' d='M579.5,1.5 A19,19 0 0 1 598.5,20.5'/><use xlink:href='#b136' stroke='url(#b130)'/><path id='b137' stroke-linecap='butt' d='M598.5,20.5 L598.5,299.5'/><use xlink:href='#b137' stroke='#000000' stroke-opacity='0.6235'/><path id='b138' stroke-linecap='butt' d='M598.5,299.5 A19,19 0 0 1 579.5,318.5'/><use xlink:href='#b138' stroke='#000000' stroke-opacity='0.6235'/><path id='b139' stroke-linecap='butt' d='M579.5,318.5 L20.5,318.5'/><use xlink:href='#b139' stroke='#000000' stroke-opacity='0.6235'/><path id='b140' stroke-linecap='butt' d='M20.5,318.5 A19,19 0 0 1 1.5,299.5'/><use xlink:href='#b140' stroke='url(#b131)'/><path id='b144' stroke-linecap='butt' d='M2.5,299.5 L2.5,20.5'/><use xlink:href='#b144' stroke='#FFFFFF' stroke-opacity='0.6235'/><path id='b145' stroke-linecap='butt' d='M2.5,20.5 A18,18 0 0 1 20.5,2.5'/><use xlink:href='#b145' stroke='#FFFFFF' stroke-opacity='0.6235'/><path id='b146' stroke-linecap='butt' d='M20.5,2.5 L579.5,2.5'/><use xlink:href='#b146' stroke='#FFFFFF' stroke-opacity='0.6235'/><path id='b147' stroke-linecap='butt' d='M579.5,2.5 A18,18 0 0 1 597.5,20.5'/><use xlink:href='#b147' stroke='url(#b141)'/><path id='b148' stroke-linecap='butt' d='M597.5,20.5 L597.5,299.5'/><use xlink:href='#b148' stroke='#000000' stroke-opacity='0.6235'/><path id='b149' stroke-linecap='butt' d='M597.5,299.5 A18,18 0 0 1 579.5,317.5'/><use xlink:href='#b149' stroke='#000000' stroke-opacity='0.6235'/><path id='b150' stroke-linecap='butt' d='M579.5,317.5 L20.5,317.5'/><use xlink:href='#b150' stroke='#000000' stroke-opacity='0.6235'/><path id='b151' stroke-linecap='butt' d='M20.5,317.5 A18,18 0 0 1 2.5,299.5'/><use xlink:href='#b151' stroke='url(#b142)'/></g><rect id='b153' x='0' y='311' width='600' height='9'/><use xlink:href='#b153' fill='#FFFF00'/><text id='b154' style="font-family:'Arial';font-size:9px;" x='184' y='318' textLength='232'>ChartDirector (unregistered) from www.advsofteng.com</text><use xlink:href='#b154' fill='#000000'/></g></svg>

 
</body>
</html>

Re: SVG

Posted by Peter Kwan on Jun-18-2022 03:20

Hi Sean Laks,

I have tried to view the HTML in Chrome, FireFox, Edge and Internet Explorer, and they all display the chart correctly. I have asked the browser to print to PDF, and the PDF is correct (see attached file generated by Chrome). I also tried an online HTML to PDF converter (https://html2pdf.com/), and it also generated the PDF correctly.

From experience, it is very hard to render SVG correctly. Many software will handle certain tag/attribute combinations incorrectly. The only softwares I know of that can reliably render SVG are the browsers.

For your current case, I notice that not only the color is incorrect, the font is incorrect too. I suspect the iText7 pdfHTML may handle the <use> tag incorrectly. Everything in the ChartDirector SVG are "defined" using SVG tags that represents visual elements (like <rect>, <text>, etc), and then applied with the <use> tag.

For testing, you can create an empty chart (just create a chart object and output it as SVG). It should output a simple SVG with the "unregistered" message. The message should have yellow background and use the Arial font. If the PDF is still abnormal when comparing to the browser output, and if you can access support for iText7 pdfHTML, you may send them this simple web page and ask them why the PDF is not the same as the browser output. They may know the cause of the problem.

If you can write SVG by hand, you can also try to modify the simple SVG until the iText7 pdfHTML can output it correctly. This can help to determine the cause of the issue.

I remembered one of our customers is simply using a browser programmatically to convert HTML to PDF. (You can write code to programmatically control a browser, so it can be used as a tool to convert HTML to PDF.) In this way, any HTML (including SVG) that can be viewed by the browser can be converted to PDF correctly. The disadvantage is that it cannot support advanced PDF features, like forms with input fields, digital signature, indexing, etc.

Best Regards
Peter Kwan

itext2.html.pdf
109.69 Kb

Re: SVG
Posted by sean laks on Jun-18-2022 04:26	\| Reply \| Monitor
Hi Peter I am blown away by your detailed response. Excellent debugging steps. I will give it a shot. Like you stated, it is trying to figure out the "offending tag" that iText7 does not like FYI - I do have the option of generating a png/JPEG and then embedding in HTML to convert to pdf - Hoping that will work as there are no tags to parse. Thx again for your amazingly fast sub 2 hr. response

Re: SVG

Posted by sean laks on Jun-18-2022 05:09

Hi Peter

  Not sure IF this is the output you suggested (I may have the chart object not the way you described) based on my code below:
**************************

import ChartDirector.*;

import java.io.File;
import java.io.*;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Paths;
import java.util.Base64;

public class Hello {
    public static void main(String[] args) throws IOException{

        PieChart c = new PieChart(50,50);

        byte[] byteArray  = c.makeChart2(5);
        String string = new String(byteArray);

        System.out.println(string);

    }
}
*******************************

Regardless, the SVG I got from above is:

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg viewBox='0 0 50 50' width='50' height='50' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'><style>text,tspan {white-space:pre}</style><g font-family='Arial' font-size='11px' fill='none' fill-rule='evenodd' stroke-linecap='square' stroke-miterlimit='1.42'><rect id='b3' x='0' y='0' width='50' height='50'/><use xlink:href='#b3' fill='#FFFFFF'/><rect id='b4' x='0' y='41' width='50' height='9'/><use xlink:href='#b4' fill='#FFFF00'/></g></svg>

</body>
</html>

you can heck this in a browser (just a yellow strip). I DONT see the yellow strip in PDF. Hence I am rasing a support ticket with iText7 unless you see some obvious issues.

Re: SVG

Posted by Peter Kwan on Jun-18-2022 13:06

Hi sean laks,

Yes, the code is what I suggest. If the chart is too small, ChartDirector will not draw the "unregistered" message due to insufficient space, but it will still draw the yellow strip.

The following is the SVG code that generates the yellow strip. The <rect ... /> tag defines the strip but does not draw it, and the <use ... /> tag applies the strip with yellow fill color:

<rect id='b4' x='0' y='41' width='50' height='9'/><use xlink:href='#b4' fill='#FFFF00'/>

The above should be equivalent to using the <rect ... /> to define and fill the strip at once:

<rect x='0' y='41' width='50' height='9' fill='#FFFF00'/>

What I suspect is that the iText7 pdfHTML ignores the <use> tag or handle it incorrectly. You can manually edit the SVG to combine the "rect + use" tags to just one rect tag as above. If this works with iText7 pdfHTML, we can confirm the <use> tag the issue.

ChartDirector uses the <use> tag because for some coloring effects, the same shape needs to be filled multiple times. With the <use> tag, we can define the shape once, and fill the colors multiple times with multiple <use> tags.

If you want to embed JPEG/PNG to PDF, you may want to generate it in high resolution by using bmpScale. See:

https://www.advsofteng.com/doc/cdjava.htm#BaseChart.setOutputOptions.htm

For example:

// Supported in ChartDirector 7
c.setOutputOptions("bmpScale=3");

Regards
Peter Kwan

Re: SVG

Posted by Sean Laks on Jun-18-2022 18:54

Hi Peter

What an awesome debugging! I edited SVG to remove <use> and the YELLOW strip appeared on pdf as you predicted.

Case closed - iTExt7 has an issue with this tag.

Sidebar question: Is the <use> tag not commonly used and hence iText7 does not support that? Not sure how common is this tag or is this some kind of a custom tag.. Given all browsers and other PDF converters recognize this, I presume this should be mainstream

I have raised a support ticket with iText7. Thx again for your excellent support

Re: SVG

Posted by Peter Kwan on Jun-18-2022 20:01

Hi Sean,

The <use> tag can be applied to any tag, but it is most commonly used with the <symbol> tag to draw a symbol multiple times with different parameters. For example, in a scatter chart, the same scatter symbol may appear hundred of times at different positions, colors, size, etc.. See:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol

I found an article in the itextpdf web site that mentions it supports the use and symbol tags with pdfHTML 3.0.2 (released Oct 2020).

https://kb.itextpdf.com/home/it7kb/examples/support-for-a-symbol-element-in-svg

May be pdfHTML only supports the <use> tag with the <symbol> tag but not other tags.

Best Regards
Peter Kwan

Re: SVG
Posted by sean laks on Jun-18-2022 18:26	\| Reply \| Monitor
Hi Peter I am blown away by your detailed response. Excellent debugging steps. I will give it a shot. Like you stated, it is trying to figure out the "offending tag" that iText7 does not like FYI - I do have the option of generating a png/JPEG and then embedding in HTML to convert to pdf - Hoping that will work as there are no tags to parse. Thx again for your amazingly fast sub 2 hr. response

Re: SVG

Posted by sean laks on Jun-30-2022 00:27

Hi Peter

  I just a response from iText7 tech support. They said they DON't support <Radial Gradient> tag. Changing that (manually for debugging) to <Linear Gradient> did not fix the issue.

  Not being informed, are the <USE> tag and the the 2 Gradient tags somewhat related?

  Either ways, lack of support for the <Radial Gradient> tag might be a clear deal breaker for me.

  Thx for you support.

Re: SVG

Posted by sean laks on Jun-30-2022 02:19

Re: SVG

Posted by Peter Kwan on Jun-30-2022 15:07

Hi Sean,

In your previous test, even an empty chart with just the "unregistered message" in a yellow box will not work. So the issue should be related to the <use> tag. You may send the text in yellow box SVG to them to illustrate the problem, and see it can be solved.

If they can support the <use> tag correctly, but not the <radialgradient>, you may consider to color the ring in another way to avoid using the radial gradient.

Best Regards
Peter Kwan