Html SVG 图标不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34446050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG Favicon Not Working
提问by Sam Willis
I'm trying to get an SVG Favicon on my site but no matter what I do, it just doesn't want to work.
我试图在我的网站上获得一个 SVG Favicon，但无论我做什么，它都不想工作。
I've got the following code saved as an .svg file in my usual favicon location, but when I change the favicon path to be .svg instead of .ico, nothing loads.
我将以下代码作为 .svg 文件保存在我常用的网站图标位置，但是当我将网站图标路径更改为 .svg 而不是 .ico 时，没有加载任何内容。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.5 283.4" style="enable-background:new 0 0 384.5 283.4;" xml:space="preserve" width="100%" height="100%">
<style type="text/css">
.shape1 {fill: #DB6B2A;}
.shape2 {fill: #AE1A31;}
</style>
<path class="shape1" d="M384.5,83.7c-4.6-19.3-14.3-36.3-29.3-51.3C333.4,10.6,307.6,0,276.7,0c-30.9,0-56.7,10.6-78.4,32.4
l-4.6,5.1l-4.5-5.1C167.4,10.6,141.6,0,110.8,0S54.1,10.6,32.4,32.4C10.6,54.1,0,79.9,0,110.8v61.1l55.1-12.8v-48.4
c0-15.2,5.6-28.3,16.2-39C82,60.7,95.1,55.1,110.8,55.1c30.4,0,55.1,25.3,55.1,55.6v22.9l55.6-12.7v-10.1c0-2.5,0-4.6-0.5-7.1
c1.5-12.1,7.1-22.8,16.2-31.9c10.6-11.1,23.8-16.7,39.5-16.7c25.4,0,46.9,17.2,53.3,40.7"/>
<path class="shape2" d="M54.5,187.6c6.4,23.5,27.9,40.7,53.3,40.7c15.7,0,28.8-5.6,39.5-16.7c9.1-9.1,14.7-19.7,16.2-31.9
c-0.5-2.5-0.5-4.6-0.5-7.1v-10.1l55.6-12.7v22.9c0,30.4,24.8,55.6,55.1,55.6c15.7,0,28.8-5.6,39.5-16.7
c10.6-10.6,16.2-23.8,16.2-38.9v-48.4l55.1-12.7v61.1c0,30.9-10.6,56.7-32.4,78.4c-21.7,21.7-47.5,32.4-78.4,32.4
c-30.9,0-56.7-10.6-78.4-32.4l-4.6-5.1l-4.6,5.1c-21.7,21.7-47.6,32.4-78.4,32.4s-56.7-10.6-78.4-32.4C14.3,236,4.6,219,0,199.7"/>
</svg>
This is the code I'm using to set the favicon;
这是我用来设置网站图标的代码；
<link rel="icon" href="http://www.MYSITE.co.uk/favicon.svg?v=4">
I can't work out if it is an issue with my .svg code, or I'm missing something. Thanks
我不知道是我的 .svg 代码有问题，还是我遗漏了什么。谢谢
回答by serraosays
(update)
（更新）
SVG favicons are now supported for Firefox, Safari, Chrome and Opera: https://caniuse.com/#feat=link-icon-svg
Firefox、Safari、Chrome 和 Opera 现在支持 SVG 图标：https: //caniuse.com/#feat=link-icon-svg
You might want to just use a .png until support improves.
在支持改进之前，您可能只想使用 .png。
回答by Sean Tank Garvey
First of all the code you are using for your favicons is missing one part, it should include, somewhere. that says: type="image/x-icon". So for favicons, using .jpg or other standard images like .gif the code looks like this:
首先，您用于收藏夹图标的代码缺少一部分，它应该包含在某处。上面写着：type="image/x-icon"。因此，对于收藏夹图标，使用 .jpg 或其他标准图像（如 .gif），代码如下所示：
<link href="someimagesourcefileorURL.jpg" rel="icon" type="image/x-icon" />
1. For image extension, .jpg works [or you can use another comparable file extension; .gif works too.]2. For rel, "icon" is sufficient [but you can also put the word "shortcut" next to/before "icon" if you want, optionally.]
1. 对于图片扩展名，.jpg 有效[或者您可以使用其他类似的文件扩展名；.gif 也适用。] 2. 对于 rel，“icon”就足够了 [但如果您愿意，也可以将“快捷方式”一词放在“icon”旁边/之前，可选。]
For an SVG 'favicon' it's a little trickier, for a few reasons. This is optional but to work best, you need the SVG image to be sized to under 256 square pixels (16 pixels by 16 pixels, but since SVG are normally scalable, I recommend setting the height and width to both <=16px immediately before trying to use them as a 'favicon'. So you need to divide your height by whatever number is needed to get the height to equal or be less than 16px and the same is true for width. If you have a square, evenly-proportioned image, then you should be able to simply change the entire image size by a percentage and the whole image should scale down without distorted significantly while retaining the square shape. If you don't have a square shape, you'll have to distort the image some in the process of turning it into a square-ish shape because favicons are 16px by 16px squares. Assuming you've already made those adjustments, we're moving on. Now, after that part is done, you use this format for SVG 'favicons':
对于 SVG 'favicon'，它有点棘手，原因有几个。这是可选的，但要达到最佳效果，您需要将 SVG 图像的大小调整到 256 平方像素以下（16 像素乘 16 像素，但由于 SVG 通常是可缩放的，我建议在尝试之前立即将高度和宽度设置为 <=16px将它们用作“收藏夹”。因此，您需要将您的高度除以所需的任何数字，以使高度等于或小于 16px，宽度也是如此。如果您有一个均匀比例的正方形图像，那么您应该能够简单地按百分比更改整个图像的大小，并且整个图像应该缩小而不会显着扭曲，同时保留方形。如果您没有方形，则“ 在将图像变成方形的过程中，必须对图像进行一些扭曲，因为网站图标是 16 像素 x 16 像素的正方形。假设您已经进行了这些调整，我们将继续前进。现在，在该部分完成后，您可以将这种格式用于 SVG 'favicon'：
<link rel="icon" href="someimagefileorURL.svg" type="image/svg+xml" />
That should work as long as your SVG image has been sized down already as described above. Here's a good JSfiddle (not-mine) that demonstrates that this code works. https://jsfiddle.net/Daniel_Hug/YawSn/And I have lots of experience with the traditional favicons working with the first method I described.
只要您的 SVG 图像已按上述方式缩小尺寸，这应该有效。这是一个很好的 JSfiddle（不是我的），它证明了这段代码是有效的。https://jsfiddle.net/Daniel_Hug/YawSn/我对使用我描述的第一种方法的传统图标有很多经验。
Hope this helps! I sure wish someone showed me this when I didn't know how to use/set-up favicons yet! :-)
希望这可以帮助！当我还不知道如何使用/设置收藏夹图标时，我当然希望有人向我展示这个！:-)
回答by Stuart P. Bentley
You need to rasterize the SVG for browsers that don't support SVG icons (which is currently most of them). See Is there a way to render SVG favicons in unsupported browsers?
您需要为不支持 SVG 图标（目前大多数）的浏览器光栅化 SVG。请参阅是否有办法在不受支持的浏览器中呈现 SVG 图标？
回答by Malith
You can try like this
你可以这样试试
<link rel="icon" href="gnome.svg" sizes="any" type="image/svg+xml">
but most of browser does not support
但大多数浏览器不支持
回答by Josh Habdas
Optimized SVG Faviconscan be as little as 100-200 bytes so there's not much sense in making an external request. Just go ahead and embed it on the page. In doing so you'll save an external image request which could be larger than expected due to cookies getting sent when images are requested.
优化的 SVG Favicon可以小到 100-200 字节，因此发出外部请求没有多大意义。只需将其嵌入页面即可。在这样做时，您将保存一个外部图像请求，由于在请求图像时发送 cookie，该请求可能比预期的要大。
As others have pointed out, the browser support isn't great yet but the SVG Favicons afford some things you simply can't do with PNG—such as styling via CSS and even JS-based animation.
正如其他人指出的那样，浏览器支持还不是很好，但 SVG Favicon 提供了一些你用 PNG 根本无法做的事情——例如通过 CSS 设置样式，甚至基于 JS 的动画。
Here's the Chrome issueto add support, open since 2013 with no real progress due to blockers.
这是要添加支持的 Chrome 问题，自 2013 年以来开放，由于拦截器没有真正的进展。
