Technical Notes

Technical Notes

Supported Environments

La Capitaine is an SVG icon theme for modern desktop environments including GNOME, MATE, KDE, XFCE and Budgie.

La Capitaine does not support older environments that do not support SVG themes properly. Environments like Windowmaker are known not to display icons correctly without the icons being rasterized in advance. In the future, a script may be provided to rasterize the SVGs to various appropriate sizes, but at the moment this is beyond the scope of this project. If you insist on using an unsupported environment, you'll have to rasterize these images yourself and write a new theme index. This is possible using Inkscape.

If you've come here asking for support on Windows machines, you're out of luck. It may be possible to use this on a Mac, but I honestly have no idea.

Good SVG Markup Practices

Design to the SVG Tiny 1.2 as supported by Qt.

Make note that ClipPaths of non-rect shapes are not supported by this standard.

Clean up and simplify mark-up

If you are using Inkscape to create your SVG files, there will be a lot of unnecessary meta-data saved in the output file after you save. You are expected to:

• Remove <metadata> and everything in it.
• Remove viewBox in the opening <svg> tag (viewBox shouldn't be needed for icons).
• Remove unneeded id attributes in defs, stop, path, circ, rect, etc.
• Remove unneeded stroke-opacity, stroke, fill-opacity, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-dasharray, etc.
• Remove any unneeded <g> elements.
• Remove unneeded transform attributes.
• Simplify SVG markup
  • Colour codes that can be represented with the 3-digit notation should be used when possible. i.e. Change all #RRGGBB to read as #RGB.
• Change CSS style attributes to XML attributes (eg. style="fill:#FF0" to fill="#FF0").
• If possible, use objectBoundingBox (default) instead of userSpaceOnUse for gradient units.
• If possible, redraw path using circle, polyline, rect, or polygon.
• If possible, manually write path shapes.
• If possible, make widths, heights, positions into integers or round to nearest 0.5 or 0.25 to keep everything consistent, symmetrical and generally nice.
  • Do not do this if it adversely affects the design of the icon (this should be rare)

Automating SVG clean-up

While contributors are expected to follow the design best practises as outlined above, to minimize the chance of manual errors correcting mark-up, you may wish to use existing tools to speed up the process of icon creation. Before you submit a new icon, you should either perform the entire manual process above, or make use of svgcleaner and tidy as described below.

svgcleaner is a utility to remove extraneous data, and simplify SVG files. You can install it by running the following (or equivalent for your system):

sudo dnf install rust cargo
cargo install svgcleaner

tidy is a utility that formats XML, HTML, and XHTML documents into a readable, unobfuscated, consistent style. Install it by running the following (or equivalent for your system):

sudo dnf install tidy

Once you have both utilities, you can clean and format your SVG files as follows:

svgcleaner MYFILE.svg MYFILE.svg
tidy -q -xml -indent -wrap 0 -m MYFILE.svg

Please manually verify that the file renders correctly after you have finished processing it.