CODEWITHSUNDEEP
xmlimagegithubsvgcontent-type
Praveen Kumar
Praveen Kumar

Reputation: 33

Image inside an svg tag is not rendering?

I have created an svg image. It includes an <image> tag, which takes in public url of an image. This svg renders perfectly inside the browser (Chrome and Firefox or any online SVG renderer), however when I use this svg in GitHub, the images are not rendered.

Following is the code:

<svg  width='20%' height='20%' viewBox="0 0 250 110" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" >
            <defs>
                <pattern id="image" x="0%" y="0%" height="100%" width="100%"
                        viewBox="'0' '0' '50%' '80%'">
                <image x="0%" y="0%" width="20%" height="50%" xlink:href="//userpic.codeforces.com/584918/avatar/6cd76f3a06f64685.jpg" preserveAspectRatio="xMidYMid slice"></image>
                </pattern>
            </defs>


            <rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF" stroke='cyan' stroke-width="7"></rect>

           
            <g>
<circle id="sd" class="medium" cx="85%" cy="55%" r="13%" fill="url(#image)" stroke='cyan' stroke-width="3" /></g>
</svg>

Is there a solution so that we can render the svg properly (with the image) on github-readme as well?

Upvotes: 0

Views: 217

Answers (1)

bk2204
bk2204

Reputation: 76509

You're not going to be able to render that SVG on GitHub as long as it contains a link to an external site. GitHub uses a header called Content-Security-Policy, which tells the browser which domains it's safe to load various types of assets, including images, from. The purpose of this header is to improve security by preventing potentially harmful or malicious content from being loaded from untrusted sites.

GitHub uses this header with a restriction on the sites images can be loaded from and proxies most images themselves. This significantly improves performance, but it also prevents unscrupulous repository owners from tracking users, which is undesirable for both users and GitHub.

The browser has been told that that domain is not trusted, so it won't load any data from that domain, no matter what. There isn't a way around this, and that's by design.

You can try to embed that JPEG as a data: URL, which may or may not work, but that would be the only way that you'd be able to embed another object in your SVG.

Upvotes: 2

Related Questions