How to reuse a SVG generated from highcharts as background - svg

Question

I am generating a grid, which is a SVG generated using highcharts and I want to reuse it as background of couple of pictures (<img src=https://xxx.xx.xxx.xx/pic_1.svg> & pic_2.svg) how to get this done?
I think might be possible to export the grid SVG to a file first then use it as a file. However, is there anyway simply save a Highchart.SVGRender or Highchart.SVGElement and use it, instead of exporting to a file, which I think will be slow I/O?
thank you.

Answer 1

You can parse a new string by concatenation of data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg">, generated SVG outerHTML value, and then setting yourimage.src by generated string. Here is how to achieve it 'step by step':
Create new SVG element using SVGRenderer from Highcharts:
var dot = chart.renderer.circle(10, 10, 10)
.attr({
fill: 'red',
zIndex: 99
})
.add()
Then, let's create new empty <img> element.
<img id="dot" src='' alt="">
And finally, set <img> src attribute by new generated value:
var svgString = dot.element.outerHTML
var dotImg = document.getElementById('dot')
var string = 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">'+svgString+'</svg>'
dotImg.src = string
Live example: https://jsfiddle.net/864s9cwz/