Procedure
Open the SVG in Adobe Illustrator.
Where possible, unite shapes with the same fill into compound paths.
Where possible, outline strokes. This will make cleanup easier when we dig into the code.
Remove any additional paths, bounding boxes, etc, that are not a visible part of the SVG.
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".
Clean up sub-pixel alignments where feasible.
Save SVG.
SVGX
Open the SVG that was just saved by Adobe Illustrator in
SVGX.
Select “Optimized” tab.
Hit [Copy].
VScode
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.
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.
(Optional) Turn on word wrap.
VScode - SVGX-pasted code
Ensure the svg opening tag contains only xmlns and viewBox attributes.
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
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.
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
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"/>
Remove style tags, and anything in them.
Remove classes, and their values.
We are replacing style and class with fill and the colour in the corresponding class.
Delete the original code from Adobe Illustrator.
We only want the code we pasted from SVGX, and then cleaned up.
Save the SVG in VScode.
Open the VScode edited SVG in SVGX.
If the SVG looks as desired / expected - congrats! It’s clean! We can now add it to
Iconset.
Troubleshooting
When I open my VScode edited SVG in SVGX, some paths don’t have the right colours.
It can be tricky to assign the right fills to paths, especially if there are a few of them. Try outlining strokes, and/or combining shapes with the same colours into compound paths in Adobe Illustrator before working with SVGX and VScode.
SVGX is showing a blank preview when I open my VScode edited SVG.
Test the paths by declaring a fill, like so.
<path fill="#41B59D" d="M22 11.8h-3.6V13h3l5.5 8.3h1.4z"/>
If you’re making an SVG that needs to be dynamically recoloured, remember to remove the fills after the preview looks good.
SVGX looks fine, but when I import into Iconset, it just shows a black square/circle/shape.
There may be an additional invisible bounding box / path from the original SVG, which is now being filled, and resulting in a black square/circle/shape. Either locate the invisible path in the SVG code and delete it (this can be hard), or delete the invisible path in Adobe Illustrator, and try again.
