img 标签中的 svg 未显示（使用 illustrator 剪贴蒙版修改）

Question

我有一张 Instagram 图标的 svg 图像，它是我在 Illustrator 中使用剪贴蒙版导出的。但是，当我尝试显示它时，它不会在任何浏览器中显示。（显示其他社交图标）

我使用 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

这是经过一些改动的图片。剪辑路径的坐标已改为用于创建路径，然后用径向渐变填充。该文件现在只是一个填充路径，而不是剪切图像。它将更好地扩展，缩小 99%（总计 1283 字节与 135Kb 仅用于渐变）并避免链接（与嵌入）文件固有的问题。享受！点击蓝色按钮即可查看。

<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>
 <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">
  <stop stop-color="#f9d363" offset="0"/>
  <stop stop-color="#f26c1f" offset=".3658"/>
  <stop stop-color="#ce0665" offset=".6829"/>
  <stop stop-color="#541fdb" offset="1"/>
 </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>

img 标签中的 svg 未显示（使用 illustrator 剪贴蒙版修改）

svg in img tag not showing (modified with illustrator clipping mask)

html

svg

image

adobe-illustrator