SVG Favicon 不会在 React 中调整大小答案

【问题标题】：SVG Favicon won't resize in ReactSVG Favicon 不会在 React 中调整大小
【发布时间】：2021-07-08 02:13:22
【问题描述】：

我有一个 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 放大以使其看起来更好地作为网站图标？

【问题讨论】：

标签： html css reactjs svg favicon

【解决方案1】：

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

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

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

关于网站图标，您尚未阐明“微小”的含义。如果您使用的是 96 DPI 左右的常规显示器，并且选项卡的图标只有 16x16 像素，那么它将被缩小到这个。

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

【讨论】：