Search code examples
javascripthtmlimagesvg

Access SVG data from URL returned in fetch API call

I'm using an API call to return an SVG but the request is returned as url of the SVG, I need to edit the SVG colors but cannot access the SVG inline data. This url will be different with each request

This is an example URL of the SVG returned from fetch.

url: "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=test&format=svg"

Is there any way to directly access the data within the SVG e.g paths ? Or can i create a copy of the SVG and convert it into an inline SVG?

I have seen some suggestions that are in jquery but would like to use vanilla javascript or react library.

Solution

  • you can temporarily put it in a div for example then you can access HTMLElement prototype

    fetch('https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=test&format=svg')
.then(res => res.text())
.then(res => {
    const holder = document.createElement('div')
    holder.innerHTML = res
    console.log(holder.querySelector('path'))
})