为什么在浏览器中看到这个svg但在<img/>中却看不到？

Question

我有这个svg dinamically生成（虽然staticaly存储为.svg有同样的问题）：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" class="hexagon" height="64"    
    width="64" viewBox="0 0 106.25 106.25" >
    <defs>
        <pattern id="tw_pattern" patternUnits="userSpaceOnUse" 
             w="3.125" width="100" height="100">
        <image xlink:href="footer_tw.png" x="6.25" y="3.125" 
            width="93.75" height="93.75"/>
    </pattern>
</defs>

    <path d="m 78.125,6.69873 25,43.30127 -25,43.30127 -50,0.006 
        -25,-43.30127 25,-43.30127 z" fill="url(#tw_pattern)" 
        style="stroke-width:6.25"/>
</svg>

Mime内容类型在标题中设置为Content-Type:image/svg+xml。

问题是直接在浏览器中加载它看起来很好但在src标记中加载为img属性它显示为64x64透明方块。为什么呢？

其他svg文件已在同一页面中正确加载。