Cette page documente un guide de développement de MediaWiki, construit au fil du temps par consensus des développeurs (ou parfois simplement par un des développeurs principaux)

Cette page décrit les conventions de codage utilisées pour les fichiers de la base de code MediaWiki écrits en SVG. Voir aussi les conventions générales qui s'appliquent à tous les langages de programmation et de balisage, y compris SVG.

Nous utilisons SVGO comme outil d'optimisation, voir l'optimisation automatisée ci-dessous.

Structure du code 

Avoir un code minimal avec une lisibilité maximale est le premier objectif.

Exemple de fichier optimisé simple – subtract.svg de OOUI :

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
	<title>
		subtract
	</title>
	<path d="M4 9h12v2H4z"/>
</svg>

Pour les minimalistes, vous pouvez dessiner exactement la même chose avec

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
    <path d="m4,9h12v2H4"/>
</svg>

Exemple pour un fichier légèrement plus complexe et optimisé – modèle de capture d'écran BetaFeatures :

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="264" height="162" viewBox="0 0 264 162">
    <title>
        BetaFeatures screenshot template
    </title>
    <defs>
        <clipPath id="jagged-edge">
            <path d="M0 0v152l12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10 12 10 12-10V0z"/>
        </clipPath>
    </defs>
    <g fill="#eaecf0" clip-path="url(#jagged-edge)">
        <path id="background" fill="#fff" d="M0 0h264v162H0"/>
        <path id="logo" d="M11 22c0-8 6-14 14-14s14 6 14 14-6 14-14 14-14-6-14-14M38 45v-5H13v5h25"/>
        <path id="sidebar" d="M38 163V58H13v106h25"/>
        <path id="personal-tools" d="M233 5h26v6h-26V5zM209 5h22v6h-22zM185 5h22v6h-22zM162 5h13v6h-13zM177 5h6v6h-6zM154 5h6v6h-6z"/>
        <path id="search-input" d="M258 16v4h-92v-4h92m1-1h-94v6h94v-6z"/>
        <path id="search-icon" d="M168 17h2v2h-2z"/>
        <path id="article" d="M252 162V29H48v133z"/>
        <path id="border" d="M0 0v162h264V0zm1 1h262v150.533l-11 9.166-12-10-12 10-12-10-12 10-12-10-12 10-12-10-12 10-12-10-12 10-12-10-12 10-12-10-12 10-12-10-12 10-12-10-12 10-12-10-12 10-11-9z"/>
    </g>
</svg>

Nous expliquerons les différentes conventions de codage dans la section suivante.

Optimisation automatisée (SVGO)

SVGO a été maintenu par Kir Belevich (depsweet^[1]) et Lev Solntsev (GreLI^[2]) de août 2012^[3] à 2016^[4][5] et depuis 2021 par Bogdan Chadkin (TrySound^[6]).

/**
 * SVGO Configuration
 * Compatible to v3.0.0+
 * Options recommandées de :
 * https://www.mediawiki.org/wiki/Manual:Coding_conventions/SVG#Exemplified_safe_configuration
 */

'use strict';

module.exports = {
	plugins: [
		{
			// Set of built-in plugins enabled by default.
			name: 'preset-default',
			params: {
				overrides: {
					cleanupIds: false,
					removeDesc: false,
					removeTitle: false,
					removeViewBox: false,
					// Si le fichier SVG ne commence pas par une déclaration XML, son type MIME sera détecté comme étant ''text/plain'' plutôt que ''image/svg+xml'' par libmagic et, par conséquent la réduction CSS CSSMin de MediaWiki.
					// La base de données par défaut de libmagic exige actuellement que les SVG contiennent une déclaration XML :
					// https://github.com/threatstack/libmagic/blob/master/magic/Magdir/sgml#L5
					removeXMLProcInst: false // https://phabricator.wikimedia.org/T327446
					convertPathData: false // https://github.com/svg/svgo/issues/880 https://github.com/svg/svgo/issues/1487
					removeMetadata: false // Copyright-Violation
					removeHiddenElems: false // source for converted text2path
					removeUnknownsAndDefaults: false // removes Flow-Text: https://commons.wikimedia.org/wiki/User:JoKalliauer/RepairFlowRoot
					cleanupNumericValues: false // https://github.com/svg/svgo/issues/1080
					minifyStyles: false //https://github.com/svg/svgo/issues/888
					removeComments: false //reduces readability
					removeEditorsNSData: false // https://github.com/svg/svgo/issues/1096
					collapseGroups: false // https://github.com/svg/svgo/issues/1057
					removeOffCanvasPaths: false //https://github.com/svg/svgo/issues/1732
					removeEmptyContainers: false // https://github.com/svg/svgo/issues/1194 https://github.com/svg/svgo/issues/1618
					convertTransform: fasle // https://github.com/svg/svgo/issues/988 https://github.com/svg/svgo/issues/1021
					cleanupNumericValues: false // https://github.com/svg/svgo/issues/1080
					inlineStyles: false // https://github.com/svg/svgo/issues/1486
				}
			}
		},
		'removeRasterImages',
		'sortAttrs'
	],
	// Set whitespace according to Wikimedia Coding Conventions.
	// @see https://github.com/svg/svgo/blob/main/lib/stringifier.js#L39 for available options.
	js2svg: {
		eol: 'lf',
		finalNewline: true,
		// Configurer les indentations en tabulations (4 espaces par défaut) utilisées par ''--pretty'' ici.
		indent: "\t",
		pretty: true
	},
	multipass: true
}

