SVG Graph Issue in Outlook

Question

I've implemented SVGGraph in one of my Laravel project to send graph report to email.

Before starting the project I did some R&D and somehow came to know that email has issue rendering canvas . So I choose svg and came too far with my project. Its impossible for me to revert it now.

Mail body:

$graph = new SVGGraph(700, 300);
...
$graph->render('StackedBarAndLineGraph');

The above code generates a svg block inside mail body:

 <?xml version="1.0" encoding="utf-8"?><svg version="1.1" width="700" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="eC"><rect x="34" y="39.56" width="623" height="213.44"/></clipPath><symbol><g id="eD"><circle fill="red" r="3" cursor="crosshair"/></g></symbol></defs><rect width="100%" height="100%" fill="#fff" stroke-width="0px"/><text font-size="12px" font-family="Arial" font-weight="normal" text-anchor="middle" fill="black" x="350" y="20.92">Daily Transaction Bar of Grameenphone</text><g class="grid"><path d="M34 245.89h623M34 238.77h623M34 231.66h623M34 224.54h623M34 210.31h623M34 203.2h623M34 196.08h623M34 188.97h623M34 174.74h623M34 167.62h623M34 160.51h623M34 153.39h623M34 139.17h623M34 132.05h623M34 124.94h623M34 117.82h623M34 103.59h623M34 96.48h623M34 89.36h623M34 82.25h623M34 68.02h623M34 60.9h623M34 53.79h623M34 46.67h623" stroke="#fff"/><path d="M34 253h623M34 217.43h623M34 181.85h623M34 146.28h623M34 110.71h623M34 75.13h623M34 39.56h623M34 39.56v213.44M103.22 39.56v213.44M172.44 39.56v213.44M241.67 39.56v213.44M310.89 39.56v213.44M380.11 39.56v213.44M449.33 39.56v213.44M518.56 39.56v213.44M587.78 39.56v213.44M657 39.56v213.44" stroke="#fff"/></g><rect x="49" width="39.22" y="158.73" height="94.27" stroke="#000" stroke-width="1px" fill="#9BBB59" id="e2"/><rect x="49" width="39.22" y="93.63" height="65.1" stroke="#000" stroke-width="1px" fill="#222" id="e4"/><rect x="118.22" width="39.22" y="144.86" height="108.14" stroke="#000" stroke-width="1px" fill="#9BBB59" id="e6"/><rect x="118.22" width="39.22" y="52.72" height="92.13" stroke="#000" stroke-width="1px" fill="#222" id="e8"/><rect x="187.44" width="39.22" y="168.69" height="84.31" stroke="#000" stroke-width="1px" fill="#9BBB59" id="ea"/><rect x="187.44" width="39.22" y="113.55" height="55.14" stroke="#000" stroke-width="1px" fill="#222" id="ec"/><rect x="256.67" width="39.22" y="158.02" height="94.98" stroke="#000" stroke-width="1px" fill="#9BBB59" id="ee"/><rect x="256.67" width="39.22" y="99.68" height="58.34" stroke="#000" stroke-width="1px" fill="#222" id="eg"/><rect x="325.89" width="39.22" y="120.67" height="132.33" stroke="#000" stroke-width="1px" fill="#9BBB59" id="ei"/><rect x="325.89" width="39.22" y="59.48" height="61.19" stroke="#000" stroke-width="1px" fill="#222" id="ek"/><rect x="395.11" width="39.22" y="115.33" height="137.67" stroke="#000" stroke-width="1px" fill="#9BBB59" id="em"/><rect x="395.11" width="39.22" y="52.37" height="62.96" stroke="#000" stroke-width="1px" fill="#222" id="eo"/><rect x="464.33" width="39.22" y="155.53" height="97.47" stroke="#000" stroke-width="1px" fill="#9BBB59" id="eq"/><rect x="464.33" width="39.22" y="104.3" height="51.23" stroke="#000" stroke-width="1px" fill="#222" id="es"/><rect x="533.56" width="39.22" y="221.7" height="31.3" stroke="#000" stroke-width="1px" fill="#9BBB59" id="eu"/><rect x="533.56" width="39.22" y="210.31" height="11.38" stroke="#000" stroke-width="1px" fill="#222" id="ew"/><rect x="602.78" width="39.22" y="228.1" height="24.9" stroke="#000" stroke-width="1px" fill="#9BBB59" id="ey"/><rect x="602.78" width="39.22" y="217.78" height="10.32" stroke="#000" stroke-width="1px" fill="#222" id="eA"/><g clip-path="url(#eC)"><path fill="none" stroke="#000" stroke-width="2px" d="M68.61 104.48L137.83 89.36 207.06 86.69 276.28 106.26 345.5 45.79 414.72 58.24 483.94 50.23 553.17 212.09 622.39 211.2"/></g><path d="M34 256v-3M103.22 256v-3M172.44 256v-3M241.67 256v-3M310.89 256v-3M380.11 256v-3M449.33 256v-3M518.56 256v-3M587.78 256v-3M657 256v-3" stroke="#333" fill="none"/><path d="" stroke="#333" fill="none"/><path stroke="#333" d="M32 253h627" stroke-width="2px"/><g font-family="Arial" font-size="10px" fill="#333"><text x="68.61" y="267.1" text-anchor="middle">22-Aug</text><text x="137.83" y="267.1" text-anchor="middle">23-Aug</text><text x="207.06" y="267.1" text-anchor="middle">24-Aug</text><text x="276.28" y="267.1" text-anchor="middle">25-Aug</text><text x="345.5" y="267.1" text-anchor="middle">26-Aug</text><text x="414.72" y="267.1" text-anchor="middle">27-Aug</text><text x="483.94" y="267.1" text-anchor="middle">28-Aug</text><text x="553.17" y="267.1" text-anchor="middle">29-Aug</text><text x="622.39" y="267.1" text-anchor="middle">30-Aug</text></g><path d="M31 253h3M31 217.43h3M31 181.85h3M31 146.28h3M31 110.71h3M31 75.13h3M31 39.56h3" stroke="#333" fill="none"/><path d="M32 245.89h2M32 238.77h2M32 231.66h2M32 224.54h2M32 210.31h2M32 203.2h2M32 196.08h2M32 188.97h2M32 174.74h2M32 167.62h2M32 160.51h2M32 153.39h2M32 139.17h2M32 132.05h2M32 124.94h2M32 117.82h2M32 103.59h2M32 96.48h2M32 89.36h2M32 82.25h2M32 68.02h2M32 60.9h2M32 53.79h2M32 46.67h2" stroke="#333" fill="none"/><path stroke="#333" d="M34 37.56v217.44" stroke-width="2px"/><g font-family="Arial" font-size="10px" fill="#333"><text x="29" y="256.45" text-anchor="end">0</text><text x="29" y="220.88" text-anchor="end">1</text><text x="29" y="185.3" text-anchor="end">2</text><text x="29" y="149.73" text-anchor="end">3</text><text x="29" y="114.16" text-anchor="end">4</text><text x="29" y="78.58" text-anchor="end">5</text><text x="29" y="43.01" text-anchor="end">6</text></g><text text-anchor="middle" font-family="Arial" font-size="10px" fill="#000" x="15.24" y="146.28" transform="rotate(270 15.24 146.28)">Trx_count in Ten Thousand</text><path d="M657 253h3M657 226.32h3M657 199.64h3M657 172.96h3M657 146.28h3M657 119.6h3M657 92.92h3M657 66.24h3M657 39.56h3" stroke="#333" fill="none"/><path d="M657 247.66h2M657 242.33h2M657 236.99h2M657 231.66h2M657 220.98h2M657 215.65h2M657 210.31h2M657 204.98h2M657 194.3h2M657 188.97h2M657 183.63h2M657 178.3h2M657 167.62h2M657 162.29h2M657 156.95h2M657 151.62h2M657 140.94h2M657 135.61h2M657 130.27h2M657 124.94h2M657 114.26h2M657 108.93h2M657 103.59h2M657 98.26h2M657 87.58h2M657 82.25h2M657 76.91h2M657 71.58h2M657 60.9h2M657 55.57h2M657 50.23h2M657 44.9h2" stroke="#333" fill="none"/><path stroke="#333" d="M657 37.56v217.44" stroke-width="2px"/><g font-family="Arial" font-size="10px" fill="#333"><text x="662" y="256.45" text-anchor="start">0</text><text x="662" y="229.77" text-anchor="start">0.3</text><text x="662" y="203.09" text-anchor="start">0.6</text><text x="662" y="176.41" text-anchor="start">0.9</text><text x="662" y="149.73" text-anchor="start">1.2</text><text x="662" y="123.05" text-anchor="start">1.5</text><text x="662" y="96.37" text-anchor="start">1.8</text><text x="662" y="69.69" text-anchor="start">2.1</text><text x="662" y="43.01" text-anchor="start">2.4</text></g><text text-anchor="middle" font-family="Arial" font-size="10px" fill="#000" x="684.1" y="146.28" transform="rotate(90 684.1 146.28)">Other Channels &amp; EBL in Millions</text><use x="68.61" y="104.48" id="eF" xlink:href="#eD"></use><use x="137.83" y="89.36" id="eG" xlink:href="#eD"></use><use x="207.06" y="86.69" id="eH" xlink:href="#eD"></use><use x="276.28" y="106.26" id="eI" xlink:href="#eD"></use><use x="345.5" y="45.79" id="eJ" xlink:href="#eD"></use><use x="414.72" y="58.24" id="eK" xlink:href="#eD"></use><use x="483.94" y="50.23" id="eL" xlink:href="#eD"></use><use x="553.17" y="212.09" id="eM" xlink:href="#eD"></use><use x="622.39" y="211.2" id="eN" xlink:href="#eD"></use><g><g><text font-family="Arial" font-size="10px" fill="#222" y="209.32" x="68.61" text-anchor="middle">2.65</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="202.38" x="137.83" text-anchor="middle">3.04</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="214.3" x="207.06" text-anchor="middle">2.37</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="208.96" x="276.28" text-anchor="middle">2.67</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="190.28" x="345.5" text-anchor="middle">3.72</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="187.62" x="414.72" text-anchor="middle">3.87</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="207.71" x="483.94" text-anchor="middle">2.74</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="240.8" x="553.17" text-anchor="middle">0.88</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="244" x="622.39" text-anchor="middle">0.7</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="129.63" x="68.61" text-anchor="middle">1.83</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="102.24" x="137.83" text-anchor="middle">2.59</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="144.57" x="207.06" text-anchor="middle">1.55</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="132.3" x="276.28" text-anchor="middle">1.64</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="93.52" x="345.5" text-anchor="middle">1.72</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="87.3" x="414.72" text-anchor="middle">1.77</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="133.37" x="483.94" text-anchor="middle">1.44</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="219.45" x="553.17" text-anchor="middle">0.32</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="226.39" x="622.39" text-anchor="middle">0.29</text></g></g><g><g><text font-family="Arial" font-size="10px" fill="#222" y="97.78" x="68.61" text-anchor="middle">1.67</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="82.66" x="137.83" text-anchor="middle">1.84</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="79.99" x="207.06" text-anchor="middle">1.87</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="99.56" x="276.28" text-anchor="middle">1.65</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="39.09" x="345.5" text-anchor="middle">2.33</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="51.54" x="414.72" text-anchor="middle">2.19</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="43.53" x="483.94" text-anchor="middle">2.28</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="205.39" x="553.17" text-anchor="middle">0.46</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="204.5" x="622.39" text-anchor="middle">0.47</text></g></g><g font-family="Arial" font-size="10px" fill="black" transform="translate(371.95 278.7)" id="eO"><rect fill="#000" width="328.05" height="21.3" y="2.5" x="2.5" opacity="0.3"/><rect fill="#fff" width="328.05" height="21.3" stroke-width="1px" stroke="#fff"/><g transform="translate(5 0)"><rect x="0" y="5.65" width="10" height="10" style="fill:#9BBB59;stroke:#000;stroke-width:1px;"/></g><g transform="translate(116.02 0)"><rect x="0" y="5.65" width="10" height="10" style="fill:#222;stroke:#000;stroke-width:1px;"/></g><g transform="translate(227.03 0)"><path fill="none" stroke="#000" stroke-width="2px" d="M0 10.65l10 0"/><use x="5" y="10.65" xlink:href="#eD"></use></g><g transform="translate(20 0)"><text x="0" y="14.1">Other Channels</text></g><g transform="translate(131.02 0)"><text x="0" y="14.1">EBL - Visa/Master</text></g><g transform="translate(242.03 0)"><text x="0" y="14.1">Count</text></g></g></svg>

The above graph is working in Gmail but not in Outlook. How can I fix it? Any help even hint will be appreciable.

Answer 1

Well, I tried a way by which I was able to load svg graph.

$graph = new SVGGraph(700, 300);
...

$graph_src = '<?xml version="1.0" encoding="utf-8"?>';
$graph_src .= $graph->fetch('StackedBarAndLineGraph', false);

Storage::disk('public')->put('/path/to/dir/', 'graph.svg', $graph_src);
$src = Storage::disk('public')->url('/path/to/dir/graph.svg');

After getting the $src , I simply put that in img tag of the mail body. That worked fine.

But I noticed broken image in Outlook Software, so I had to base64_encode the image & It worked fine again.

I don't know whether it is the elegant way or not, but at least worked for me.