Photon icons for thunderbird
If you'd like to contribute SVG assets to Firefox, this is meant to be a handy guide for making sure you SVGs are compressed and neatly formatted as possible 🎉
Since so many of our SVGs appear so small, designing them on the pixel grid will help them not appear fuzzy when theyre sized down to 16x16 pixels.
For Illustrator youll want the following settings:
Units: pixels
, Advanced
> check Align New Objects to Pixel Grid
Transform
> Advanced
> check Align to Pixel Grid
You can get a more detailed breakdown with images here.
You can download a sample Illustrator file here.
When youre designing your icons in a graphics editor like Adobe Illustrator, there are a lot of things you can do that will bring down the size of the file and make your SVGs easier for the developers to work with. Here are some of them:
Object
> Path
> Simplify
)The devtools panel icons do a couple of things in a specific way; following these guidelines will help stick your patch:
fill=whitesmoke
in the <svg>
tag.Sketch vector work is a little different but the fundamentals (keeping your SVG small, expanding all paths) is the same. Here's what we've found helps to build clean icons:
Build your icon at 16x16 with the Pixel Grid turned on. You can turn the pixel grid on at View > Canvas > Show Pixels
Make sure that all x/y coordinates are full pixels for lines/rectangles. Sub-pixels = not on pixel grid.
Expand all your paths so strokes expand properly as SVG gets resized. You can do this at Layer > Paths > Vectorize Stroke
.
Align anything that isn't boxy to the pixel grid with item selected then Layer > Round to Nearest Pixel Edge
.
If youre using a design tool that isnt listed here and youd like to add the instructions for how to expand paths, simplify paths, expand strokes, etc., please open a PR! Wed super appreciate it + youd be the best 💯
The executable for cleaning svgs can be found here. Its corresponding header can be found here.
clean-svg
executable | header.txt
npm install -g svgo
(Installation instructions for Node can be found here.)header.txt
to usr/local/bin
.chmod 755 clean-svg
.cd icons
and then run clean-svg
We have a bunch of things we'd like to include for version 1.0; feel free to take a look at everything in milestone 1 and take a crack at any of them.