View source for Guidelines and HOWTOs/Icon Workflow Tips

== 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 ==

=== Scour ===

* https://github.com/scour-project/scour

<code>scour</code> is available in many Linux distribution repositories. The package name is usually <code>scour</code> or <code>python-scour</code>.

Put this somewhere that will be loaded by your shell:

{{Input|<syntaxhighlight lang="Bash">
# For optimizing SVGs in the Breeze icon theme
function scour-icon {
    # Use this for icons from breeze-icons
    scour --set-precision=8 --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --remove-descriptive-elements --create-groups --strip-xml-space --strip-xml-prolog --nindent=4 $1 output.svg
    mv output.svg $1
}

# For optimizing SVGs in the the Plasma theme
function scour-theme {
    scour --set-precision=8 --enable-viewboxing --enable-comment-stripping --remove-descriptive-elements --strip-xml-space --strip-xml-prolog --nindent=4 $1 output.svg
    mv output.svg $1
}
</syntaxhighlight>}}

Usage:

{{Input|1=<nowiki>
cd [path to directory containing icon]
scour-icon [icon name]
</nowiki>}}

=== SVG Cleaner ===

* https://github.com/RazrFalcon/SVGCleaner
* https://github.com/RazrFalcon/svgcleaner-gui

Available in fewer distros, but it has a GUI if you prefer that. The package name is usually <code>svgcleaner</code> (for the CLI tool) or <code>svgcleaner-gui</code> (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 SVG is supposed to have stylesheets, add those last. Do not use for desktop themes.

Usage:

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

=== SVGO ===

* https://github.com/svg/svgo

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

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

SVGO can be set to preserve stylesheets, but it will still strip <code>type="text/css"</code>, which is wrong. This command will strip stylesheets, so add those last. Do not use for desktop themes.

Usage:

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

=== Misc comments about SVG optimizers ===

If you combine them, you can get a more thorough cleaning. I usually use SVG Cleaner and then SVGO for icons. 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:

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

Usage:

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

=== Stylesheets ===

Only include the color classes you will actually use.

Most monochrome icons will only need this much:

{{Input|<syntaxhighlight lang="XML">
    <style type="text/css" id="current-color-scheme">
        .ColorScheme-Text {
            color:#232629;
        }
    </style>
</syntaxhighlight>}}

==== Breeze ====

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

==== Breeze Dark ====

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

The only differences are Text, Background and ViewBackground.

== Icon compilation images ==

<code>montage</code> can be used to make compilations of all your icons quickly. The package name is usually <code>ImageMagick</code> or <code>imagemagick</code>.

Put this somewhere that will be loaded by your shell:

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

Usage:

{{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
</nowiki>}}