img標籤中的svg不顯示（使用插圖剪貼蒙版進行修改）

Question

我有我在Illustrator中用剪貼蒙版輸出的instagram圖標的svg圖像。 但是，當我嘗試顯示它時，它不顯示在任何瀏覽器中。 （其他社會圖標顯示）

我用img標籤顯示爲它與其它圖標精細顯示的SVG。難道我做錯了什麼？ img標籤是否支持剪貼蒙版圖片？ 對不起，我沒有太多的經驗與SVG。任何建議非常感謝！謝謝！ 這裏是我的代碼：

<nav id="socialNav"> 
    <ul> 
    <li><a href="#facebook.html" target="_blank"><img src="../../_images/social-facebook.svg"></a></li> 
    <li><a href="#instagram.html" target="_blank"><img src="../../_images/social-instagram_color-01.svg"></a></li> 
    <li><a href="#twitter.html" target="_blank"><img src="../../_images/social-twitter.svg"></a></li> 
    <li><a href="#googleplus.html" target="_blank"><img src="../../_images/social-googleplus_test.svg"></a></li> 
    </ul> 
</nav> 

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.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" 
width="56.7px" height="56.7px" viewBox="0 0 56.7 56.7" enable-background="new 0 0 56.7 56.7" xml:space="preserve"> 
<g> 
<g> 
    <defs> 
     <path id="SVGID_1_" d="M28.2,16.7c-7,0-12.8,5.7-12.8,12.8c0,7.1,5.7,12.799,12.8,12.799C35.299,42.299,41,36.5,41,29.5 
      C41,22.5,35.2,16.7,28.2,16.7z M28.2,37.7C23.7,37.7,20,34,20,29.5c0-4.5,3.7-8.202,8.2-8.202c4.5,0,8.2,3.7,8.2,8.202 
      C36.4,34,32.7,37.7,28.2,37.7z M41.5,13.5c1.602,0,2.898,1.298,2.898,2.9s-1.298,2.9-2.898,2.9c-1.602,0-2.9-1.298-2.9-2.9 
      S39.899,13.5,41.5,13.5z M49,8.9C46.4,6.2,42.7,4.8,38.5,4.8H17.9c-8.7,0-14.5,5.8-14.5,14.5v20.5c0,4.302,1.4,8,4.2,10.701 
      C10.3,53.1,13.9,54.4,18,54.4h20.4c4.3,0,7.899-1.399,10.5-3.899C51.6,47.9,53,44.2,53,39.9V19.3C53,15.1,51.6,11.5,49,8.9z 
      M48.4,39.9c0,3.101-0.899,5.601-2.7,7.3c-1.8,1.7-4.3,2.6-7.3,2.6H18c-3,0-5.5-0.898-7.3-2.6c-1.8-1.8-2.7-4.3-2.7-7.4V19.3 
      c0-3,0.9-5.5,2.7-7.3c1.7-1.7,4.3-2.6,7.3-2.6h20.6c3,0,5.5,0.9,7.3,2.7c1.7,1.8,2.7,4.3,2.7,7.2v20.6H48.4z"/> 
    </defs> 
    <clipPath id="SVGID_2_"> 
     <use xlink:href="#SVGID_1_" overflow="visible"/> 
    </clipPath> 
    <g id="LF6r1C.tif_2_" clip-path="url(#SVGID_2_)"> 

      <image overflow="visible" enable-background="new " width="601" height="514" id="Layer_0_3_" xlink:href="B91C5780217A8A7F.png" transform="matrix(0.0961 0 0 0.1609 -2.4072 -11.1685)"> 
     </image> 
    </g> 
</g> 
</g> 
</svg> 

Answer 1

Here'e有一些變化的圖像。剪輯路徑的座標被用來創建一個路徑，然後用徑向漸變填充。該文件現在只是一個填充路徑，而不是一個剪輯圖像。它會更好地縮放，縮小99％（1283 bytes total vs 135Kb僅適用於漸變），並避免鏈接（vs嵌入）文件固有的問題。請享用！點擊藍色按鈕看看它。

<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 56.7 56.7" viewBox="0 0 56.7 56.7" y="0px" x="0px" width='56.7' height='56.7'> 
 
<defs> 
 
\t <radialGradient id="a" gradientUnits="userSpaceOnUse" cy="47.1" cx="16.48" gradientTransform="matrix(2.215 0 0 2.215 -20.03 -57.24)" r="25.3"> 
 
\t \t <stop stop-color="#f9d363" offset="0"/> 
 
\t \t <stop stop-color="#f26c1f" offset=".3658"/> 
 
\t \t <stop stop-color="#ce0665" offset=".6829"/> 
 
\t \t <stop stop-color="#541fdb" offset="1"/> 
 
\t </radialGradient> 
 
</defs> 
 
<path d="m28.2 16.7c-7 0-12.8 5.7-12.8 12.8s5.7 12.8 12.8 12.8 12.8-5.8 12.8-12.8-5.8-12.8-12.8-12.8zm0 21c-4.5 0-8.2-3.7-8.2-8.2s3.7-8.202 8.2-8.202 8.2 3.7 8.2 8.202c0 4.5-3.7 8.2-8.2 8.2zm13.3-24.2c1.602 0 2.898 1.298 2.898 2.9s-1.298 2.9-2.898 2.9c-1.602 0-2.9-1.298-2.9-2.9s1.299-2.9 2.9-2.9zm7.5-4.6c-2.6-2.7-6.3-4.1-10.5-4.1h-20.6c-8.7 0-14.5 5.8-14.5 14.5v20.5c0 4.302 1.4 8 4.2 10.7 2.7 2.6 6.3 3.9 10.4 3.9h20.4c4.3 0 7.899-1.399 10.5-3.899 2.7-2.6 4.1-6.3 4.1-10.6v-20.6c0-4.2-1.4-7.8-4-10.4zm-0.6 31c0 3.101-0.899 5.601-2.7 7.3-1.8 1.7-4.3 2.6-7.3 2.6h-20.4c-3 0-5.5-0.898-7.3-2.6-1.8-1.8-2.7-4.3-2.7-7.4v-20.5c0-3 0.9-5.5 2.7-7.3 1.7-1.7 4.3-2.6 7.3-2.6h20.6c3 0 5.5 0.9 7.3 2.7 1.7 1.8 2.7 4.3 2.7 7.2v20.6h-0.2z" fill-rule="evenodd" fill="url(#a)"/> 
 
</svg>