Better SVG Usage in the Frontend

As we are currently mainly inlining SVG of all different sorts, which leads to the problem that the HTML Size is growing significantly. We should reconsider the different SVG usages.

• Especially small Icons (in Issues, List, etc) to an SVG Sprite based implementation

Implementing the following workflow :

1. Drop New Sprite Icon into app/assets/images/sprite_icons
2. Run npm run svg
3. Takes all SVG Files: Optimises SVG + builts an SVG Sprite + Overview Page which lists all icons
4. Icon can be used through Rails Helper sprite_icon('clock_o', size:72, icon_class:'svg-additional-class')

• Polyfill for non-supporting browsers of svg sprite id solution
• Convert Illustration SVG into img/svg
• Optimise automatically illustrations
• Check SVG Fills done through class
• Animated SVG like the Tanuki
• Get rid of Font Awesome try out
• Create automatic Icon directory
• CDN
• Documentation

Small Calculation

So on this MR : https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/9546 (which is huuuge) we have 4118 SVG Elements in the DOM always with their full path, etc. So if we replace those SVG elements with references instead of inlining we can reduce the HTML size from 8.6 MB to 3.9 MB most probably (did a small test in the browser) on top of it all elements are cached (visually/Browser will need less to parse and also from page to page)

Next steps together with UX

• Replace Font Awesome Icons with Sprited Specific ones
• Stacked Icons?

Libraries

We will use https://github.com/jkphl/svg-sprite as a devDependency to create the SVG Sprite which is also using SVGOM for optimisation.