issue223:inkscape
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentesRévision précédente | |||
| issue223:inkscape [2025/12/01 18:55] – d52fr | issue223:inkscape [2025/12/02 08:00] (Version actuelle) – d52fr | ||
|---|---|---|---|
| Ligne 10: | Ligne 10: | ||
| For reference, I’m using Ubuntu Mate 22.04 LTS with the Inkscape 1.4.2 AppImage file downloaded from the official Inkscape site.** | For reference, I’m using Ubuntu Mate 22.04 LTS with the Inkscape 1.4.2 AppImage file downloaded from the official Inkscape site.** | ||
| + | |||
| + | J' | ||
| + | |||
| + | La procédure comporte plusieurs étapes, que j'ai détaillées ci-dessous pour plus de clarté. Ce n'est pas particulièrement difficile, mais les différentes méthodes d' | ||
| + | ••Trouvez le répertoire de l’interface utilisateur utilisateur. | ||
| + | ••Trouvez le répertoire de l’interface utilisateur système correspondant. | ||
| + | ••Copiez le fichier CSS du modèle dans le répertoire de l’interface utilisateur utilisateur. | ||
| + | ••Modifiez le nouveau fichier et observez l’effet dans Inkscape. | ||
| + | ••Répétez l’étape 4 jusqu’à obtenir le résultat souhaité. | ||
| + | ••Vous pouvez également supprimer le fichier du répertoire de l’interface utilisateur utilisateur pour rétablir les styles par défaut. | ||
| + | |||
| + | À titre d’information, | ||
| + | |||
| **One important note, though: if all you want to do is to make the handles a bit larger, you can skip all this nonsense. The ‘Interface’ pane of the Preferences dialog (Edit > Preferences) provides a slider for precisely this purpose. The canvas updates in real time as it’s adjusted, so make sure you’ve got some handles visible, then modify this to suit your taste and needs. | **One important note, though: if all you want to do is to make the handles a bit larger, you can skip all this nonsense. The ‘Interface’ pane of the Preferences dialog (Edit > Preferences) provides a slider for precisely this purpose. The canvas updates in real time as it’s adjusted, so make sure you’ve got some handles visible, then modify this to suit your taste and needs. | ||
| Ligne 18: | Ligne 31: | ||
| To find these directories, | To find these directories, | ||
| + | |||
| + | Remarque importante : | ||
| + | |||
| + | 1. Trouver le répertoire de l' | ||
| + | |||
| + | La plupart des utilisateurs ignorent probablement qu’Inkscape offre de nombreuses options de configuration personnalisées, | ||
| + | |||
| + | Pour trouver ces répertoires, | ||
| + | |||
| **In this screenshot you can see that the majority of these subdirectories live inside ‘/ | **In this screenshot you can see that the majority of these subdirectories live inside ‘/ | ||
| Ligne 28: | Ligne 50: | ||
| Next we’re on the hunt for the ‘node-handles.css’ file in Inkscape’s system UI directory. Unfortunately for us, this directory isn’t specifically listed with an ‘Open’ button, so we’ll need to do a little more detective work. First of all, scroll down in the Preferences dialog to find the likely candidate directories – those in the ‘Inkscape data’ and ‘System data’ fields (shown below).** | Next we’re on the hunt for the ‘node-handles.css’ file in Inkscape’s system UI directory. Unfortunately for us, this directory isn’t specifically listed with an ‘Open’ button, so we’ll need to do a little more detective work. First of all, scroll down in the Preferences dialog to find the likely candidate directories – those in the ‘Inkscape data’ and ‘System data’ fields (shown below).** | ||
| + | |||
| + | Sur cette capture d' | ||
| + | |||
| + | Il y a de fortes chances que ce répertoire soit complètement vide chez vous. Dans mon cas, il contient quelques fichiers inutilisés liés à la barre d' | ||
| + | |||
| + | Laissez la fenêtre de l' | ||
| + | |||
| + | 2. Trouvez le répertoire système de l' | ||
| + | |||
| + | Nous allons maintenant rechercher le fichier « node-handles.css » dans le répertoire système de l'UI (User Interface - Interface Utilisateur) d' | ||
| + | |||
| **Note that these fields are not read-only, so you should be able to copy their contents. Starting with the ‘Inkscape data’ entry, copy the path and paste it into the URL, Location or Path field in a new file browser window. In my case this brought me to a general ‘share’ directory in the AppImage, inside of which was an ‘inkscape’ directory. Depending on how you installed Inkscape this could equally be a system-level share directory for your operating system, or somewhere else entirely. | **Note that these fields are not read-only, so you should be able to copy their contents. Starting with the ‘Inkscape data’ entry, copy the path and paste it into the URL, Location or Path field in a new file browser window. In my case this brought me to a general ‘share’ directory in the AppImage, inside of which was an ‘inkscape’ directory. Depending on how you installed Inkscape this could equally be a system-level share directory for your operating system, or somewhere else entirely. | ||
| Ligne 34: | Ligne 67: | ||
| If you’re not so lucky with the ‘Inkscape data’ entry, try again with each separate entry in the ‘System data’ field. As a last resort, you could even do a search of your whole drive for the filename. Hopefully one of these methods will yield the file we’re looking for.** | If you’re not so lucky with the ‘Inkscape data’ entry, try again with each separate entry in the ‘System data’ field. As a last resort, you could even do a search of your whole drive for the filename. Hopefully one of these methods will yield the file we’re looking for.** | ||
| + | |||
| + | Notez que ces champs ne sont pas en lecture seule ; vous pouvez donc copier leur contenu. À partir de l’entrée « Données d' | ||
| + | |||
| + | Nous recherchons un répertoire « ui » (illustré ci-dessus), qui se trouve probablement à l’intérieur d’un répertoire « inkscape ». Dans mon cas, j’ai navigué jusqu’au répertoire « inkscape » mentionné précédemment et, effectivement, | ||
| + | |||
| + | Si vous ne trouvez pas le fichier dans le champ « Données Inkscape », | ||
| + | |||
| **If you can’t find the file on your system – or just don’t want to go hunting – there is another alternative. Inkscape is, of course, FOSS software, so all its source files are publicly available in the project’s GitLab repo. This includes the ‘node-handles.css’ file, which you can download directly with this link: https:// | **If you can’t find the file on your system – or just don’t want to go hunting – there is another alternative. Inkscape is, of course, FOSS software, so all its source files are publicly available in the project’s GitLab repo. This includes the ‘node-handles.css’ file, which you can download directly with this link: https:// | ||
| Ligne 46: | Ligne 86: | ||
| Open the file that’s now in your User UI directory using a text editor of your choice. If it supports syntax highlighting for CSS files, then so much the better, as common errors such as missing | Open the file that’s now in your User UI directory using a text editor of your choice. If it supports syntax highlighting for CSS files, then so much the better, as common errors such as missing | ||
| + | |||
| + | Si vous ne trouvez pas le fichier sur votre système – ou si vous ne souhaitez tout simplement pas le chercher – une autre solution s' | ||
| + | |||
| + | 3. Copiez le fichier CSS du modèle dans le répertoire utilisateur de l'UI | ||
| + | |||
| + | Cette étape est simple. Copiez le fichier « node-handles.css » que vous avez trouvé dans le répertoire système de l'UI (ou à l' | ||
| + | |||
| + | IMPORTANT : | ||
| + | |||
| + | 4. Modifier le nouveau fichier | ||
| + | |||
| + | Ouvrez le fichier qui se trouve maintenant dans votre répertoire utilisateur de l'UI avec l' | ||
| + | |||
| **At the top of the file are some instructions which describe exactly which CSS properties you can use in this context. This covers almost all the things you’re likely to want to change with handles – though it would have been nice to have ‘rotate’ available. | **At the top of the file are some instructions which describe exactly which CSS properties you can use in this context. This covers almost all the things you’re likely to want to change with handles – though it would have been nice to have ‘rotate’ available. | ||
| Ligne 52: | Ligne 105: | ||
| Let’s take a look at some example changes. To make things clearer, I’ve used the Preferences dialog to scale the handles up to 15, the maximum value available on the slider. Here’s how the editing handles for a rectangle look by default, with the mouse pointer hovering over one of the sizing handles.** | Let’s take a look at some example changes. To make things clearer, I’ve used the Preferences dialog to scale the handles up to 15, the maximum value available on the slider. Here’s how the editing handles for a rectangle look by default, with the mouse pointer hovering over one of the sizing handles.** | ||
| + | |||
| + | En haut du fichier se trouvent des instructions décrivant précisément les propriétés CSS utilisables. Cela couvre la quasi-totalité des modifications que vous souhaiterez probablement apporter aux poignées – même si la propriété « rotate » aurait été un plus. | ||
| + | |||
| + | Suit la liste des formes disponibles pour chaque poignée. Malheureusement, | ||
| + | |||
| + | Voyons quelques exemples de modifications. Pour plus de clarté, j’ai utilisé la boîte de dialogue Préférences pour agrandir les poignées jusqu’à 15, la valeur maximale du curseur. Voici à quoi ressemblent par défaut les poignées d’édition d’un rectangle, avec le pointeur de la souris survolant l’une d’elles. | ||
| + | |||
| **Let’s focus first on the default rules that are used for all handles, unless specifically overridden later in the file. It’s the block that starts with a single asterisk – the universal selector in CSS: | **Let’s focus first on the default rules that are used for all handles, unless specifically overridden later in the file. It’s the block that starts with a single asterisk – the universal selector in CSS: | ||
| Ligne 78: | Ligne 138: | ||
| ... | ... | ||
| }** | }** | ||
| + | |||
| + | Commençons par examiner les règles par défaut appliquées à toutes les poignées, sauf si elles sont explicitement redéfinies plus loin dans le fichier. Il s'agit du bloc commençant par un astérisque : | ||
| + | |||
| + | * { | ||
| + | fill: white; | ||
| + | stroke: black; | ||
| + | outline: white; | ||
| + | stroke-width: | ||
| + | outline-width: | ||
| + | outline-opacity: | ||
| + | scale: 2.0; | ||
| + | size-extra: 1px; | ||
| + | stroke-scale: | ||
| + | } | ||
| + | |||
| + | Voyons ce qui se passe lorsque nous modifions certaines de ces valeurs. Nous allons définir le remplissage sur jaune, le contour sur violet et le contour à peine visible sur « hotPink ». Les noms de couleurs ne sont pas sensibles à la casse, mais d' | ||
| + | |||
| + | * { | ||
| + | fill: yellow; | ||
| + | stroke: purple; | ||
| + | outline: hotPink; | ||
| + | stroke-width: | ||
| + | outline-width: | ||
| + | outline-opacity: | ||
| + | ... | ||
| + | } | ||
| + | |||
| **One extremely nice feature that the developers included is that Inkscape will detect changes to this file and immediately update its UI without any need to reload. This makes it very convenient to create a small test drawing like this, leave the handles visible, and just keep experimenting with edits to the file. Save after each edit, and Inkscape will reflect your changes straight away. After saving the tweaks above, we’re faced with this result. | **One extremely nice feature that the developers included is that Inkscape will detect changes to this file and immediately update its UI without any need to reload. This makes it very convenient to create a small test drawing like this, leave the handles visible, and just keep experimenting with edits to the file. Save after each edit, and Inkscape will reflect your changes straight away. After saving the tweaks above, we’re faced with this result. | ||
| Ligne 90: | Ligne 177: | ||
| This time the color has been defined as an RGB value using 6 hexadecimal digits. If you’ve been using Inkscape for a while then you’re probably familiar with this format. Suffice to say that you can use the Fill & Stroke dialog in Inkscape to find the color you want, then copy the color from the RGBA field at the bottom-right. Note, however, that the CSS file won’t work with an 8-digit RGBA value, so you’ll need to remove the last two digits (and ensure there’s a hash (#) character at the start), if you want to use this format.** | This time the color has been defined as an RGB value using 6 hexadecimal digits. If you’ve been using Inkscape for a while then you’re probably familiar with this format. Suffice to say that you can use the Fill & Stroke dialog in Inkscape to find the color you want, then copy the color from the RGBA field at the bottom-right. Note, however, that the CSS file won’t work with an 8-digit RGBA value, so you’ll need to remove the last two digits (and ensure there’s a hash (#) character at the start), if you want to use this format.** | ||
| + | |||
| + | Une fonctionnalité très appréciable intégrée par les développeurs est qu' | ||
| + | |||
| + | Le rendu est assurément plus… euh… original. Je ne suis pas certain de vouloir l' | ||
| + | |||
| + | Un peu plus bas dans le fichier, on trouve la règle CSS qui s' | ||
| + | |||
| + | *:hover, | ||
| + | *:click { | ||
| + | fill: #0066ff; | ||
| + | } | ||
| + | |||
| + | |||
| + | Cette fois-ci, la couleur est définie par une valeur RGB à 6 chiffres hexadécimaux. Si vous utilisez Inkscape depuis un certain temps, ce format vous est probablement familier. Il vous suffit d' | ||
| + | |||
| **Perhaps cyan would work better for this hover color? | **Perhaps cyan would work better for this hover color? | ||
| Ligne 110: | Ligne 212: | ||
| Before and after shown above.** | Before and after shown above.** | ||
| + | |||
| + | Peut-être que le cyan conviendrait mieux à la couleur au survol ? | ||
| + | |||
| + | *:hover, | ||
| + | *:click { | ||
| + | fill: #0066ff; | ||
| + | } | ||
| + | |||
| + | C'est une amélioration, | ||
| + | |||
| + | Notez que vous pouvez utiliser les valeurs RGB hexadécimales ou les noms de couleurs CSS. Ces derniers couvrent les noms de couleurs les plus courants – notre exemple ci-dessus aurait donc pu utiliser simplement « fill: cyan; » – mais il existe aussi une multitude de couleurs plus rares, comme « hotPink » utilisé dans le premier exemple. Vous pouvez avoir « dodgerBlue », | ||
| + | |||
| + | Le reste du fichier contient principalement des modifications pour des poignées spécifiques. Si vous souhaitez remplacer la forme particulière utilisée par Inkscape pour le centre de rotation par une simple croix, par exemple, vous pouvez modifier les règles CSS « .inkscape-adj-center ». | ||
| + | |||
| + | .inkscape-adj-center { | ||
| + | shape: " | ||
| + | stroke-width: | ||
| + | } | ||
| + | |||
| + | Avant et après (voir page 29, en haut à droite). | ||
| + | |||
| **Just bear in mind that not every handle in Inkscape is amenable to the full scope of the changes available, even in this limited subset of CSS. There’s a comment in the ‘.inkscape-guide-handle’ section that states that guide handles are deliberately small and unobtrusive. Personally I find them too small, so nudging the scale value here lets me increase their size without affecting the other handles. But trying to change the handle shape to a diamond (or any of the other supported shapes) doesn’t work in this case. | **Just bear in mind that not every handle in Inkscape is amenable to the full scope of the changes available, even in this limited subset of CSS. There’s a comment in the ‘.inkscape-guide-handle’ section that states that guide handles are deliberately small and unobtrusive. Personally I find them too small, so nudging the scale value here lets me increase their size without affecting the other handles. But trying to change the handle shape to a diamond (or any of the other supported shapes) doesn’t work in this case. | ||
| Ligne 116: | Ligne 239: | ||
| Just remember, if you manage to break things completely, simply throw the file away and start again. With that safety net in place, you can’t go far wrong.** | Just remember, if you manage to break things completely, simply throw the file away and start again. With that safety net in place, you can’t go far wrong.** | ||
| + | |||
| + | Il est important de noter que toutes les poignées d' | ||
| + | |||
| + | La plupart des utilisateurs se contenteront probablement des formes et couleurs par défaut des poignées d' | ||
| + | |||
| + | N' | ||
| + | |||
issue223/inkscape.1764611745.txt.gz · Dernière modification : 2025/12/01 18:55 de d52fr
