Guidelines and HOWTOs/Icon Workflow Tips
SVG optimization
Scour
scour is available in many Linux distribution repositories. The package name is usually scour or python-scour.
Put this somewhere that will be loaded by your shell:
alias scour-mono="scour --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --remove-descriptive-elements --create-groups --strip-xml-space --strip-xml-prolog --nindent=4"
alias scour-color="scour --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --remove-descriptive-elements --create-groups --strip-xml-space --strip-xml-prolog --indent=none --no-line-breaks"
For icons with stylesheets (mostly monochrome icons):
scour-mono input.svg output.svg
mv output.svg input.svg
For icons with no stylesheets (mostly color icons):
scour-color input.svg output.svg
mv output.svg input.svg
SVG Cleaner
Available in fewer distros, but it has a GUI if you prefer that. The package name is usually svgcleaner (for the CLI tool) or svgcleaner-gui (for the GUI). Always double check the positions of your gradients in Inkscape if you use this program. It will always strip embedded stylesheets, so if your icon is supposed to have stylesheets, add those last.
For icons with stylesheets (mostly monochrome icons):
svgcleaner icon-name.svg icon-name.svg --indent=4 --allow-bigger-file
For icons with no stylesheets (mostly color icons):
svgcleaner icon-name.svg icon-name.svg
SVGO
Currently available in no distro repositories, but you can install it from Node Package Manager (npm) with this:
sudo npm install -g svgo
It will strip stylesheets, so add those last.
For icons with stylesheets (mostly monochrome icons):
svgo --pretty icon-name.svg
For icons with no stylesheets (mostly color icons):
svgo icon-name.svg
Misc comments about SVG optimizers
If you combine them, you can get a more thorough cleaning. I usually use SVG Cleaner and then SVGO. Scour doesn't do as good of a job for color icons, which often require more cleaning to get the size down. However, it's nice when you're editing existing monochrome icons because it doesn't strip the stylesheets.
Embedding stylesheets in SVGs
Put this somewhere that will be loaded by your shell:
#These will replace hardcoded colors with the appropriate class and currentColor fill for stylesheet compatibility
# Made for people who do Breeze 1st and Breeze Dark 2nd
# You still need to add stylesheets
alias sed-Text="sed --follow-symlinks -i 's/fill=\"#232629\"/class=\"ColorScheme-Text\" fill=\"currentColor\"/'"
alias sed-Background="sed --follow-symlinks -i 's/fill=\"#eff0f1\"/class=\"ColorScheme-Background\" fill=\"currentColor\"/'"
alias sed-ViewBackground="sed --follow-symlinks -i 's/fill=\"#fcfcfc\"/class=\"ColorScheme-ViewBackground\" fill=\"currentColor\"/'"
alias sed-Highlight="sed --follow-symlinks -i 's/fill=\"#3daee9\"/class=\"ColorScheme-Highlight\" fill=\"currentColor\"/'"
alias sed-PositiveText="sed --follow-symlinks -i 's/fill=\"#27ae60\"/class=\"ColorScheme-PositiveText\" fill=\"currentColor\"/'"
alias sed-NeutralText="sed --follow-symlinks -i 's/fill=\"#f67400\"/class=\"ColorScheme-NeutralText\" fill=\"currentColor\"/'"
alias sed-NegativeText="sed --follow-symlinks -i 's/fill=\"#da4453\"/class=\"ColorScheme-NegativeText\" fill=\"currentColor\"/'"
# Convert Breeze icon with stylesheet to Breeze Dark. ColorScheme-Text only
alias sed-breeze-dark="sed --follow-symlinks -i 's/color:#232629/color:#eff0f1/'"
# Convert Breeze Dark icon with stylesheet to Breeze. ColorScheme-Text only
alias sed-breeze="sed --follow-symlinks -i 's/color:#eff0f1/color:#232629/'"
Usage:
sed-Text an-icon.svg
sed-Text *wild*cards*work*
Stylesheets
Only include the color classes you will actually use.
Most monochrome icons will only need this much:
<style
type="text/css"
id="current-color-scheme">
.ColorScheme-Text {
color:#232629;
}
</style>
Breeze
<style
type="text/css"
id="current-color-scheme">
.ColorScheme-Text {
color:#232629;
}
.ColorScheme-Background {
color:#eff0f1;
}
.ColorScheme-ViewBackground {
color:#fcfcfc;
}
.ColorScheme-Highlight {
color:#3daee9;
}
.ColorScheme-PositiveText {
color:#27ae60;
}
.ColorScheme-NeutralText {
color:#f67400;
}
.ColorScheme-NegativeText {
color:#da4453;
}
</style>
Breeze Dark
<style
type="text/css"
id="current-color-scheme">
.ColorScheme-Text {
color:#eff0f1;
}
.ColorScheme-Background {
color:#31363b;
}
.ColorScheme-ViewBackground {
color:#232629;
}
.ColorScheme-Highlight {
color:#3daee9;
}
.ColorScheme-PositiveText {
color:#27ae60;
}
.ColorScheme-NeutralText {
color:#f67400;
}
.ColorScheme-NegativeText {
color:#da4453;
}
</style>
The only differences are Text, Background and ViewBackground.
Icon compilation images
montage can be used to make compilations of all your icons quickly. The package name is usually ImageMagick or imagemagick.
Put this somewhere that will be loaded by your shell:
alias montage-breeze="montage -density 96x96 -fill '#232629' -label '%t' -background '#eff0f1'" # Background color
alias montage-breeze2="montage -density 96x96 -fill '#232629' -label '%t' -background '#fcfcfc'" # ViewBackground color
alias montage-breeze-dark="montage -density 96x96 -fill '#eff0f1' -label '%t' -background '#31363b'" # Background color
alias montage-breeze-dark2="montage -density 96x96 -fill '#eff0f1' -label '%t' -background '#232629'" # ViewBackground color
Usage:
montage-breeze an-icon-here.svg ../an-icon-up-there.svg ../*/*wild*cards*work* montage-breeze-Background.png # The PNG at the end is the image that the command will create