HighCharts Base64 cannot be decoded to convert to .png or .jpg image - highcharts

Question

I'm using the code below to generate a HighCharts graph and get the base64 code from the SVG image generated. I'm then using an engine like php and the base64_decode function to decode the Base64 and generate a .png or .jpg image from that.
The problem I'm having is that php complains that the Base64 code is invalid. When I try that with the Base64 code for any other random image, php accepts it and the .png or .jpg is created immediately.
I'm conveniced it's not the php code, but it's something to do with the Base64 code I'm getting from HighCharts. I've tried the same exercise using other tools instead of php like ColdFusion and the result was the same. The ones generated by HighCharts never worked but others did.
I would appreciate some guidance if anyone has an idea. You can run the snippet below to check the Base64 generated. Thanks.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<button id="add-image">Show base64 string for above chart</button>
<script type="text/javascript">
var chart = Highcharts.chart('container', {
series: [{
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
$("#add-image").click(function() {
var svg = $("#container").find('svg')[0],
svgData = new XMLSerializer().serializeToString(svg),
base64ImageValue = btoa(unescape(encodeURIComponent(svgData)));
document.getElementById('base64Container').innerHTML = base64ImageValue;
});
</script> <br><br>
<textarea id="base64Container" style="width:90%" rows="10"></textarea>