将 SVG 内联到 HTML 文档时，SVG 图标非常大答案

【问题标题】：SVG icons are very large when inlining the SVG to the HTML document将 SVG 内联到 HTML 文档时，SVG 图标非常大
【发布时间】：2019-01-12 18:16:26
【问题描述】：

我基本上有这个：

<body>
  <svg style="display:none">
    <symbol id="mysymb1" viewBox="0 0 200 500">
      <g>
        <path ...></path>
      </g>
    </symbol>
    <symbol id="mysymb2" viewBox="0 0 200 500">
      <g>
        <path...></path>
      </g>
    </symbol>
  </svg>
  <div>
    <svg viewBox="0 0 10 25">
      <use xlink:href="#mysymb1"></use>
    </svg>
  </div>
</body>

我希望在开发过程中将符号变大，以便在其中包含一些细节，但是当我使用它们时，我希望它们像小图标一样。

但是，问题是图标显示得非常大，例如超过 1000 像素的宽度和高度，导致滚动和所有问题。这几乎就是我拥有的代码。任何地方都没有嵌套的 svg 元素，并且路径不会超出 200/500 边界。

不确定如何使其工作以使图标按定义变小。 TBH 我总是遇到 SVG 的这个问题，我不知道为什么会这样。

【问题讨论】：

标签： html svg icons

【解决方案1】：

您需要通过 CSS 设置大小。否则 SVG 尽可能大。 viewBox 不是在 HTML/CSS 中调整 SVG 大小的相关部分。

示例代码：

svg {
    height: 50px;
    width: 20px;
}

【讨论】：