如何在 Web 应用程序中使用 SVG 徽标？答案

【问题标题】：How to use an SVG logo in a web application?如何在 Web 应用程序中使用 SVG 徽标？
【发布时间】：2014-12-10 12:05:43
【问题描述】：

我的网络应用程序只需要支持现代浏览器（IE 从 10 开始）。但它必须是完全响应的，因此它在所有可能的显示尺寸和分辨率上都应该看起来不错。

左上角有标准的标志，链接到起始页。我想使用 SVG 徽标，它在任何分辨率下都应该看起来不错。起初，我在一个普通的<img> 标签中使用了徽标，并在 css 中指定了高度和宽度。

<a href="@Url.Action("Index", "Home")" id="Home">
    <img id="logo" src="~/Content/images/mitoLogo.svg" />
</a>

    #logo {
    height: 3em;
    width: 9em;
    margin: 0.3em 1.5em 0.3em 0.2em;
}

遗憾的是，IE 无法使用它并剪辑徽标而不是将其拉伸到给定大小。所以我环顾四周，发现 this suggestion 用于在页面中放置 SVG 图像。我现在拥有的是

<div id="logo">
    <a href="@Url.Action("Index", "Home")" id="Home">
        <object height="100%" width="100%"
                    data="~/Content/images/mitoLogo.svg" type="image/svg+xml">
        </object>
    </a>
</div>

这可以在 IE 和 Firefox 中正确显示图像（尚未尝试其他浏览器），但该链接仅在 IE 中有效。在 IE 和 Firefox 中，光标都不会变为点击手，而带有 AdBlockPlus 的 FF 在悬停时会显示“阻止”建议，可能是因为这是一个对象标签。

有没有办法在各处正确显示 SVG 图像，同时保留其链接功能？我不限于 css，但如果需要，我可以对标记进行彻底的更改，我还可以更改 SVG 源。

【问题讨论】：

css-tricks.com/using-svg
@GibboK 有趣的文章，但似乎没有涵盖我的问题。我所做的是以他们建议的第一种方式嵌入它，带有一个 img 标签。但是我不能让它的大小与 SVG 文件中定义的大小相同，因为在我的响应式设计中，它必须随着缩放级别而拉伸和收缩。当试图用 CSS 调整它的大小时，它不再适用于 IE。文章没有提到这一点。

标签： css svg responsive-design cross-browser

【解决方案1】：

我对您的初始代码进行了一些尝试，并使其正常工作...看来您只需将宽度设置为百分比，它就会适当地缩放高度。

#logo {
    width: 25%;
}

尝试在JSFiddle Demo 中更改百分比并调整结果窗口大小我在 IE10（模拟器中的 IE9）和 Chrome 中对其进行了测试，结果完全符合预期。

【讨论】：