SVG与联巴纽不会呈现

https://s3-us-west-2.amazonaws.com/idelog/assets/cultii_logo_final.svg

它包含一个链接的巴纽。它本身在浏览器中呈现良好（如果您点击上面的链接，就会看到）。

但是当我使用它的IMG标签里面，PNG部分不能在任意Chrome或Firefox渲染：

http://plnkr.co/edit/tjNeMgFxpU91q8swBkPX?p=preview

<body> 
    <h1>SVG Demo</h1> 
    <img src="https://s3-us-west-2.amazonaws.com/idelog/assets/cultii_logo_final.svg" /> 
    </body>

我试图本地和远程网址链接巴纽。我究竟做错了什么？

下面是SVG代码：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 257 74" enable-background="new 0 0 257 74" xml:space="preserve"> 
<g id="idolore_x5F_icon.psd_1_"> 

     <image overflow="visible" width="287" height="274" id="Layer_1_2_" xlink:href="https://s3-us-west-2.amazonaws.com/idelog/assets/EDEE15BD15B895E0.png" transform="matrix(0.2254 0 0 0.2254 6.3 6.1153)"> 
    </image> 
</g> 
<text transform="matrix(1 0 0 1 78 58)" font-family="'Lora-Bold'" font-size="67">cultii</text> 
</svg>

来源

2015-10-25 metalaureate

您可以嵌入在SVG的PNG。该文件略大，但你得到一个（1）httprequest更少（只有1个图像文件要维护）。

源：Does SVG support embedding of bitmap images?

编辑

其实你可以试着和哈塞的或雷米斯解决方案相结合这一点。

EDIT2

您可以使用CSS的SVG做到这一点：background-image: url(data:image/svg+xml,...); 但嵌入PNG是否会走，我不能说，但它必须是值得一试

来源

2015-10-25 16:51:09 LGSon

它扩展到162K！ – metalaureate

是的，它会的，你仍然会赢，因为你只有一个请求。尝试首先优化PNG ...这里有几个应用程序：https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=png%20optimizer%20windows – LGSon

当浏览器就会显示SVG图像时，将取回所有链接的文件。

当从html文档链接到SVG图像时，它不会获取链接的材质。

你可以尝试将SVG代码嵌入到html中，它应该可以在Chrome中使用。

编辑： 我有类似的问题，试图将SVG图像嵌入SVG图像。只要我在Chrome中显示矢量图像，但将其放入HTML页面（< img src =“”>）中，则无法读取链接的文件。我认为它在我将图像嵌入到html文件中时起作用（< svg> </svg>）。

这可能是一个安全问题，不允许图像获取外部资源。

来源

2015-10-25 16:40:11

的PNG太大而无法嵌入 - 爆炸至162K。 – metalaureate

您也可以使用<object>来嵌入SVG。 MDN Documentation

Plunker Demo

来源

2015-10-25 16:45:14

整洁。有没有办法做到这一点在CSS？我的代码上下文真的是CSS：'background-image：url（）' – metalaureate

SVG与联巴纽不会呈现

回答

相关问题