Проблема с графиком SVG в Outlook

Question

Я реализовал SVGGraph в одном из моих проектов Laravel для отправки графического отчета по электронной почте.

Перед запуском проекта я провел некоторые исследования и разработки и каким-то образом узнал, что у электронной почты есть проблемы с отображением. canvas. Поэтому я выбираюsvgи зашел слишком далеко с моим проектом. Сейчас я не могу вернуть его обратно.

Тело почты:

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

Приведенный выше код генерирует svg блок внутри тела письма:

<?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>

Приведенный выше график работает в Gmail, но не в Outlook. Как я могу это исправить? Любая помощь, даже подсказка, будет заметна.

Answer 1

Ну, я попробовал способ, которым удалось загрузить svg график.

$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');

После получения $src, Я просто вставил это в imgтег тела письма. Это сработало.

Но я заметил битое изображение в Outlook Программное обеспечение, поэтому мне пришлось base64_encode изображение & Он снова работал нормально.

Не знаю, элегантно это или нет, но, по крайней мере, у меня сработало.