Nuggetty Goodness

Procedure

1. Open the SVG in Adobe Illustrator.
2. Where possible, unite shapes with the same fill into compound paths.
3. Where possible, outline strokes. This will make cleanup easier when we dig into the code.
4. Remove any additional paths, bounding boxes, etc, that are not a visible part of the SVG.
5. Scale the SVG to intended rendering size (e.g. if it’s a 24px icon, scale the SVG to be 24px).
   If you want the SVG to be in a 24px "bounding box", then make sure the canvas size is 24px, and your svg is your desired size within the canvas. The canvas functions as your "bounding box".
6. Clean up sub-pixel alignments where feasible.
7. Save SVG.
   
   SVGX
8. Open the SVG that was just saved by Adobe Illustrator in SVGX.
9. Select “Optimized” tab.
10. Hit [Copy].
    
    VScode
11. Open SVG that was just saved by Adobe Illustrator in Visual Studio Code (VScode).
    At this point, it’s possible that no image displays in SVGX’s preview, even if there’s code. That’s fine. Copy the code from the “Optimized” tab in SVGX.
12. Paste the SVG code from SVGX below Adobe’s original SVG code.
    We’ll be using the code from SVGX, with a few tweaks based on the Adobe original.
13. (Optional) Turn on word wrap.
    
    VScode - SVGX-pasted code
14. Ensure the svg opening tag contains only xmlns and viewBox attributes.
15. Add title tag and string directly below (outside of) the opening svg tag.
    Do describe what the image is. Don't describe what the image can be used to represent.
    <title>Speedometer</title> - Do
    <title>Dashboard</title> - Don’t
    What the image represents will be handled separately with aria-label or alt-text, depending on the implementation.
    
    Single-colour SVGs meant to be used as icons
16. Do NOT declare the colour of any path(s) using the fill attribute.
    E.g. DON’T <path fill="#000" d="M22 11.8h-3.6V13h3l5.5 8.3h1.4z"/>
    This makes the svgs harder to dynamically colour.
    
    
17. Single-colour SVGs meant to be used as images
    Declare the colour of any path(s) using the fill attribute.
    E.g. <path fill="#000" d="M22 11.8h-3.6V13h3l5.5 8.3h1.4z"/>
    This is for SVGs used as images, where there’s no intent to dynamically change the colour
    
    Multi-colour SVGs
18. Declare the correct corresponding colour of each path using the fill attribute.
    SVGX-pasted code will often strip the first colour class, and fail to apply it to the first path associated with it. We’ll need to eyeball the path coordinates, and guess match up the colour in the class to the correct path.
    E.g. <path fill="#41B59D" d="M22 11.8h-3.6V13h3l5.5 8.3h1.4z"/>
19. Remove style tags, and anything in them.
20. Remove classes, and their values.
    We are replacing style and class with fill and the colour in the corresponding class.
    
21. Delete the original code from Adobe Illustrator.
    We only want the code we pasted from SVGX, and then cleaned up.
22. Save the SVG in VScode.
23. Open the VScode edited SVG in SVGX.
24. If the SVG looks as desired / expected - congrats! It’s clean! We can now add it to Iconset.

Troubleshooting