javascript - 注入(inject) SVG 的目的是什么？

Question

我目前正在为一个客户开发一个网站，该网站经常使用这个库将 SVG 注入(inject)到每个页面中: https://github.com/iconic/SVGInjector

此站点上的大多数页面都包含 15 个以上用作图标的 SVG 图标，我正在尝试最大程度地减少注入(inject)无法解决的请求数量。

我正在考虑将这些 SVG 包含为内联元素，以减少每个页面上的 HTTP 请求数量，但我不明白注入(inject)的目的是什么，而不仅仅是内联它们。我错过了什么？

谢谢!

Answer 1

由于库自述文件提到的某些原因，使用内联 SVG 是必要的:

• 使用嵌入式 JavaScript
• 能够使用 CSS 设置样式

另一方面，由于其他[有争议的]原因，使用内联 SVG 是不好的:

• 如果您需要使用同一个 SVG 两次，则需要将其包含两次。一般来说，重复代码不好，因为它往往会导致错误。
• 源文件中的 SVG 会产生膨胀。最好将 SVG 源代码分离到另一个文件中。

您提到的库允许您将 SVG 存储在不同的文件中，但又能够内联使用它们，从而解决了这些问题。