Manual:Coding conventions/SVG

This page describes the coding conventions used within files of the MediaWiki codebase written in SVG. See also the general conventions that apply to all programming & markup languages, including SVG.

On per-project base we make use of SVGO as optimisation tool, see automated optimisation below. Another helpful tool for further manual optimisation is SVGOMG. It provides a visual before/after comparison.

Code structure
Minimal code as possible with readability in mind is the premise.

Example for simple optimised file – subtract.svg from OOUI: Example for slightly more complex, optimised file – BetaFeatures screenshot template: We will explain the different coding conventions in the following section.

Automated optimisation (SVGO)
A standards set of conventions can be enforced by help of SVGO. If your original SVGs are well-formed, you should be able to automatically optimise them. As some SVGO v1.x plugins (options) might result in unexpected appearance with more complex SVGs, we differentiate between safe, considerably less-safe and unsafe plugins. With latter it's recommended to involve per-file quality assurance.

Safe plugins:

Mentioning only plugins, that are changed from default setting or that might be counter-intuitive: See SVGO Readme for other enabled, safe plugins.
 * Sorting attributes ('sortAttrs' – set to enabled; disabled by default)
 * Remove DOCTYPE ('removeDoctype' – using a DOCTYPE in SVGs is considered harmful by SVG standards authors as of SVG 2 Working Draft; enabled by default)
 * Remove or cleanup  attribute when possible ('cleanupEnableBackground' – deprecated attribute, only supported by IE/Edge; enabled by default)

Plugins to consider carefully: Unsafe rules to disable (don't use!):
 * Round/rewrite number lists ('convertPathData' – can cause imprecise rendering; enabled by default)
 * Remove unused and minify used IDs ('cleanupIDs' – might negatively affect readability in more complex SVGs; enabled by default)
 * Remove raster images ('removeRasterImages' – as general rule dangerous; disabled by default)
 * Remove XML processing instructions, aka XML declaration  ('removeXMLProcInst' – issues when viewed as standalone file in some editors, also possible issues with MIME type interpretation; enabled by default)
 * Remove  ('removeTitle' – problematic for accessibility reasons; enabled by default)
 * Remove  ('removeDesc' – problematic for accessibility reasons; enabled by default)
 * Remove  attribute ('removeViewBox' – results in troublesome appearance in some browsers, therefore both,  /  and   should be featured; enabled by default)
 * Remove dimensions /  when   is available ('removeDimensions' – as above; disabled by default anyways)

Exemplified safe configuration (Gruntfile.js)
svgmin: { options: { js2svg: { indent: '\t', pretty: true },		plugins: [ { cleanupIDs: false }, {			removeDesc: false }, {			removeRasterImages: true }, {			removeTitle: false }, {			removeViewBox: false }, {			removeXMLProcInst: false }, {			sortAttrs: true } ]	}, }

Manual optimisation
Beyond automated optimising SVGs there are further steps to consider: If you want to dig even deeper, there are more more optimisations to compress delivery, such as: that might save some extra bytes depending on what it's worth.
 * Remove  from XML processing instruction, as it's default
 * Remove  attribute from   tag, as all browsers ignore it
 * Lowercase (for better gzipping) and shorten hex color values –  over
 * Merging paths  where applicable
 * Paths are preferable over certain SVG shapes like  or
 * auto-closing paths (aka removing  for certain shapes),
 * use relative commands when creating paths (instead absolute commands, e.g. "m" for "move by", instead of "M" for "move to"),
 * optimising for compression backreferences