Votre logo etire : le seul defaut qui ne se voit pas sur l’ecran de celui qui le commet

Votre logo étiré : le seul défaut qui ne se voit pas sur l’écran de celui qui le commet

Il y a une catégorie de dégât que personne ne rattrape à temps, parce qu’elle ne déclenche aucun signal. Le fichier n’est pas flou. Il ne pixelise pas. Il ne pèse pas trop lourd. Il ne refuse pas de s’ouvrir. Il est simplement quelques pour cent plus large qu’il ne devrait l’être, et il part comme ça chez l’imprimeur, sur la façade, sur le côté du camion, dans les cinq cents pochettes de présentation.

L’étirement d’un logo est le défaut le plus fréquent et le moins signalé de tous, et la raison tient en une phrase : tous les réflexes de vérification que vous avez appris portent sur la netteté, et l’étirement ne touche pas à la netteté.

Voici où la déformation se produit réellement, pourquoi elle échappe à l’œil de la personne qui la commet, et comment la repérer en dix secondes sur n’importe quel support.

Ce que ce guide ne refait pas

Trois sujets voisins sont déjà traités ailleurs et il n’y a aucune raison de les redire ici.

Les règles d’usage d’un logo, c’est-à-dire l’espace à réserver autour de lui et la taille en dessous de laquelle il ne doit plus descendre, font l’objet d’un contenu à part entière. Ce guide ne les redéveloppe pas et ne discute pas non plus de la raison de principe pour laquelle il ne faut pas déformer une marque. Cette raison est admise ici dès la première ligne. Ce qui nous occupe est le mécanisme, pas la règle.

La perte de qualité à l’agrandissement est un tout autre phénomène, traité dans un article dédié que vous trouverez dans le maillage. Il porte sur la définition d’une image. L’étirement, lui, ne fait perdre aucune définition, et c’est précisément ce qui le rend dangereux.

Le comparatif des formats de fichiers est écrit ailleurs. Aucun format ne protège de l’étirement, comme la suite le montre.

Étirer et agrandir ne sont pas le même geste, et un seul des deux se voit

Quand on agrandit trop une image faite de pixels, le résultat s’abîme visiblement. Les contours se crénellent, les aplats se marbrent, le texte devient laiteux. Personne n’a besoin qu’on lui explique le problème : il saute aux yeux. C’est le sujet de tout un pan de la vectorisation.

L’étirement ne fait rien de tel. Il conserve chaque détail intact et se contente de changer le rapport entre la largeur et la hauteur. Un logo vectoriel étiré de douze pour cent reste parfaitement net à n’importe quel format, jusque sur une enseigne de six mètres. Il est net et il est faux.

C’est pour cela que le contrôle qualité habituel ne l’attrape jamais. On zoome, on constate que c’est propre, on approuve. Le test du zoom, qui est le bon réflexe pour diagnostiquer un fichier pixelisé, donne ici un faux négatif parfait.

Le format le plus répandu du web prévoit explicitement le mode déformant

Ce n’est pas un accident de logiciel, et c’est utile de le savoir avant d’accuser quelqu’un.

La spécification SVG du W3C définit un attribut, preserveAspectRatio, qui décide de ce qui arrive quand la proportion du dessin ne correspond pas à celle de la zone où on le place. Sa valeur par défaut préserve la proportion : la spécification décrit ce comportement comme le fait de mettre à l’échelle de manière à conserver le rapport largeur-hauteur, en veillant à ce que l’intégralité du viewBox reste visible à l’intérieur de la fenêtre d’affichage SVG.

Mais la même spécification prévoit une valeur nommée none, dont la définition est sans ambiguïté : elle indique de ne pas forcer une mise à l’échelle uniforme, et d’étirer le contenu graphique de l’élément de façon non uniforme si nécessaire, de sorte que sa boîte englobante corresponde exactement au rectangle de la fenêtre d’affichage SVG.

Traduit en langage de tous les jours : le format contient une option officielle qui dit « remplis la case, quitte à déformer ». Cette option existe pour de bonnes raisons techniques, et elle se retrouve inscrite dans des gabarits de sites web, des exports automatisés et des composants d’interface où personne ne pensait au logo au moment de la choisir. Votre logo hérite alors d’une décision prise avant lui.

La conséquence pratique est contre-intuitive et elle mérite d’être retenue : livrer un SVG impeccable ne garantit rien du tout sur son affichage. La proportion se perd à la pose, pas au dessin.

Les cinq endroits où l’étirement se produit vraiment

Il ne se produit presque jamais chez le graphiste. Il se produit après, et toujours aux mêmes cinq endroits.

Dans un document de bureautique, quand quelqu’un attrape l’image par une poignée de côté au lieu d’une poignée de coin. La documentation de Microsoft est explicite sur le geste correct : pour conserver les proportions, il faut maintenir la touche Maj enfoncée en faisant glisser une poignée de redimensionnement d’un coin. Elle décrit aussi la case à cocher qui gouverne le comportement, en précisant que si vous n’arrivez pas à modifier la hauteur et la largeur indépendamment, c’est que la case de verrouillage des proportions doit être décochée. Autrement dit, le logiciel protège vos proportions par défaut, et la déformation demande un geste délibéré, souvent commis sans le savoir par quelqu’un qui a simplement décoché une case un jour pour autre chose.