svgmin: {
	options: {
		js2svg: {
			indent: '\t',
			pretty: true
		},
		plugins: [ {
			cleanupIDs: false
		}, {
			removeDesc: false
		}, {
			removeRasterImages: true
		}, {
			removeTitle: false
		}, {
			removeViewBox: false
		}, {
			removeXMLProcInst: false
		}, {
			sortAttrs: true
		}, {
			convertPathData: false // https://github.com/svg/svgo/issues/880
		}, {
			removeMetadata: false // Copyright-Violation
		}, {
			removeHiddenElems: false // source for converted text2path
		}, {
			removeUnknownsAndDefaults: false // removes Flow-Text
		}, {
			cleanupNumericValues: false // https://github.com/svg/svgo/issues/1080
		}, {
			minifyStyles: false //https://github.com/svg/svgo/issues/888
		}, {
			removeComments: false //reduces readability
		}, {
			removeEditorsNSData: false // https://github.com/svg/svgo/issues/1096
		}, {
			collapseGroups: false // https://github.com/svg/svgo/issues/1057
		}, {
			removeOffCanvasPaths: false //https://github.com/svg/svgo/issues/1732
		}, {
			removeEmptyContainers:false // https://github.com/svg/svgo/issues/1194 https://github.com/svg/svgo/issues/1618
		}, {
			convertTransform: fasle // https://github.com/svg/svgo/issues/988 https://github.com/svg/svgo/issues/1021
		}, {
			cleanupNumericValues: false // https://github.com/svg/svgo/issues/1080
		}, {
			inlineStyles: false // https://github.com/svg/svgo/issues/1486
		} ]
	}
}

Optimisation manuelle

Au-delà de l'optimisation automatisée des SVG, plusieurs étapes sont à considérer :

• garder le code xml:space="preserve", <!--, <title, \n, \r, \t, <g, visibility="hidden", opacity="0", display="none", requiredFeatures=", <?xml version="1.0" encoding="UTF-8"?>, ‎<defs>, <rect, <style type="text/css", class=", data-name=, inkscape:label, <rdf:RDF, aria-label=, <inkscape:grid, <sodipodi:guide, sodipodi:cx=, sodipodi:cy=, sodipodi:rx=, sodipodi:ry=, sodipodi:type="arc", vector-effect=, inkscape:groupmode="layer", inkscape:label=, sodipodi:role="line" suivant, voir c:Help:SVG guideline
• Supprimer standalone="no" de l'instruction de traitement XML car elle est par défaut.
• Mettre en minuscules (pour une meilleure compression gzip) et raccourcir les valeurs de couleur hexadécimales si possible, par exemple #fff au lieu de #FFFFFF.
• Les attributs qui sont les mêmes pour un groupe d'éléments peuvent être appliqués à un parent commun ‎<g> à la place, ou parfois même spécifiés par l'instruction <svg (voir par exemple : CHE Bettens COA.svg).
  Ceci pourrait réduire la possibilité de modifier ou de lire
• S'appuyer sur les valeurs par défaut comme fill="#000" et stroke-width="1".
• La syntaxe de <path d="…"/> est presque toujours plus courte que la syntaxe des formes de base comme ‎<polygon> ou même ‎<rect>, cependant ‎<circle>, ‎<ellipse>, ‎<rect> sont généralement plus faciles à lire ou à éditer, donc il est généralement préférable d'utiliser des formes plus spécifiques.
• Fusionner les éléments <path d="…"/> où c'est possible. Ne faites pas cela si les deux chemins doivent être modifiés séparément.
• Ne supprimez pas l'attribut ry="…" redondant quand il est identique à rx="…" il devient plus difficile à lire ou à modifier.
• Supprimer les fill-rule="…" et clip-rule="…" inutiles. Ces règles n'ont d'effet que sur certains chemins, par exemple lorsqu'un chemin se recoupe.
• Voir les erreurs d'arrondi IEEE comme 0.999999998 ou 1.000000003. Ces numéros occupent de la place sans fournir réellement d'informations supplémentaires. Ils peuvent presque toujours être supprimés sans rien changer visuellement.
• Travaillez avec une grille de pixels non fractionnée pendant le dessin et alignez un maximum de points possibles sur cette grille. Ces points ont une chance beaucoup plus grande d'être représentés par de petits nombres entiers dans le code résultant.
• Choisissez une grille non fractionnée pour que celle-ci corresponde aux caractéristiques d'une image existante, et redimensionnez ou redessinez les formes afin que le plus de points possible se retrouvent sur la grille. Le résultat peut ne pas être aligné et vous pouvez le couper en utilisant viewBox="<gauche(left)> <haut(top)> <largeur(width)> <hauteur(height)>".

Si vous voulez creuser un peu plus le sujet, il existe d'autres optimisations pour compresser la diffusion telles que :

• reboucler les chemins (en supprimant z pour certaines formes),
• utiliser les commandes relatives lorsque vous créez les chemins (au lieu des commandes absolues, par exemple "m" pour "move by", au lieu de "M" pour "move to"),
• optimiser pour compresser les références arrière

Autres outils

Autres outils qu'il est intéressant de connaître :

1. SvgWorkAroundBot
2. SVGOMG
3. scour
4. svgcleaner
5. voir Comment optimiser le SVG pour d'autres options.

Références