SVG Favicon 不会在 React 中调整大小

编程问答 2022-05-14

问题描述

我有一个 SVG，我想将其用作我的 React 应用程序的 Favicon。如果重要的话，我使用了 create-react-app。

如果我在实际网站上使用它，内联，我可以通过添加或更改其 width="24px" 属性来调整大小：

<div>
  <svg
    id="logoS"
    width="100px"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1000 1000"
  >
//Paths and a lot of stuff within... 
</svg>
</div>

这是我的图标在我的 index.html 上的外观：

<link
  rel="icon"
  href="%PUBLIC_URL%/assets/svg/main-logo-los-litros.svg"
  type="image/svg+xml"
/>

无论我做什么或尝试什么，Favicon 总是看起来很小。我得到的唯一可见结果是当我将 viewBox="0 0 1000 1000" 调整为其他东西时，它只是消失或看起来像一个像素。

我尝试添加 width、height 仅其中之一、sizes，但似乎没有任何效果！

如何让我的 SVG 放大以使其看起来更像网站图标？

解决方法

您的 SVG 应该只需要 viewBox 属性和该 viewBox 中的内容。当您没有定义 viewBox 时，width 和 height 不会缩放图形而是调整 viewBox（如果太小可能看起来像裁剪）。

当您定义了 viewBox 属性并同时定义了宽度和高度时，该 viewBox 区域内的内容将被缩放以适应宽度和高度边界，或者基于 preserveAspectRatio 的规则属性。

但是，当您只提供一个维度时，将指示 SVG 缩放到该宽度或高度，同时保持纵横比。

关于收藏夹图标，您还没有说明“微小”是什么意思。如果您使用的是 96 DPI 左右的常规显示器，并且选项卡的图标只有 16x16 像素，那么它会缩小到这个比例。

如果您的图形内容没有完全填满 viewBox 的边界，那么额外的空白就是缩放内容的一部分，这样如果您只使用了 25% 的空间，那么您的图形将是 16x16 像素中的 8x8 像素呈现的图标。如果您将其居中放置在 viewBox 中，则图形周围可能有 4px 的内边距（如果仅使用 25% 的 viewBox）。

faviconfaviconhtmlreactjsreactjsreactjsreactjssvgsvgsvg