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 :
- Drop New Sprite Icon into app/assets/images/sprite_icons
npm run svg
- Takes all SVG Files: Optimises SVG + builts an SVG Sprite + Overview Page which lists all icons
- 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
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?
We will use https://github.com/jkphl/svg-sprite as a devDependency to create the SVG Sprite which is also using SVGOM for optimisation.