Le problème des bordures

Inkscape permet de travailler de manière parfaitement précise puisqu'il manipule des coordonnées, ce qui vous permet de régler vos graphismes au pixel près.

Que vous soyez consciencieux ou travailliez pour des interfaces graphiques où les dimensions doivent être réglées très précisément, l'utilisation des bordures d'Inkscape peut poser problème.

Admettons, pour l'exemple, que vous souhaitiez créer un carré de 8 pixels entouré d'une bordure de 1 pixel, pour une largeur totale de 10 pixels.

Vous pourriez intuitivement pour ce faire créer votre carré, l'ajuster de telle sorte qu'il fasse 8 pixels, puis rajouter une bordure de 1 pixels.

En réalité, si vous suivez cette méthode, le carré total fait maintenant 9 pixels de large, et le carré intérieur ne fait plus que 7 pixels de large.

La raison en est la suivante :

image.png

Dans Inkscape, la bordure s'étend autour du contour de la forme. De fait, elle dépasse à la fois sur l'extérieur et l'intérieur de la forme. Dans notre cas, choisir 1 pixel d'épaisseur créer une bordure qui dépasse de 0.5 pixel de chaque côté, et qui recouvre la forme intérieure de 0.5 pixel de chaque côté. Ainsi, à partir du carré initial de 8 pixel, nous rajoutons 0.5 pixel de chaque côté, ce qui fait 9 pixels au lieu des 10 que nous souhaitions. De même pour la forme intérieur qui est maintenant recouverte.

Il serait possible de simplement reprendre notre forme et la redimensionner, ce qui permettrait de l'agrandir jusqu'à 10 pixels de côté. Malheureusement, cela agrandirait également le contour proportionnellement, qui ferait alors plus d'1 pixel de large.


Deux méthodes sont possibles afin de contourner le problème.

La première est de recalculer nos dimensions pour prendre en compte comment l'algorithme d'Inkscape gère le positionnement des bordures. Dans notre cas, il faudrait créer un carré de 9 pixels de large, puis lui rajouter un contour d'1 pixel, afin d'obtenir les bonnes dimensions.

L'autre méthode, plus lente mais plus facile à manipuler, serait en fait de ne pas utiliser le contour d'Inkscape, et de créer un premier carré de 10 pixels de côté de la couleur de notre bordure, puis un carré de 8 pixels de côté de la couleur de fond, puis de centrer celui-ci, afin de simuler l'effet de bordure.


Revision #2
Created 2 August 2023 15:12:34 by Rachelle
Updated 2 August 2023 16:34:44 by Rachelle