Architect strategy to embed SVG sprites into HTML to improve loading and caching

[mojavelinux]

As the SVG sprites are currently referenced, they are not being cached and flicker on reload. It seems like the browser does not understand that a reference to a fragment in an SVG is the same SVG as a reference without the fragment. Even referencing the SVG in a preload tag is of no avail. It does not prevent the browser from requesting the SVG over and over.

[mojavelinux]

One possible solution is to embed the SVG sprites into the generated HTML pages. This could be done by moving the SVG sprites from assets to partials and using Handlebars partials to include them. The objects in the SVG can then be referenced using a bare fragment (e.g., #view-clippy or #icon-clippy). This has the added benefit of avoiding poorly implemented security restrictions applied by Chrome when viewing the HTML over the file protocol.

There is one major caveat with this approach that we need to solve. If we include the SVG sprites, the IDs in the SVG must be globally unique. Otherwise, they will clash. One solution is to change the IDs in the SVG files. However, this is tedious an error prone. A better solution is to leave the SVG sprites in the assets folder, but update the build to copy them to the partials folder and prepending the file stem basename to all the IDs (e.g., icon-clippy => octicons-16-icon-clippy). That way, the files can still be used as they are today, but can also be embedded into the HTML with globally unique IDs.