I'm trying to fetch a SVG image from a link. When fetching a svg image from https://www.coingecko.com/coins/976/sparkline it works perfectly, the svg image gets dsplayed. When I'm trying to fetch it from https://www.coinparticle.com/sparkline/bitcoin it doesn't display.
I think this has something to do with certain tags used in the HTML code.
<html>
<head></head>
<body></body>
</html>
How can I adjust the code on coinparticle to fetch the svg image (I have access to the coinparticle server)?
1
<img class="1" src="https://www.coingecko.com/coins/7598/sparkline">
2
<img class="2" src="https://www.coinparticle.com/sparkline/bitcoin">Code on coinparticle:
<html></html>
<script>
const height = 50; //the number of pixels high the chart is to be
const points = [[1631264425426,46187.88927989531],[1631268120084,46346.477413458255],[1631271810755,46460.52411265284],[1631275266134,46472.58450929567]]
const len = points.length;
let minx = points[0][0]
let maxx = points[0][0];
let miny = points[0][1];
let maxy = points[0][1];
points.forEach( (point) => {
minx = (point[0] < minx) ? point[0] : minx;
maxx = (point[0] > maxx) ? point[0] : maxx;
miny = (point[1] < miny) ? point[1] : miny;
maxy = (point[1] > maxy) ? point[1] : maxy;
} );
function setup() {
const width = 135;
let svg = '<svg width="' + width + '" height="' + (height+4) + '" viewBox="0 0 135 54"' + '"xmlns="http://www.w3.org/2000/svg"' + '"xmlns:xlink="http://www.w3.org/1999/xlink"' + '><polyline points="';
points.forEach( (point) => {
svg = svg + ((point[0] - minx) / (maxx - minx)) * width + ',' + (height - ((point[1] - miny) / (maxy - miny)) * height + 2) + ' ';
});
svg = svg + '" stroke-linejoin="round" style="fill: transparent; stroke:green; stroke-width:2" /></svg>';
document.body.insertAdjacentHTML('beforebegin', svg)
}
setup();
</script>
If you don't want to change your code on coinparticle, you could instead create a small iframe to load the content.
1
<img class="1" src="https://www.coingecko.com/coins/7598/sparkline">
2
<iframe src="https://www.coinparticle.com/sparkline/bitcoin" width="135" height="54" scrolling="no" style="border:0;overflow:hidden;"></iframe>