Question

我创建了一个svg图像。它包含一个标记，该标记接受图像的公共URL。该svg可以在浏览器（Chrome和Firefox或任何在线SVG渲染器）中完美呈现，但是当我在GitHub中使用此svg时，图像不会呈现。

以下是代码：

<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>

是否有解决方案，以便我们也可以在 github-readme 上正确渲染svg（带有图像）？

Answer 1

只要包含指向外部站点的链接，您就无法在GitHub上呈现该SVG。 GitHub使用名为Content-Security-Policy的标头，该标头告诉浏览器可以安全地从哪个域加载各种类型的资产，包括图像。此标头的目的是通过防止从不受信任的站点加载潜在有害或恶意内容来提高安全性。

GitHub使用此标头，但限制了可以从中加载图像并代理大多数图像本身的站点。这可以显着提高性能，但也可以防止不道德的存储库所有者跟踪用户，这对于用户和GitHub都是不希望的。

浏览器被告知该域不受信任，因此无论如何它都不会从该域加载任何数据。没有办法解决，这是设计使然。

您可以尝试将JPEG嵌入为data: URL，该URL可能有效也可能不起作用，但这是将另一个对象嵌入SVG的唯一方法。

svg标签内的图像无法渲染？

1 个答案: