嵌入式SVG未对齐元素

Question

所以我试图从PNG转向SVG，但我有一些成长的痛苦。我想使用嵌入式SVG，因此我可以为其颜色更改CSS属性以及减少资源负载。虽然我遇到的问题是嵌入SVG时它出现在提供的框上方，但是如果我使用img标签链接到SVG，则格式化是完美的。

在我的图片中，右边的框有嵌入左框的img标签。

http://jsfiddle.net/fLWhu/684/

<span>
                            @Html.Raw(File.ReadAllText(Server.MapPath("~/Content/images/icons/1.svg")))

</span>
<span>
<img src="~/Content/images/icons/1.svg" alt="our linked in" /> 
</span>

更新

添加

后

     display:inline-block;
     vertical-align:middle;

进入跨度，结果是。

Answer 1

SVG部分似乎没问题，您可以尝试设置显示：内联块和垂直对齐：中间到 div.header .right p span 元素