我只是想知道将SVG图像插入HTML的最佳方法(最佳实践(是什么。
方式1：HTML中的SVG
<picture class="triangle-icon">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
<path d="M 95,50 5,95 5,5 z"></path>
</svg>
</picture>
方式2：链接SVG图像
<img src="../../../public/svg/svg-triangle.svg" alt="triangle icon">
方式3：否则比方式1或2更好！
我问这个是因为我不知道将 SVG 图像放在 HTML 中是否正确，因为某些 SVG 图像是相当长的代码。
谢谢。
"最佳方法"取决于您用例的具体情况。 因此，我不会告诉你该怎么做，但会告诉你如何决定：
当您内联时：
- SVG 数据包含在页面中，因此不会发出额外的 HTTP 请求来获取该 SVG。
- 如果您在多个页面上重复使用 SVG，则每次都会发送图像的数据。
- 当页面出现缓存未命中时，您将再次为 SVG 发送该数据，即使它可能已被缓存。
- 如果您的页面是在服务器端动态生成的，则页面本身不会在客户端缓存，因此您的 SVG 也不会缓存，并且每次都必须加载。
使用src属性时：
- 为每个资源发出一个额外的 HTTP 请求。
- 您的 SVG 可以独立于页面进行缓存。 因此，图像会针对不同的页面以及页面更改时进行缓存。
考虑到所有这些，如果您只在不经常更改的单个静态页面上使用它们，我只会内联 SVG。 否则，请将它们分开。
我建议使用src添加它们。这是大多数库的做法(例如：https://github.com/FortAwesome/Font-Awesome(。它还允许您在 CDN 上托管这些资产。
如果你有很多小的svg文件，那么我建议你内联它们，以避免向服务器发出太多请求。
较大的图像应仅链接，以便用户的浏览器可以缓存它们。