| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue91:inkscape [2015/02/26 16:13] – [3] auntiee | issue91:inkscape [2015/02/26 18:13] (Version actuelle) – [5] auntiee |
|---|
| With all that background in place, it's finally time to look at the file in Inkscape's XML editor. You can open this by pressing CTRL-SHIFT-X or by selecting Edit > XML Editor from the menu bar. The dialog is made up primarily of a tree on the left which shows the structure of the SVG file, and a pane on the right to list and edit the selected item's attributes. The little triangles in the tree can be toggled to show or hide that particular part, and indentation is used to show the hierarchy of the elements. In this screenshot I've expanded all the triangles so that the metadata elements are visible, with their Dublin Core namespace. Despite the closing tags not being explicitly shown, you can nevertheless see that the rect at the bottom is “inside” the group (g) just above it – actually an Inkscape layer, as you can tell from the Inkscape-namespaced “label” attribute. This layer is, in turn, inside the root svg element. One thing to note is that the XML Editor shows the SVG namespace on elements (so you can see svg:svg, svg:g, svg:rect...) even though the exported file just uses the base names (in XML terms the SVG namespace is set as the default for the document, so it doesn't then need to be explicitly added to every element).** | With all that background in place, it's finally time to look at the file in Inkscape's XML editor. You can open this by pressing CTRL-SHIFT-X or by selecting Edit > XML Editor from the menu bar. The dialog is made up primarily of a tree on the left which shows the structure of the SVG file, and a pane on the right to list and edit the selected item's attributes. The little triangles in the tree can be toggled to show or hide that particular part, and indentation is used to show the hierarchy of the elements. In this screenshot I've expanded all the triangles so that the metadata elements are visible, with their Dublin Core namespace. Despite the closing tags not being explicitly shown, you can nevertheless see that the rect at the bottom is “inside” the group (g) just above it – actually an Inkscape layer, as you can tell from the Inkscape-namespaced “label” attribute. This layer is, in turn, inside the root svg element. One thing to note is that the XML Editor shows the SVG namespace on elements (so you can see svg:svg, svg:g, svg:rect...) even though the exported file just uses the base names (in XML terms the SVG namespace is set as the default for the document, so it doesn't then need to be explicitly added to every element).** |
| |
| Une dernière chose à noter dans ce fichier : le rectangle lui-même, qui, bien qu'étant du pur SVG sans préfixe d'espace de noms, est un peu différent de ceux que nous avons créés précédemment. Alors que nous avions utilisé la syntaxe fill="red" pour définir la couleur de remplissage, Inkscape utilise un attribut d'usage général « style » pour contenir les différents détails de couleur et de style du rectangle. Il utilise aussi une notation hexadecimale RGB pour la couleur plutôt qu'un nom de couleur - vous pouvez forcer l'utilisation des noms de couleurs dans les Préférences d'Inkscape mais ça n'en vaut pas la peine sauf si vous avez une raison précise pour le faire : la plupart des couleurs n'ont pas de correspondance de nom ; elles seront donc stockées en nombres hexa et l'utilisation de noms peut créer des problèmes avec quelques extensions d'Inkscape. | Une dernière chose à noter dans ce fichier : le rectangle lui-même, qui, bien qu'étant du pur SVG sans préfixe d'espace de noms, est un peu différent de ceux que nous avons créés précédemment. Alors que nous avions utilisé la syntaxe fill="red" pour définir la couleur de remplissage, Inkscape utilise un attribut d'usage général « style » pour contenir les différents détails de couleur et de style du rectangle. Il utilise aussi une notation hexadécimale RGB pour la couleur plutôt qu'un nom de couleur - vous pouvez forcer l'utilisation des noms de couleurs dans les Préférences d'Inkscape mais ça n'en vaut pas la peine sauf si vous avez une raison précise pour le faire : la plupart des couleurs n'ont pas de correspondance de nom ; elles seront donc stockées en nombres hexa et l'utilisation de noms peut créer des problèmes avec quelques extensions d'Inkscape. |
| |
| Après toute cette préparation, il est temps de regarder le fichier dans l'éditeur XML d'Inkscape. Vous pouvez l'ouvrir avec les touches CTRL-MAJ-X ou en choisissant Éditer > Éditeur XML... dans la barre de menu. A l'ouverture, la boîte de dialogue comporte surtout dans le panneau gauche une arborescence qui représente la structure du fichier SVG, et un panneau droit pour lister et éditer les attributs sélectionnés. Les petits triangles dans l'arborescence peuvent être basculés pour montrer ou cacher un sous-ensemble et l'indentation est utilisée pour montrer la hiérarchisation des éléments. Dans cette copie d'écran, j'ai ouvert tous les triangles de sorte que les éléments de métadonnées soient visibles, avec leur espace de noms Dublin Core. Bien que les balises fermantes ne sont pas explicitement visibles, vous pouvez cependant voir que le rectangle en bas est à l'intérieur du groupe (g) juste au-dessus de lui - une vraie couche Inkscape, comme vous pouvez le voir sur l'attribut « label » avec l'espace de noms Inkscape. Cette couche est à son tour à l'intérieur de l'élément svg racine. Notons que l'éditeur XML montre l'espace de noms SVG sur les éléments (ainsi nous pouvons lire : svg:svg, svg:g, svg:rect...), même si le fichier exporté utilise seulement les noms de base (en termes XML, l'espace de noms SVG est défini par défaut pour le document, aussi, il n'y a pas besoin de l'ajouter explicitement à chaque élément). | Après toute cette préparation, il est enfin temps de regarder le fichier dans l'éditeur XML d'Inkscape. Vous pouvez l'ouvrir avec les touches CTRL-MAJ-X ou en choisissant Édition > Éditeur XML... dans la barre de menu. À l'ouverture, la boîte de dialogue comporte surtout dans le volet gauche une arborescence qui représente la structure du fichier SVG, et un volet à droite pour lister et éditer les attributs sélectionnés. Les petits triangles dans l'arborescence peuvent être basculés pour montrer ou cacher un sous-ensemble et l'indentation est utilisée pour montrer la hiérarchisation des éléments. Dans cette copie d'écran, j'ai ouvert tous les triangles de sorte que les éléments de métadonnées soient visibles, avec leur espace de noms Dublin Core. Bien que les balises fermantes ne soient pas explicitement visibles, vous pouvez cependant voir que le rectangle en bas est à l'intérieur du groupe (g) juste au-dessus de lui - en fait, une couche Inkscape, comme vous pouvez le voir sur l'attribut « label » avec l'espace de noms Inkscape. Cette couche est à son tour à l'intérieur de l'élément svg racine. Notons que l'éditeur XML montre l'espace de noms SVG sur les éléments (ainsi nous pouvons lire : svg:svg, svg:g, svg:rect...), même si le fichier exporté utilise seulement les noms de base (en termes XML, l'espace de noms SVG est défini par défaut pour le document, aussi, il n'y a pas besoin de l'ajouter explicitement à chaque élément). |
| |
| **When an entry in the tree is highlighted, its attributes are shown on the right. If a single element or group is selected on the canvas it will be automatically selected in the XML Editor, so you can simply leave the dialog open and click on various objects in your drawing to see their details. Equally, selecting an entry in the tree will also select the corresponding object on the canvas. | **When an entry in the tree is highlighted, its attributes are shown on the right. If a single element or group is selected on the canvas it will be automatically selected in the XML Editor, so you can simply leave the dialog open and click on various objects in your drawing to see their details. Equally, selecting an entry in the tree will also select the corresponding object on the canvas. |
| SVG places its origin point at the top left of the document. This sort of makes sense, given that it comes from the world of the web where the height and width of a document can change dramatically, but the top left is always the top left. The x-axis therefore runs from left to right, as you might expect, but the y-axis runs from top to bottom, with positive values moving further down the page. Inkscape, on the other hand, presents a more traditional drawing view, with the origin in the bottom left, and the y-axis running up the page from top to bottom. So the 500 value you see in the main Inkscape window represents the distance from the bottom of the page to the bottom of the rectangle, whereas the value in the XML Editor (and the value that appears in the SVG file) is the distance from the top of the page to the top of the rectangle. Usually this incongruity has little impact, but if you're trying to find specific coordinates in an SVG image you do need to be aware of the difference.** | SVG places its origin point at the top left of the document. This sort of makes sense, given that it comes from the world of the web where the height and width of a document can change dramatically, but the top left is always the top left. The x-axis therefore runs from left to right, as you might expect, but the y-axis runs from top to bottom, with positive values moving further down the page. Inkscape, on the other hand, presents a more traditional drawing view, with the origin in the bottom left, and the y-axis running up the page from top to bottom. So the 500 value you see in the main Inkscape window represents the distance from the bottom of the page to the bottom of the rectangle, whereas the value in the XML Editor (and the value that appears in the SVG file) is the distance from the top of the page to the top of the rectangle. Usually this incongruity has little impact, but if you're trying to find specific coordinates in an SVG image you do need to be aware of the difference.** |
| |
| Quand une entrée de l'arborescence est surlignée, ces attributs sont affichés sur la droite. Si un élément seul ou un groupe est sélectionné sur le canevas, il est automatiquement sélectionné dans l'éditeur XML ; vous pouvez donc laisser l'éditeur ouvert et cliquer sur les différents objets sur le canevas pour voir leurs détails. De même, en sélectionnant une ligne de l'arborescence, l'objet correspondant sera sélectionné sur le canevas. | Quand une entrée de l'arborescence est surlignée, ces attributs sont affichés à droite. Si un élément seul ou un groupe est sélectionné sur le canevas, il est automatiquement sélectionné dans l'éditeur XML ; vous pouvez donc laisser l'éditeur ouvert et cliquer sur les divers objets sur le canevas pour en voir les détails. De même, en sélectionnant une ligne de l'arborescence, l'objet correspondant sera sélectionné sur le canevas. |
| |
| Ici, le rectangle est sélectionné, mais il y a quelque chose qui ne va pas. Si vous revenez à l'image du rectangle sur le canevas, vous verrez que ses dimensions sont de 400x300 pixels, et qu'il est positionné à x=140, y=500. Maintenant, regardez l'image dans l'éditeur XML : largeur, hauteur et x sont corrects, mais y affirme être à 252.3621 - ce qui est sacrément loin de 500 ! | Ici, le rectangle est sélectionné, mais il y a quelque chose qui ne va pas. Si vous revenez à l'image du rectangle sur le canevas, vous verrez que ses dimensions sont de 400x300 pixels, et qu'il est positionné à x=140, y=500. Maintenant, regardez l'image dans l'éditeur XML : largeur, hauteur et x sont corrects, mais y affirme être à 252.3621 - ce qui est sacrément loin de 500 ! |
| |
| SVG place son point d'origine à l'angle en haut à gauche du document. Ceci a un sens étant donné que dans le monde du Web la hauteur et la largeur d'un document peuvent changer énormément mais l'angle en haut à gauche demeure toujours. L'axe x augmente de gauche à droite, comme on peut s'y attendre, mais l'axe y augmente du haut vers le bas de la page. Inkscape, à l'inverse, présente un vision du dessin plus traditionnelle, avec une origine en bas à gauche avec l'axe des y augmentant du bas vers le haut de la page. Ainsi, la valeur 500 que nous voyons dans la fenêtre principale d'Inkscape représente la distance du bas de la page jusqu'au bas du rectangle, alors que la valeur dans l'éditeur XML (et la valeur qui est visible dans le fichier SVG) est la distance du haut de la page jusqu'au haut du rectangle. Habituellement cette incongruité a peu d'impact, mais si vous essayez de trouver les coordonnées propres à une image SVG, vous devrez être informé de cette différence. | SVG place son point d'origine à l'angle en haut à gauche du document. Ceci est assez logique étant donné que dans le monde du Web la hauteur et la largeur d'un document peuvent changer énormément, mais l'angle en haut à gauche est toujours en haut à gauche. L'axe x augmente de gauche à droite, comme on peut s'y attendre, mais l'axe y augmente du haut vers le bas de la page. Inkscape, à l'inverse, présente une vision du dessin plus traditionnelle, avec une origine en bas à gauche et l'axe des y augmentant du bas vers le haut de la page. Ainsi, la valeur 500 que nous voyons dans la fenêtre principale d'Inkscape représente la distance du bas de la page jusqu'au bas du rectangle, alors que la valeur dans l'éditeur XML (et la valeur qui est visible dans le fichier SVG) est la distance du haut de la page jusqu'au haut du rectangle. Habituellement cette incongruité a peu d'impact, mais si vous essayez de trouver des coordonnées précises dans une image SVG, vous devrez être informé de cette différence. |
| |
| =====5===== | =====5===== |
| See the “fill-opacity:1;” section, right near the start? We need to remove that. This is just a multiline text field, so simply click to place the cursor in there, then move around with the arrow keys and edit the text as you would normally. Once your editing is done, you need to click on the “Set” button to make it take effect. Assuming the fill-opacity's value was 1, then you shouldn't notice any change, since 1 in here corresponds to 255 in the Fill and Stroke dialog, and is the default for SVG if it's not specified.** | See the “fill-opacity:1;” section, right near the start? We need to remove that. This is just a multiline text field, so simply click to place the cursor in there, then move around with the arrow keys and edit the text as you would normally. Once your editing is done, you need to click on the “Set” button to make it take effect. Assuming the fill-opacity's value was 1, then you shouldn't notice any change, since 1 in here corresponds to 255 in the Fill and Stroke dialog, and is the default for SVG if it's not specified.** |
| |
| Avec le rectangle déjà sélectionné, cliquons sur l'attribut « style » à droite. Le nom de l'attribut et sa valeur sont mis dans le champ en bas à droite de la boîte de dialogue. Dans le cas de l'attribut style, le valeur est une seule longue chaîne de caractères qui est elle-même composée de doublets nom:valeur. Si vous êtes à l'aise avec CSS du monde de l'internet, alors vous reconnaîtrez le format - sinon la totalité des noms des propriétés (SVG utilise beaucoup de propriétés standard CSS qui vous auriez pu rencontrer en écrivant du HTML, mais en a ajouté quelques unes). L'attribut style étant sélectionné pour l'édition, vous pouvez maintenant régler ce défaut agaçant sur l'opacité du remplissage avec les clones. | Le rectangle étant toujours sélectionné, cliquons sur l'attribut « style » à droite. Le nom de l'attribut et sa valeur sont mis dans le champ en bas à droite de la boîte de dialogue. Dans le cas de l'attribut style, la valeur est une seule longue chaîne de caractères qui est elle-même composée de doublets nom:valeur. Si vous êtes à l'aise avec le CSS du monde de l'internet, alors vous reconnaîtrez le format - sinon la totalité des noms des propriétés (SVG utilise beaucoup de propriétés standard CSS que vous auriez pu rencontrer en écrivant du HTML, mais en ajoute quelques-unes). L'attribut style étant sélectionné pour l'édition, vous pouvez maintenant régler ce défaut agaçant sur l'opacité du remplissage avec les clones. |
| |
| Voyez-vous la section « fill-opacity:1 », juste à droite après le début ? Nous devons l'enlever. Comme ce n'est qu'un texte multilignes, cliquez simplement pour positionner le curseur dedans, puis déplacez -le avec les touches fléchées et modifiez le texte comme vous le feriez normalement. Une fois le texte modifié, vous devez cliquer sur le bouton « Définir » pour le prendre en compte. Comme la valeur de fill-opacity était égale à 1, vous ne devriez pas voir de différence, puisque 1 correspond à 255 dans la boîte de dialogue Remplissage et contour ; c'est la valeur par défaut de SVG quand il n'est pas spécifié. | Vous voyez la section « fill-opacity:1 », juste à droite après le début ? Nous devons l'enlever. Comme ce n'est qu'un texte multi-lignes, cliquez simplement pour positionner le curseur dedans, puis déplacez-le avec les touches fléchées et modifiez le texte comme vous le feriez normalement. Une fois le texte modifié, vous devez cliquer sur le bouton « Définir » pour qu'il soit pris en compte. Comme la valeur de fill-opacity était égale à 1, vous ne devriez pas voir de différence, puisque 1 correspond à 255 dans la boîte de dialogue Remplissage et contour ; c'est la valeur par défaut de SVG quand elle n'est pas spécifiée. |
| |
| **Now clone the rectangle, and try changing the clone's color. You can't, of course, since the parent rectangle's fill is still purple, not unset – but, once you give the clone a fill color, you gain access to the alpha slider in the Fill and Stroke dialog. Reduce that value and you'll see that you can affect the transparency of the fill, if not its color. Select the parent again (SHIFT-D if the clone is still selected) and then unset the fill. Now you can change the clone's fill color and opacity to your heart's content. It's as simple as that: to work around this Inkscape bug, and restore the ability to change a clone's fill opacity independently of its parent, you just have to remove the fill-opacity property from the parent's style attribute. Doing this on my original test image gives exactly the result you would expect. | **Now clone the rectangle, and try changing the clone's color. You can't, of course, since the parent rectangle's fill is still purple, not unset – but, once you give the clone a fill color, you gain access to the alpha slider in the Fill and Stroke dialog. Reduce that value and you'll see that you can affect the transparency of the fill, if not its color. Select the parent again (SHIFT-D if the clone is still selected) and then unset the fill. Now you can change the clone's fill color and opacity to your heart's content. It's as simple as that: to work around this Inkscape bug, and restore the ability to change a clone's fill opacity independently of its parent, you just have to remove the fill-opacity property from the parent's style attribute. Doing this on my original test image gives exactly the result you would expect. |
| You may have noticed that I haven't talked about the toolbars in the XML Editor, and that's with good reason. The buttons there give you the ability to significantly change the structure of your SVG file – potentially with disastrous effects if you're not sure what you're doing. By all means have a play around in the XML Editor. Move nodes, un-indent them, change their attributes or remove them altogether. It offers a fascinating insight into the structure of an Inkscape file, and gives you unprecedented power to tweak things that aren't always exposed in the Inkscape user interface. But if you do decide to experiment, please make sure you do it on a temporary file, or one you've got backed up elsewhere.** | You may have noticed that I haven't talked about the toolbars in the XML Editor, and that's with good reason. The buttons there give you the ability to significantly change the structure of your SVG file – potentially with disastrous effects if you're not sure what you're doing. By all means have a play around in the XML Editor. Move nodes, un-indent them, change their attributes or remove them altogether. It offers a fascinating insight into the structure of an Inkscape file, and gives you unprecedented power to tweak things that aren't always exposed in the Inkscape user interface. But if you do decide to experiment, please make sure you do it on a temporary file, or one you've got backed up elsewhere.** |
| |
| Maintenant, clonez le rectangle et essayez de changer de couleur. Vous ne pouvez pas, bien sûr, puisque le parent est encore violet, non rendu indéfini, mais une fois que vous avez donné une couleur de remplissage au clone, vous avez accès à la réglette alpha dans la boîte de dialogue Remplissage et contour. Réduisez cette valeur et vous allez voir l'effet sur la transparence du remplissage, sinon sur sa couleur. Sélectionnez le parent à nouveau (MAJ-D si le clone est encore sélectionné) et défaites le remplissage. Maintenant, vous pouvez changer la couleur de remplissage du clone et l'opacité comme vous l'aimez. C'est aussi simple que ça : pour contourner un défaut d'Inkscape et retrouver la possibilité de modifier l'opacité du remplissage d'un clone indépendamment de son parent, vous n'avez qu'à supprimer la propriété fill-opacity dans l'attribut style du parent. En le faisant sur mon image test d'origine j'obtiens exactement le résultat escompté. | Maintenant, clonez le rectangle et essayez de changer sa couleur. Vous ne pouvez pas le faire, bien sûr, puisque le parent est encore violet, non rendu indéfini, mais une fois que vous avez donné une couleur de remplissage au clone, vous avez accès à la réglette alpha dans la boîte de dialogue Remplissage et contour. Réduisez cette valeur et vous allez voir l'effet sur la transparence du remplissage, sinon sur sa couleur. Sélectionnez le parent à nouveau (MAJ-D si le clone est encore sélectionné) et rendre le remplissage indéfini. Maintenant, vous pouvez changer la couleur de remplissage du clone et l'opacité comme vous voulez. C'est aussi simple que ça : pour contourner un défaut d'Inkscape et retrouver la possibilité de modifier l'opacité du remplissage d'un clone indépendamment de son parent, vous n'avez qu'à supprimer la propriété fill-opacity dans l'attribut style du parent. En le faisant sur mon image test d'origine j'obtiens exactement le résultat escompté. |
| |
| Vous pouvez remarquer que je n'ai rien dit de la barre d'outils de l'éditeur XML et ceci pour une bonne raison. Ces boutons vous donnent la possibilité de modifier fortement la structure de votre fichier SVG - avec probablement des effets désastreux si vous n'êtes pas sûrs de ce que vous faites. De toutes façons, faites des essais dans l'éditeur XML. Bougez les nœuds, supprimez une indentation, modifiez leurs attributs ou supprimez-les complètement. Cela vous donnera un aperçu captivant de la structure d'un fichier Inkscape et vous aurez le pouvoir sans précédent de corriger des choses qui ne sont pas visibles dans l'interface utilisateur d'Inkscape. Mais si vous décidez de tenter l'expérience, assurez-vous, s'il vous plaît, de la faire dans un fichier temporaire ou un dont vous avez une sauvegarde quelque part. | Vous pouvez remarquer que je n'ai rien dit de la barre d'outils de l'éditeur XML et ceci pour une bonne raison. Ces boutons vous donnent la possibilité de modifier fortement la structure de votre fichier SVG - avec probablement des effets désastreux si vous ne savez pas trop ce que vous faites. De toutes les façons, faites des essais dans l'éditeur XML. Bougez les nœuds, supprimez une indentation, modifiez leurs attributs ou supprimez-les complètement. Cela vous donnera un aperçu passionnant de la structure d'un fichier Inkscape et vous aurez le pouvoir sans précédent de corriger des choses qui ne sont pas visibles dans l'interface utilisateur d'Inkscape. Mais si vous décidez de tenter l'expérience, assurez-vous, s'il vous plaît, de la faire dans un fichier temporaire ou un dont vous avez une sauvegarde quelque part. |
