Can svg blobs contain hrefs?

44 Views Asked by At

I am building a website that displays content from a server (text, images, html, pdf, etc..). As the client does not know ahead of time what the content type is, it downloads the content, checks the content type, creates a blob url, and then renders it using the blob url in the src attribute. This saves having to download the content twice (once to check content type, another when the browser renders the content from src).

Some of the images are svg files that have hrefs to other files on the server. These hrefs do not work when the svg is src'ed by blob url. The hrefs work perfectly fine when src'ed by the normal url.

For example, if you had the following svg available at https://examplehost.com/sample.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image href="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" width="100%" height="100%"/>
</svg>

You could easily embed the svg on your webpage using the url in the src attribute

<img src="https://examplehost.com/sample.svg">

If, however, you convert the svg to a blob first

var response = await fetch("https://examplehost.com/sample.svg");
var blob = await response.blob();  
const blobUrl = URL.createObjectURL(blob);

The href embedded in the svg will not work

<img src="blobUrl_goes_here">

JSFiddle here

Is it possible to have hrefs in blob svgs?

0

There are 0 best solutions below