1517791 - Harmonize and document SVG code style

Status: NEW

(DevTools :: General, enhancement, P3)

Description

[Florens Verschelde :fvsch]

We have 130+ SVG icons with slightly different coding styles, e.g.:

- Some may be missing the license header
- Dimensions: some use viewBox, other use width/height, and some use both
- Color: we use fill="context-fill", fill="context-fill #0b0b0b" and fill="context-fill #0c0c0d"

I propose adding a SVG section to https://docs.firefox-dev.tools/contributing/coding-standards.html (maybe restricting the existing https://docs.firefox-dev.tools/frontend/svgs.html page to design aspects) with a code template, probably this one:

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill">
  <path d="..."/>
</svg>

Some choices:

Dimensions: use both width/height and viewBox. This is what the rest of the Firefox codebase tends to do.

Color: since we are systematically passing a context-fill color (to power the light/dark themes), the fallback Grey 90 color (https://design.firefox.com/photon/visuals/color.html#grey) is not very useful. :ntim suggested only using fill="context-fill".

Comment 1

[Tim Nguyen :ntim]

There's a mozilla-wide guide for this: https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/SVG_Guidelines#Authoring_guidelines