Dans un gabarit de site web ou de courriel, quand le logo est déposé dans un emplacement dont la hauteur et la largeur sont toutes deux imposées. C’est le cas de la valeur none décrit plus haut, et c’est le plus fréquent des cinq.

Sur une plateforme qui impose un cadre carré à un logo qui ne l’est pas. Ici, l’étirement est le mauvais choix parmi deux mauvais choix, l’autre étant le rognage. La bonne réponse n’est ni l’un ni l’autre, c’est une version conçue pour le carré, ce qui est exactement l’objet des trois versions d’un logo.

Chez un fournisseur qui doit remplir une zone d’impression fixe, sur un objet promotionnel, un vêtement brodé ou un panneau dont la surface utile est donnée d’avance. La déformation y est parfois faite de bonne foi pour occuper la zone payée.

Sur un écran de diffusion mal configuré, où c’est toute l’image qui est étirée et pas seulement le logo. Ce cas est le seul des cinq qui ne laisse aucune trace dans un fichier, ce qui le rend impossible à diagnostiquer après coup.

Le repérer en dix secondes, sans logiciel et sans le fichier d’origine

Trois tests, du plus rapide au plus fiable. Aucun ne demande d’installer quoi que ce soit.

Le test de la forme ronde. Si votre logo contient un cercle, un point, une lettre O ou une contreforme arrondie, c’est votre instrument de mesure. Un cercle étiré devient un ovale, et l’œil humain détecte un ovale beaucoup mieux qu’il ne détecte une largeur anormale. Regardez la forme ronde, pas l’ensemble.

Le test de l’épaisseur des traits. C’est le plus fiable, et presque personne ne le connaît. Dans un étirement horizontal, les traits verticaux du dessin s’épaississent, alors que les traits horizontaux conservent exactement leur épaisseur d’origine. Un logo correct présente donc un rapport constant entre les deux, et un logo étiré présente des verticales visiblement plus grasses que ses horizontales. Sur un lettrage, cela se lit sur les jambages des lettres. C’est le test qui fonctionne même quand vous n’avez rien pour comparer.

Le test de superposition. Si vous avez encore un exemplaire de référence, une carte d’affaires ancienne ou une capture d’un support validé, mettez les deux côte à côte à la même hauteur. À hauteur égale, deux largeurs différentes signent le problème et donnent même son ampleur.

Les logos les plus à risque, et la parade à adopter

Trois caractéristiques augmentent le risque, et il vaut mieux les connaître avant de choisir un logo que de les découvrir après.

Un logo très horizontal est le plus exposé, parce qu’il ne rentre naturellement dans presque aucune des zones que les plateformes et les gabarits imposent. Chaque emplacement carré devient une occasion de le forcer.

Un lettrage à fort contraste, c’est-à-dire dont les pleins et les déliés sont très différents, trahit la déformation immédiatement mais la subit aussi plus mal, parce que le rapport entre les deux est justement ce qui fait sa personnalité.

Un logo dont le symbole est un cercle parfait est celui qui pardonne le moins, et c’est une bonne nouvelle : il se signale tout seul. La forme géométrique la plus stricte est aussi le meilleur détecteur.

Ce qu’il faut faire à la place

La règle tient en une ligne : quand un logo ne rentre pas dans une zone, on ne change pas le logo, on change de version.

C’est la raison d’être des déclinaisons horizontale, verticale et en icône. Chacune est dessinée pour un rapport de forme différent, avec les éléments repositionnés plutôt qu’écrasés. Une entreprise qui possède ses trois versions ne rencontre presque jamais le problème, parce qu’il y a toujours une version dont la proportion convient déjà.

Et quand une zone reste vraiment ingrate, la bonne réponse est d’accepter le vide autour du logo plutôt que de le remplir. Un logo qui n’occupe pas toute la case reste un logo. Un logo étiré n’en est plus un.

Le cas où il n’y a plus de retour en arrière

Il existe une situation où le problème cesse d’être une question de manipulation et devient un travail de reconstruction : quand la seule chose qui subsiste de votre logo est une version déjà déformée.

Cela arrive plus souvent qu’on ne croit. Le fichier d’origine a disparu, le concepteur n’est plus joignable, et ce qui reste est une image récupérée sur un ancien site ou photographiée sur un support existant, dont on ne sait pas si elle est à la bonne proportion. On ne peut pas corriger cela par calcul : sans référence, rien ne dit de combien il faudrait resserrer, ni dans quel sens. Toute correction serait une supposition, et une supposition figée dans un fichier vaut moins que rien.

La seule sortie propre est le redessin en vectoriel, à partir de ce qui reste et en rétablissant les proportions par les formes géométriques du dessin, les cercles redevenant des cercles et les épaisseurs de traits redevenant cohérentes. C’est un travail de reconstruction, pas de conversion automatique.

Si vous regardez votre logo depuis le début de cet article en vous demandant s’il est à la bonne largeur, faites d’abord le test de l’épaisseur des traits. S’il vous laisse un doute et que vous n’avez plus le fichier d’origine, envoyez-nous ce que vous avez : nous vous dirons ce qui peut être rétabli avant que vous ne commandiez quoi que ce soit.