SVG模板，是在内部，外部将其重新使用的最佳位置？

Question

我有一个应用程序，用户可以在其中将svg图片放到屏幕上。这些图片来自提供给用户的预定义库。该库中将包含约20张图片（不是大文件），但可能会随着时间的推移而增长。

用户的工作流程是单击按钮，然后放置svg。

当前页面上有一个div，其样式设置为不显示。在该div中，每个svg都有一个“模板”（完整的内联代码），因此，当用户单击按钮时，它将克隆相关的模板供他们使用。

它工作正常，但似乎并不是最好的方法，因为即使用户可能使用0，所有20个模板始终都已加载。

所以我的问题..请记住，用户可能会使用0个模板，或者可能会多次使用每个模板，从性能角度来看，最好的方法是什么，我可以想到几种方法...

1. 使用html中的当前模板，但这意味着svgs 总是在家里
2. 将每个svg作为一个单独的文件，但是随后 每当用户想要时，都必须从服务器获取它 模板
3. 可能（尽管我不确定这是否可行）作为背景图像放在css中，所以我只是应用相关的类
4. 将所有svg作为变量存储在我的JS中

Ultimatley即时通讯甚至不确定svg并不复杂，我只是不喜欢必须始终将所有模板都包含在DOM中的想法，如果有人可以建议我采用这种逻辑方法的话< / p>

Answer 1

我走了中间大街，每个模板都放在服务器上自己的文件中。在部署期间，我会将它们融合为一个文件，但是我将等待用户使用其中一个模板来下载该文件，当然，还要压缩所有模板。

请注意，这是有限制的。随着库的增长，有时会出现下载时间无法接受的情况。为了解决这个问题，只需将这些SVG分成捆绑包，将它们融合到各自的文件中，然后按需下载它们。