Retrieve SVG inline code from SVG asset/resource though imported as binary


I have an SVG file I would like to load into a script, which puts it in the DOM. Works fine if I just use the asset file URL and include it as the source parameter of an <img> tag.

However, i’m trying to have hyperlinks in the SVG and they do not work when I do it this way. I would like to include the actual SVG code in my DOM tree. any way to retrieve that on the Asset level?

are SVG’s always imported as Binaries?

Hi @bjorn.syse,

So SVG isn’t an asset file type supported by any PlayCanvas component. Most likely that’s why the server reverts back to Binary.

Since an SVG is a text file format, one idea is to manually create an empty Text (.txt) file in the PlayCanvas editor, and copy/paste the SVG contents in it.

From there you could rename it to .svg and use it in a DOM element. If that doesn’t work, you could just grab the SVG contents and dynamically create the SVG through JS. There are plenty of stackoverflow posts on how to do that.

Hope that helps.

1 Like


I see, I did exactly that, added the code to a text asset and fed that into my JS code adding it as .innerHTML instead of the <img>-source. Worked like a charm! Thanks @Leonidas

1 Like