Question

我只是想知道将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图像是相当长的代码。

谢谢。

Answer 1

我建议使用src添加它们。大多数库就是这样做的（例如：https://github.com/FortAwesome/Font-Awesome）。它还允许您将这些资产托管在CDN上。

Answer 2

“最佳方法”取决于用例的细节。因此，我不会告诉您该怎么做，但会为您提供有关如何决定的信息：

内联时：

该页面中包含SVG数据，因此无需进行额外的HTTP请求即可获取该SVG。
如果您在多个页面上重复使用SVG，则每次都会为图像发送该数据。
如果页面有缓存未命中，那么您将再次为SVG发送该数据，即使它可能已经被缓存。
如果您的页面是在服务器端动态生成的，则页面本身不会在客户端进行缓存，因此您的SVG也不会被缓存，并且每次都必须加载。

使用src属性时：

每个资源都会产生一个额外的HTTP请求。
您的SVG可以缓存与页面无关。因此，图像将在不同页面以及页面更改时被缓存。

请牢记所有这些，如果您仅在不经常更改的单个静态页面上使用SVG，则只会内联SVG。否则，请将它们分开。

Answer 3

如果您有很多小的svg文件，则建议您内联它们，以避免对服务器发出太多请求。

仅应链接较大的图像，以便用户的浏览器可以缓存它们。

链接SVG图像的最佳方法是什么？

3 个答案: