сломанное изображение, созданное с помощью highcharts svg

Question

Я пытаюсь сгенерировать изображение своих диаграмм с моего локального сервера (я установил на нем высокие диаграммы).

Ниже приведен код

var chart = Highcharts.charts[i];
                var render_width = chart.chartWidth;
                var render_height = chart.chartHeight;

                // Get the cart's SVG code
                var svg = chart.getSVG({
                    exporting: {
                        sourceWidth: chart.chartWidth,
                        sourceHeight: chart.chartHeight
                    }
                });

                // Create a canvas
                var canvas = document.createElement('canvas');
                canvas.height = render_height;
                canvas.width = render_width;
                document.body.appendChild(canvas);

                // Create an image and draw the SVG onto the canvas
                var image = new Image;
                image.onload = function() {
                    canvas.getContext('2d').drawImage(this, 0, 0, render_width, render_height);
                    console.log(image.src);
                    afterPlotExport(); 
                };
                image.src = 'data:image/svg+xml;base64,' + window.btoa(svg);
}

Когда я пытаюсьчтобы войти в функцию onload (), я ожидаю строку base64. Но генерируемая строка появляется как разорванное изображение, когда я копирую ее, вставляю в онлайн конвертер base64 в изображение.

Любая помощь будет оценена какпочему изображение выглядит испорченным?