Guidelines and HOWTOs/Icon Workflow Tips: Difference between revisions

From KDE Community Wiki
(Move montage info to bottom & add package name)
(Add Making Icons section, reformat code blocks.)
Line 1: Line 1:
== Making icons ==
Make sure you have read https://hig.kde.org/style/icon.html
=== Applications ===
Don't use proprietary software like Adobe Illustrator, Gravit Designer or Figma. All of our icons are made with Inkscape, but as long as your SVG editor is free, open source, compatible with Inkscape and compatible with the Qt SVG renderer, it should be OK to use.
=== Canvas ===
Make sure you always use a canvas that matches the size you're using for the icon (e.g., 48x48 px instead of 210x297 mm). In Inkscape, you can change the canvas size by going to <menuchoice>File -> Document Properties...</menuchoice> or <keycap>Ctrl + Shift + D</keycap>
=== Grid ===
A grid can be extremely useful for making icons that appear sharp instead of blurry or faded. When making icons, a grid with 1 px of space between each line is generally ideal. In Inkscape, you can modify the grid settings by going to <menuchoice>File -> Document Properties... -> Grids</menuchoice>. You can toggle the grid on and off with <keycap>Shift + 3</keycap> (US Keyboard layout) or <keycap>#</keycap>.
If you are making strokes with the Line tool in Inkscape (<keycap>Shift + F6</keycap>), it is useful to use a spacing of 0.5 px and a major grid line every 2 lines. Strokes are centered on the points where you create them, so they would appear between pixels if you used a 1px grid spacing.
== SVG optimization ==
== SVG optimization ==


Line 9: Line 27:
Put this somewhere that will be loaded by your shell:
Put this somewhere that will be loaded by your shell:


<syntaxhighlight lang="Bash">
{{Input|<syntaxhighlight lang="Bash">
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-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"
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"
</syntaxhighlight>
</syntaxhighlight>}}


For icons with stylesheets (mostly monochrome icons):
For icons with stylesheets (mostly monochrome icons):


<syntaxhighlight lang="Bash">
{{Input|1=<nowiki>
scour-mono input.svg output.svg
scour-mono input.svg output.svg
mv output.svg input.svg
mv output.svg input.svg
</syntaxhighlight>
</nowiki>}}


For icons with no stylesheets (mostly color icons):
For icons with no stylesheets (mostly color icons):


<syntaxhighlight lang="Bash">
{{Input|1=<nowiki>
scour-color input.svg output.svg
scour-color input.svg output.svg
mv output.svg input.svg
mv output.svg input.svg
</syntaxhighlight>
</nowiki>}}


=== SVG Cleaner ===
=== SVG Cleaner ===
Line 37: Line 55:
For icons with stylesheets (mostly monochrome icons):
For icons with stylesheets (mostly monochrome icons):


<syntaxhighlight lang="Bash">
{{Input|1=<nowiki>
svgcleaner icon-name.svg icon-name.svg --indent=4 --allow-bigger-file
svgcleaner icon-name.svg icon-name.svg --indent=4 --allow-bigger-file
</syntaxhighlight>
</nowiki>}}


For icons with no stylesheets (mostly color icons):
For icons with no stylesheets (mostly color icons):


<syntaxhighlight lang="Bash">
{{Input|1=<nowiki>
svgcleaner icon-name.svg icon-name.svg
svgcleaner icon-name.svg icon-name.svg
</syntaxhighlight>
</nowiki>}}


=== SVGO ===
=== SVGO ===
Line 53: Line 71:
Currently available in no distro repositories, but you can install it from Node Package Manager (<code>npm</code>) with this:
Currently available in no distro repositories, but you can install it from Node Package Manager (<code>npm</code>) with this:


<syntaxhighlight lang="Bash">
{{Input|1=<nowiki>
sudo npm install -g svgo
sudo npm install -g svgo
</syntaxhighlight>
</nowiki>}}


It will strip stylesheets, so add those last.
It will strip stylesheets, so add those last.
Line 61: Line 79:
For icons with stylesheets (mostly monochrome icons):
For icons with stylesheets (mostly monochrome icons):


<syntaxhighlight lang="Bash">
{{Input|1=<nowiki>
svgo --pretty icon-name.svg
svgo --pretty icon-name.svg
</syntaxhighlight>
</nowiki>}}


For icons with no stylesheets (mostly color icons):
For icons with no stylesheets (mostly color icons):


