Guidelines for SVG Sources - Automattic/gridicons GitHub Wiki

Here's the current draft for a guideline to write the SVG used in the icon set sources. It's still in progress, and feel free to review.

1. Remove any internal style reference, fill included (it defaults to black).
2. The svg tag should contain only the xmlns and viewBox attributes.
3. Keep or add the <?xml version="1.0" encoding="UTF-8"?> declaration.
4. Remove any "generator" or superfluous comment. Keep comments that clarify the SVG content.
5. Remove any superfluous id or class attribute, keep the ones that are semantically meaningful.
6. Remove any superfluous empty tag and fix any weird nesting.
7. Make sure the cleaned up SVG still renders as the original.
8. Note: don't add the transparent rectangle as it will make the icon full black (see #274). It's added by the script.

Tools

If you use SVGOMG, which is really good, make sure you configure it to do "Prettify" (the file should stay readable) and to re-introduce the meaningful bits from the list above.