一旦我们有了我们所谓的 SVG 的“defs 块”——定义了我们稍后想要绘制的所有内容的那一部分 SVG——我们把它放在哪里？到目前为止，我们一直将其直接放入 HTML 中，这样做绝对有效。如果我们将其放在页面顶部，比如在打开的 <body> 标签之后
</head>
<body>
<!-- include svg defs here -->这在所有支持 SVG 的浏览器中都能很好地工作。
将它向下移动可能会很诱人。也许图标对页面来说不是那么重要，不如页面要传递的真正内容那么重要，因此我们将图标移到页面的底部，就像我们经常对 JavaScript 做的那样延迟加载它们。我们在视频中尝试了这种方法，但在 Safari 中渲染我们稍后尝试 <use> 的图标时遇到了问题。老实说，我在其他浏览器中也看到过这种方法的不同类型的行为不一致，而且似乎这方面的情况正在发生一些变化。所以我有听说过：<use> 很难实现。如果你最终将 defs 保留在你的文档中，最好将该块放在顶部。
在这个视频中，我们查看了所有这些的一些基本测试，然后查看了一些使用此系统的真实网站，以及它们如何以及在何处插入 svg defs 块。
查看 Chris Coyier 在 CodePen 上的笔 954e71cb5d5e79fb61d3c89bb3f21b8a（@chriscoyier）。
注意
我喜欢“SVG defs 块”这个术语——这样我们就可以称它为具有特定目的但实际上没有官方名称的东西。但是，你并不总是需要实际使用 <defs> 标签。当你使用 <symbol> 时，它们本身不会渲染，而且我确实认为不应该放在 <defs> 中。我听说过 SVG 中渐变的定义也是一样的，如果它们在 <defs> 中甚至不起作用。无论如何，它仍然是一个“我们只是定义以便稍后使用的 SVG 代码块”，所以我可能会继续称之为“SVG defs 块”。
非常感谢这些！它非常有用。
我希望有人能指出我遇到的这个小问题中的错误在哪里。
我无法使用 CSS 调整来自外部 svg 的一个
<symbol>的大小，但我可以调整来自同一个外部 svg 的另一个<symbol>的大小。在 CSS 中，我更改了
width和height。#pluss处理得很好，而#heart完全忽略了它。无论 CSS 大小如何，它都只想保持 24px * 24px 的大小。我无法分辨我做错了什么。令人费解地令人困惑！
外部 icons-defs.svg 文件
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="pluss" viewBox="0 0 24 24" aria-labeledby="title">
<title>添加</title>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</symbol>
<symbol id="heart" viewbox="0 0 24 24" aria-labeledby="title">
<title>收藏</title>
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</symbol>
</svg>
在 HTML 中
<button>
<svg class="icon-heart" role="presentation">
<use xlink:href="icons-defs.svg#heart"></use>
</svg>
喜欢
</button>
<button>
<svg class="icon-pluss" role="presentation">
<use xlink:href="icons-defs.svg#pluss"></use>
</svg>
添加目标
</button>
当在 HTML 文档顶部内联具有相同符号的 svg 时，它可以正常工作。
任何提示将不胜感激 :)
问题已解决。
我在
#heart上写了viewbox。HTML5 接受，但 XML 不接受。它必须是viewBox（大写 B）。