<syntaxhighlight lang="Bash">
{{Input|1=<nowiki>
svgo icon-name.svg
svgo icon-name.svg
</syntaxhighlight>
</nowiki>}}


=== Misc comments about SVG optimizers ===
=== Misc comments about SVG optimizers ===
Line 79: Line 97:
Put this somewhere that will be loaded by your shell:
Put this somewhere that will be loaded by your shell:


<syntaxhighlight lang="Bash">
{{Input|<syntaxhighlight lang="Bash">
#These will replace hardcoded colors with the appropriate class and currentColor fill for stylesheet compatibility
#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
# Made for people who do Breeze 1st and Breeze Dark 2nd
Line 95: Line 113:
# Convert Breeze Dark icon with stylesheet to Breeze. ColorScheme-Text only
# Convert Breeze Dark icon with stylesheet to Breeze. ColorScheme-Text only
alias sed-breeze="sed --follow-symlinks -i 's/color:#eff0f1/color:#232629/'"
alias sed-breeze="sed --follow-symlinks -i 's/color:#eff0f1/color:#232629/'"
</syntaxhighlight>
</syntaxhighlight>}}


Usage:
Usage:


<syntaxhighlight lang="Bash">
{{Input|1=<nowiki>
sed-Text an-icon.svg
sed-Text an-icon.svg
sed-Text *wild*cards*work*
sed-Text *wild*cards*work*
</syntaxhighlight>
</nowiki>}}


=== Stylesheets ===
=== Stylesheets ===
Line 110: Line 128:
Most monochrome icons will only need this much:
Most monochrome icons will only need this much:


<syntaxhighlight lang="XML">
{{Input|<syntaxhighlight lang="XML">
     <style
     <style
         type="text/css"
         type="text/css"
Line 118: Line 136:
         }
         }
     </style>
     </style>
</syntaxhighlight>
</syntaxhighlight>}}


==== Breeze ====
==== Breeze ====


<syntaxhighlight lang="XML">
{{Input|<syntaxhighlight lang="XML">
     <style
     <style
         type="text/css"
         type="text/css"
Line 148: Line 166:
         }
         }
     </style>
     </style>
</syntaxhighlight>
</syntaxhighlight>}}


==== Breeze Dark ====
==== Breeze Dark ====


<syntaxhighlight lang="XML">
{{Input|<syntaxhighlight lang="XML">
     <style
     <style
         type="text/css"
         type="text/css"
Line 178: Line 196:
         }
         }
     </style>
     </style>
</syntaxhighlight>
</syntaxhighlight>}}


The only differences are Text, Background and ViewBackground.
The only differences are Text, Background and ViewBackground.
Line 188: Line 206:
Put this somewhere that will be loaded by your shell:
Put this somewhere that will be loaded by your shell:


<syntaxhighlight lang="Bash">
{{Input|<syntaxhighlight lang="Bash">
alias montage-breeze="montage -density 96x96 -fill '#232629' -label '%t' -background '#eff0f1'" # Background color
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-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-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
alias montage-breeze-dark2="montage -density 96x96 -fill '#eff0f1' -label '%t' -background '#232629'" # ViewBackground color
</syntaxhighlight>
</syntaxhighlight>}}


Usage:
Usage:


<syntaxhighlight lang="Bash">
{{Input|1=<nowiki>
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
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
</syntaxhighlight>
</nowiki>}}

Revision as of 19:11, 22 March 2019

Making icons

Make sure you have read https://hig.kde.org/style/icon.html

Applications

Don't use proprietary software like Adobe Illustrator, Gravit Designer or Figma. All of our icons are made with Inkscape, but as long as your SVG editor is free, open source, compatible with Inkscape and compatible with the Qt SVG renderer, it should be OK to use.

Canvas

Make sure you always use a canvas that matches the size you're using for the icon (e.g., 48x48 px instead of 210x297 mm). In Inkscape, you can change the canvas size by going to File -> Document Properties... or Ctrl + Shift + D

Grid

A grid can be extremely useful for making icons that appear sharp instead of blurry or faded. When making icons, a grid with 1 px of space between each line is generally ideal. In Inkscape, you can modify the grid settings by going to File -> Document Properties... -> Grids. You can toggle the grid on and off with Shift + 3 (US Keyboard layout) or #.

If you are making strokes with the Line tool in Inkscape (Shift + F6), it is useful to use a spacing of 0.5 px and a major grid line every 2 lines. Strokes are centered on the points where you create them, so they would appear between pixels if you used a 1px grid spacing.

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