SVG 代码包含会使项目变慢吗？ [复制]答案

【问题标题】：Does SVG Code Inclusion makes Project Slow? [duplicate]SVG 代码包含会使项目变慢吗？ [复制]
【发布时间】：2022-01-06 21:20:57
【问题描述】：

我是一名 UI 开发人员，致力于一个项目。以前，我曾经在 HTML 中包含 SVG 代码，所以我可以在其中使用路径标签来制作动画。像这样。

<div class="cross-svg">
 <svg xmlns="http://www.w3.org/2000/svg" width="28.284" height="28.284" viewBox="0 0 28.284 28.284">
  <g id="cross" transform="translate(-298 -432)">
    <rect id="Rectangle_32" data-name="Rectangle 32" width="38" height="2" transform="translate(299.414 432) rotate(45)"/>
    <rect id="Rectangle_33" data-name="Rectangle 33" width="38" height="2" transform="translate(326.284 433.414) rotate(135)"/>
  </g>
 </svg>
</div>

现在，有人告诉我，这样做不是一个好习惯。在 HTML 中编写 SVG 代码有助于增加代码长度，这直接影响构建大小。这是真的吗？如果是，如何使用 SVG 标签内的 ID 进行动画处理？

<img src={crossSVG} alt="" />

导入还是粘贴，哪个更好？

【问题讨论】：

这能回答你的问题吗？ SVG icons vs. PNG icons in modern web sites
毫无疑问，它增加了代码长度，但另一方面它减少了网站的加载时间。在网站中使用更少的图形使其更快。
@Sully，不，它没有说明对包大小的影响。
计算传输的文件大小，由于 gzip/brotli 压缩，一个文件总是小于多个 svg 文件
比什么慢？我们拿这个比什么？当然，它比根本没有 UI 要慢。不过，它与以其他方式使用 SVG 一样快。

标签： javascript html css svg

【解决方案1】：

实际上完全相反。我们使用 SVG 而不是图像的原因是 SVG 是随网站生成的，因此不会使网站在上传时变慢，而是会立即与网站一起显示。我希望这回答了你的问题，但如果不只是回复这个问题，我会尽量给你一个更详细的答案。

【讨论】：

我不是在比较 SVG 和图像，我是在比较代码中包含的 SVG 与使用 img 标签导入的 SVG。