简体繁体 English

SVG模板，内部，外部重用的最佳场所？

[英]SVG templates, best place to put them for reuse, internal, external?

原文 2019-02-01 07:48:21 1 1 javascript/ html/ svg

I have an app in which the user can put svg pictures on to the screen. 我有一个应用程序，用户可以在其中将svg图片放到屏幕上。 These pictures are from a predefined library that is given to the user. 这些图片来自提供给用户的预定义库。 The library will have about 20 pictures (which are not big files size) in but may grow over time. 该库中将包含约20张图片（不是大文件），但可能会随着时间的推移而增长。

The workflow for the user is they click a button and they get an svg to place. 用户的工作流程是单击按钮，然后放置svg。

At the moment there is a div in the page which is styled to display none. 目前，页面中有一个div，其样式设置为不显示任何div。 In that div there is a "template" of each of the svgs (the full inline code), so when the user clicks a button it clones the relevant template for them to use. 在该div中，每个svg都有一个“模板”（完整的内联代码），因此，当用户单击按钮时，它将克隆相关的模板供其使用。

It works fine, but it seems perhaps not the best methodology since all 20 templates are always loaded, even though the user may use 0. 它工作正常，但似乎并不是最好的方法，因为即使用户可能使用0，所有20个模板都始终加载。

So my question..baring in mind the user may use 0 templates, or may use every template several times, performance wise whats the best methodology, i can think of a couple of ways... 所以我的问题..请记住，用户可能会使用0个模板，或者可能会多次使用每个模板，就性能而言，最好的方法是什么，我可以想到几种方法...

use the current template in the html, but this means that the svgs are always in the dom 使用html中的当前模板，但这意味着svg始终在dom中
have each svg as a seperate file, but then it will have to go get it from the server everytime the user wants the template 将每个svg作为一个单独的文件，但是每次用户需要模板时，都必须从服务器获取它
potentially (though im not sure this would work) have it in the css as a background image so I would just be applying the relevant class 可能（尽管我不确定这是否行得通）作为背景图像存在于CSS中，所以我将只应用相关类
store all the svgs as varaibles in my JS 将所有svg作为变量存储在我的JS中

Ultimatley im not even sure theres much in this as the svgs are not complex i just dont like the idea of having to have all the templates in the DOM all the time, if anyone could suggest a logical approach I would appriciate it Ultimatley im甚至不确定svg并不复杂，我只是不喜欢必须一直将所有模板都放在DOM中的想法，如果有人可以提出一种合理的方法，我会采用

1 个解决方案

I would take the middle street and I would have each template in its own file on the server. 我走了中间大街，每个模板都放在服务器上自己的文件中。 During deployment, I would fusionate them into a single file, but I would wait for the user to use one of the templates to download that file with all the templates, gzipped, of course. 在部署期间，我会将它们融合为一个文件，但是我将等待用户使用其中一个模板来下载该文件，当然所有文件都带有gzip压缩文件。

Take into account that this has a limit. 考虑到这是有限制的。 As the library grows, there will be a moment when the download time will be unacceptable. 随着库的增长，有时会出现下载时间无法接受的情况。 In order to solve it, simply divide those SVGs into bundles, fusionate them in their respective files and download each of them on demand. 为了解决该问题，只需将这些SVG分成捆绑包，将它们融合到各自的文件中，然后按需下载每个SVG。