| Les deux révisions précédentesRévision précédente | |
| issue134:inkscape [2018/07/23 12:05] – andre_domenech | issue134:inkscape [2018/07/25 13:11] (Version actuelle) – andre_domenech |
|---|
| **Let’s imagine that we wish to combine two XML languages in a single document. The first is our old friend SVG. The second is a new language I’ve just made up for garden designers – let’s call it GardenML. Before you cry foul, XML is explicitly intended to allow you to create your own domain-specific languages, so although my example is a little contrived, it’s not without precedent in the real world. So, back to the plot: we’ve got an SVG file, filled with <path> elements that describe lines in an image. But we want to include our GardenML content, which is filled with <path> elements that describe… well, paths in a garden. The sort you walk on, made up of bricks or stone slabs, and certainly not the same thing as a path in SVG.** | **Let’s imagine that we wish to combine two XML languages in a single document. The first is our old friend SVG. The second is a new language I’ve just made up for garden designers – let’s call it GardenML. Before you cry foul, XML is explicitly intended to allow you to create your own domain-specific languages, so although my example is a little contrived, it’s not without precedent in the real world. So, back to the plot: we’ve got an SVG file, filled with <path> elements that describe lines in an image. But we want to include our GardenML content, which is filled with <path> elements that describe… well, paths in a garden. The sort you walk on, made up of bricks or stone slabs, and certainly not the same thing as a path in SVG.** |
| |
| Imaginons que nous voulions combiner deux langages XML dans un seul document. Le premier est notre vieil ami SVG. Le second est un nouveau langage que je viens de créer pour les concepteurs de jardin (garden) - appelons-le GardenML. Avant que vous ne criiez au fou, XML est explicitement conçu pour vous permettre de créer vos propres langages spécifiques d'un domaine ; aussi, bien que mon exemple soit un petit peu artificiel, il n'est pas sans précédent dans la vraie vie. Bon, revenons au sujet : nous avons un fichier SVG, plein d'éléments <path> qui décrivent les lignes d'une image. Mais nous voulons inclure notre contenu en GardenML, qui est rempli d'éléments qui décrit… disons, des allées (chemins) dans un jardin. Le genre sur lequel on marche, fait de pavés de brique ou de pierre, et certainement pas la même chose qu'un « path » (chemin) dans SVG. | Imaginons que nous voulions combiner deux langages XML dans un seul document. Le premier est notre vieil ami SVG. Le second est un nouveau langage que je viens de créer pour les concepteurs de jardin (garden) - appelons-le GardenML. Avant que vous ne criiez au fou, XML est explicitement conçu pour vous permettre de créer vos propres langages spécifiques d'un domaine ; aussi, bien que mon exemple soit un petit peu artificiel, il n'est pas sans précédent dans la vraie vie. Bon, revenons au sujet : nous avons un fichier SVG, plein d'éléments <path> qui décrivent les lignes d'une image. Mais nous voulons inclure notre contenu en GardenML, qui est rempli d'éléments qui décrit... disons, des allées (chemins) dans un jardin. Le genre sur lequel on marche, fait de pavés de brique ou de pierre, et certainement pas la même chose qu'un « path » (chemin) dans SVG. |
| |
| **How does an XML consuming program reconcile these different uses of the same element. How does it know when you’re using an SVG <path>, and when it’s a GardenML <path>? The answer is a thing called a “namespace”. All XML elements have a namespace, but it’s usually set as a default for the whole document, then just implicitly used for each element. Here’s an SVG document which does exactly that: | **How does an XML consuming program reconcile these different uses of the same element. How does it know when you’re using an SVG <path>, and when it’s a GardenML <path>? The answer is a thing called a “namespace”. All XML elements have a namespace, but it’s usually set as a default for the whole document, then just implicitly used for each element. Here’s an SVG document which does exactly that: |
| **Notice the “xmlns” (XML NameSpace) attribute in the <svg> tag? That defines the default namespace for the document. The value is a URI – a Uniform Resource Identifier. It may look like a web address, also known as a URL (Uniform Resource Location), but it’s subtly different. Whereas a URL points to the location of a resource such as a web page, a URI is just a unique identifier which doesn’t have to have a corresponding resource at the specified address (though they often do). In other words, a URL is a path to a real document, whilst a URI is a unique string used to make sure that each namespace is distinct from all the others. A URI may also be a URL, but doesn’t have to be.** | **Notice the “xmlns” (XML NameSpace) attribute in the <svg> tag? That defines the default namespace for the document. The value is a URI – a Uniform Resource Identifier. It may look like a web address, also known as a URL (Uniform Resource Location), but it’s subtly different. Whereas a URL points to the location of a resource such as a web page, a URI is just a unique identifier which doesn’t have to have a corresponding resource at the specified address (though they often do). In other words, a URL is a path to a real document, whilst a URI is a unique string used to make sure that each namespace is distinct from all the others. A URI may also be a URL, but doesn’t have to be.** |
| |
| Avez-vous noté l'attribut « xmlns » (XML NameSpace - Espace de nommage XML) dans la balise <svg> ? Cela définit l'espace de nommage par défaut pour le document. La valeur est une URI - un Uniform Resource Identifier (identifiant uniforme d'une ressource). Elle peut ressembler à une adresse Web , aussi connu sous le nom d'URL (Uniform Resource Location - Localisation uniforme d'une ressource), mais c'est subtilement différent. Là où une URL pointe vers la localisation d'une ressource telle qu'une page Web, une URI est juste un identifiant unique qui n'a pas obligatoirement une ressource correspondante à l'adresse indiquée (bien que ce soit souvent vrai). En d'autres termes, une URL est un chemin vers une document réel, alors qu'une URI est une chaîne unique utilisée pour s'assurer que chaque espace de nommage est distinct de tous les autres. Une URI peut être une URL, mais ce n'est pas obligatoire. | Avez-vous noté l'attribut « xmlns » (XML NameSpace - Espace de nommage XML) dans la balise <svg> ? Cela définit l'espace de nommage par défaut pour le document. La valeur est une URI - un Uniform Resource Identifier (identifiant uniforme d'une ressource). Elle peut ressembler à une adresse Web , aussi connue sous le nom d'URL (Uniform Resource Location - Localisation uniforme d'une ressource), mais c'est subtilement différent. Là où une URL pointe vers la localisation d'une ressource telle qu'une page Web, une URI est juste un identifiant unique qui n'a pas obligatoirement une ressource correspondante à l'adresse indiquée (bien que ce soit souvent vrai). En d'autres termes, une URL est un chemin vers un document réel, alors qu'une URI est une chaîne unique utilisée pour s'assurer que chaque espace de nommage est distinct de tous les autres. Une URI peut être une URL, mais ce n'est pas obligatoire. |
| |
| **When a browser sees that the document’s default namespace is “http://www.w3.org/2000/svg” it knows that any <path> elements are SVG paths, not GardenML paths. But suppose we want to create a file that will both display in the browser and can be interpreted by something that understands GardenML. In that case we need to define more than one namespace in the <svg> element, give all but the default one a handy shortcut name, then prefix the elements and attributes with the shortcut as appropriate. | **When a browser sees that the document’s default namespace is “http://www.w3.org/2000/svg” it knows that any <path> elements are SVG paths, not GardenML paths. But suppose we want to create a file that will both display in the browser and can be interpreted by something that understands GardenML. In that case we need to define more than one namespace in the <svg> element, give all but the default one a handy shortcut name, then prefix the elements and attributes with the shortcut as appropriate. |
| </svg>** | </svg>** |
| |
| Quand un navigateur voit que l'espace de nommage par défaut du document est « http://www.w3.org/2000/svg », il sait que tous les éléments <path> sont des chemins du SVG, et pas des chemins du GardenML. Mais, qu'arrive-t-il si nous voulons créer un fichier qui affichera les deux dans le navigateur et qui pourra être interprété par quelque chose qui comprend le GardenML ? Dans ce cas, nous devons définir plus d'un espace de nommage dans l'élément <svg>, lui donner n'importe quel nom de raccourci pratique sauf celui par défaut, puis préfixer les éléments et attributs avec le raccourci approprié. | Quand un navigateur voit que l'espace de nommage par défaut du document est « http://www.w3.org/2000/svg », il sait que tous les éléments <path> sont des chemins du SVG, et pas des chemins du GardenML. Mais qu'arrive-t-il si nous voulons créer un fichier qui affichera les deux dans le navigateur et qui pourra être interprété par quelque chose qui comprend le GardenML ? Dans ce cas, nous devons définir plus d'un espace de nommage dans l'élément <svg>, lui donner n'importe quel nom de raccourci pratique sauf celui par défaut, puis préfixer les éléments et attributs avec le raccourci approprié. |
| |
| <svg | <svg |
| />** | />** |
| |
| Par défaut, les attributs sont dans le même espace de nommage que leurs éléments - ainsi, dans l'exemple précédent, l'attribut « d » est dans l'espace de nommage SVG, alors que l'attribut « start » est dans l'espace de nommage GardenML. Mais vous pourriez aussi préfixer individuellement les attributs, en cas de besoin. Dans cet exemple, nous avons placé un chemin SVG auquel j'ai ajouté quelques attributs personnalisés de mon cru : | Par défaut, les attributs sont dans le même espace de nommage que leurs éléments, ainsi, dans l'exemple précédent, l'attribut « d » est dans l'espace de nommage SVG, alors que l'attribut « start » est dans l'espace de nommage GardenML. Mais vous pourriez aussi préfixer individuellement les attributs, en cas de besoin. Dans cet exemple, nous avons placé un chemin SVG auquel j'ai ajouté quelques attributs personnalisés de mon cru : |
| |
| <path d="M 130,70 A 60,60 0 1,1 130,69.9 Z" | <path d="M 130,70 A 60,60 0 1,1 130,69.9 Z" |
| Tout cela peut vous paraître un peu ésotérique, mais je l'explique pour deux raisons. La première est que les espaces de nommage sont intégrés aux documents XML ; aussi, quand, un peu plus tard dans cette série, nous commencerons à manipuler des fichiers Inkscape en utilisant Javascript, vous serez content d'avoir de bonnes bases sur ce sujet. La seconde est que ça explique pourquoi nos fichiers générés dans Inkscape sont si gros par rapport à des fichiers faits à la main. Voici l'élément ouvrant <svg> dans un fichier Inkscape typique : | Tout cela peut vous paraître un peu ésotérique, mais je l'explique pour deux raisons. La première est que les espaces de nommage sont intégrés aux documents XML ; aussi, quand, un peu plus tard dans cette série, nous commencerons à manipuler des fichiers Inkscape en utilisant Javascript, vous serez content d'avoir de bonnes bases sur ce sujet. La seconde est que ça explique pourquoi nos fichiers générés dans Inkscape sont si gros par rapport à des fichiers faits à la main. Voici l'élément ouvrant <svg> dans un fichier Inkscape typique : |
| |
| Notez que tous les espaces de nommage sont définis et que deux d'entre eux sont utilisés dans les deux derniers attributs. Vous connaissez maintenant l'espace de nommage « svg », mais les autres ? L'espace de nommage « inkscape » est utilisé pour stocker des attributs supplémentaires qui contiennent des données spécifiques à Inkscape. Sans eux, Inkscape serait limité aux fonctionnalités définies dans la spécification SVG, et ne serait pas capable d'offrir des capacités supplémentaires tels que les Effets de chemin dynamiques (LPE - Live Path Effects). L'espace de nommage « sodipodi » poursuit un objectif similaire - Inkscape a été dérivé du programme Sodipodi il y a de nombreuses années, mais son histoire continue dans ces attributs qui datent d'avant la séparation. | Notez que tous les espaces de nommage sont définis et que deux d'entre eux sont utilisés dans les deux derniers attributs. Vous connaissez maintenant l'espace de nommage « svg », mais les autres ? L'espace de nommage « inkscape » est utilisé pour stocker des attributs supplémentaires qui contiennent des données spécifiques à Inkscape. Sans eux, Inkscape serait limité aux fonctionnalités définies dans la spécification SVG, et ne serait pas capable d'offrir des capacités supplémentaires telles que les Effets de chemin dynamiques (LPE - Live Path Effects). L'espace de nommage « sodipodi » poursuit un objectif similaire - Inkscape a été dérivé du programme Sodipodi il y a de nombreuses années, mais son histoire continue dans ces attributs qui datent d'avant la séparation. |
| |
| **The remaining namespaces are used for the metadata about your document that you can enter into the Document Properties dialog. There are several of them because they each refer to a different XML language. Inkscape could have just used it’s own namespace for all of them, but by referring to other well-known languages it improves the ability of the metadata to be automatically parsed and understood by indexing programs or other XML tools. It does bloat the size of the file quite considerably, though. | **The remaining namespaces are used for the metadata about your document that you can enter into the Document Properties dialog. There are several of them because they each refer to a different XML language. Inkscape could have just used it’s own namespace for all of them, but by referring to other well-known languages it improves the ability of the metadata to be automatically parsed and understood by indexing programs or other XML tools. It does bloat the size of the file quite considerably, though. |
| Les espaces de nommage restants sont utilisés pour les métadonnées de votre document que vous pouvez saisir dans le dialogue Propriétés du document. Il y en a plusieurs car chacun fait référence à un langage XML différent. Inkscape aurait pu utiliser son propre espace de nommage pour tous, mais, en faisant référence à d'autres langages bien connus, il améliore la capacité des métadonnées à être analysées et comprises automatiquement par des programmes d'indexation ou d'autres outils XML. D'où l'inflation considérable de la taille du fichier. | Les espaces de nommage restants sont utilisés pour les métadonnées de votre document que vous pouvez saisir dans le dialogue Propriétés du document. Il y en a plusieurs car chacun fait référence à un langage XML différent. Inkscape aurait pu utiliser son propre espace de nommage pour tous, mais, en faisant référence à d'autres langages bien connus, il améliore la capacité des métadonnées à être analysées et comprises automatiquement par des programmes d'indexation ou d'autres outils XML. D'où l'inflation considérable de la taille du fichier. |
| |
| Par conséquent, une façon évidente de réduire la taille du fichier est de retirer les espaces de nommage, les éléments et les attributs additionnels. Le faire va évidemment compromettre le fichier SVG de différentes manières, depuis la suppression de la possibilité de modifier des fonctionnalités spécifiques d'Inkscape, jusqu'à la perte des métadonnées. Cependant, Inkscape fournit quelques options pour le faire pour vous. Il y a deux formats alternatifs dans le dialogue de Fichier > Enregistrer sous… ; mais, en pratique, je vous recommande de continuer à faire une sauvegarde dans un fichier Inkscape SVG normal, puis de créer votre version amincie en utilisant Fichier > Sauvegarder une copie… Cette approche évite le problème de l'oubli d'une sauvegarde dans le format plein quand vous avez fait une modification accompagné d'une perte de données. | Par conséquent, une façon évidente de réduire la taille du fichier est de retirer les espaces de nommage, les éléments et les attributs additionnels. Le faire va évidemment compromettre le fichier SVG de différentes manières, depuis la suppression de la possibilité de modifier des fonctionnalités spécifiques d'Inkscape, jusqu'à la perte des métadonnées. Cependant, Inkscape fournit quelques options pour le faire pour vous. Il y a deux formats alternatifs dans le dialogue de Fichier > Enregistrer sous… ; mais, en pratique, je vous recommande de continuer à faire une sauvegarde dans un fichier Inkscape SVG normal, puis de créer votre version amincie en utilisant Fichier > Sauvegarder une copie... Cette approche évite le problème de l'oubli d'une sauvegarde dans le format plein quand vous avez fait une modification accompagnée d'une perte de données. |
| |
| **Your first choice is to save as “Plain SVG”. This strips out the proprietary Inkscape and Sodipodi namespaces, and their associated elements and attributes. It still leaves the other namespaces intact, so the file will still contain any metadata you entered into the Document Properties dialog. This option is ideal for use when linking to an SVG file via the <img> or <object> tabs, as it removes the data that the browser doesn’t understand, but leaves any copyright or license information that you may have added. With my simple example file, saving as Plain SVG reduced the file size from 2.1kB to 1.3kB. | **Your first choice is to save as “Plain SVG”. This strips out the proprietary Inkscape and Sodipodi namespaces, and their associated elements and attributes. It still leaves the other namespaces intact, so the file will still contain any metadata you entered into the Document Properties dialog. This option is ideal for use when linking to an SVG file via the <img> or <object> tabs, as it removes the data that the browser doesn’t understand, but leaves any copyright or license information that you may have added. With my simple example file, saving as Plain SVG reduced the file size from 2.1kB to 1.3kB. |
| The other choice is to save as “Optimised SVG”. This presents an additional dialog that lets you choose from a wide range of optimisations that can potentially reduce the file size. Be warned that this option can lead to quite extensive changes in the structure and content of your SVG file, so always test the resultant file to make sure you haven’t optimised away something important. Be particularly wary of reducing the number of significant digits too far, as this will affect the fidelity of your image.** | The other choice is to save as “Optimised SVG”. This presents an additional dialog that lets you choose from a wide range of optimisations that can potentially reduce the file size. Be warned that this option can lead to quite extensive changes in the structure and content of your SVG file, so always test the resultant file to make sure you haven’t optimised away something important. Be particularly wary of reducing the number of significant digits too far, as this will affect the fidelity of your image.** |
| |
| La première option est de sauvegarder en « SVG simple ». Dans celui-ci, les espaces de nommage propriétaires d'Inkscape et Sodipodi sont éliminés, ainsi que leurs éléments et attributs associés. Il conserve intacts les autres espaces de nommage, de sorte que le fichier contient encore toutes les métadonnées que vous avez saisies dans le dialogue Propriétés du document. Cette option est idéale pour une utilisation en lien avec un fichier SVG via les balises <img> ou <object>, car elle enlève les données que le navigateur ne comprend pas, mais conserve toutes les informations de copyright ou de licence que vous auriez pu ajouter. Avec mon fichier simple d'exemple, la sauvegarde en SVG simple réduit la taille du fichier de 2,1 kb à 1,3 kb. | La première option est de sauvegarder en « SVG simple ». Dans celui-ci, les espaces de nommage propriétaires d'Inkscape et Sodipodi sont éliminés, ainsi que leurs éléments et attributs associés. Il conserve intacts les autres espaces de nommage, de sorte que le fichier contient encore toutes les métadonnées que vous avez saisies dans le dialogue Propriétés du document. Cette option est idéale pour une utilisation en lien avec un fichier SVG via les balises <img> ou <object>, car elle enlève les données que le navigateur ne comprend pas, mais conserve toutes les informations de copyright ou de licence que vous auriez pu ajouter. Avec mon fichier simple d'exemple, la sauvegarde en SVG simple réduit la taille du fichier de 2,1 Kb à 1,3 Kb. |
| |
| L'autre choix est de sauvegarder en « SVG optimisé ». Celui-ci présente un dialogue additionnel qui vous permet de choisir dans un large éventail d'optimisations qui peuvent potentiellement réduire la taille du fichier. Maais attention : cette option peut conduire à des modifications très étendues dans la structure et le contenu de votre fichier SVG ; aussi, testez toujours le fichier résultant pour vous assurer que l'optimisation n'a pas supprimé quelque chose d'important. Méfiez-vous particulièrement d'une réduction trop poussée du nombre de chiffres significatifs, car ceci affecte la fidélité de votre image. | L'autre choix est de sauvegarder en « SVG optimisé ». Celui-ci présente un dialogue additionnel qui vous permet de choisir dans un large éventail d'optimisations qui peuvent potentiellement réduire la taille du fichier. Mais attention : cette option peut conduire à des modifications très étendues dans la structure et le contenu de votre fichier SVG ; aussi, testez toujours le fichier résultant pour vous assurer que l'optimisation n'a pas supprimé quelque chose d'important. Méfiez-vous particulièrement d'une réduction trop poussée du nombre de chiffres significatifs, car ceci affecte la fidélité de votre image. |
| |
| **When it comes to the additional namespace-related data, there are a couple of key fields to pay attention to. On the first tab, the “Keep editor data” checkbox determines whether the Inkscape and Sodipodi namespaces are preserved. | **When it comes to the additional namespace-related data, there are a couple of key fields to pay attention to. On the first tab, the “Keep editor data” checkbox determines whether the Inkscape and Sodipodi namespaces are preserved. |
| Also on the second tab, pay attention to the Pretty-printing options. Turning this off can reduce the size further, but if you’re trying to create a file to put inline in an HTML page, a little formatting can make it a lot easier to work with.** | Also on the second tab, pay attention to the Pretty-printing options. Turning this off can reduce the size further, but if you’re trying to create a file to put inline in an HTML page, a little formatting can make it a lot easier to work with.** |
| |
| Quant aux données additionnelles en lien avec les espaces de nommage, une attention particulière doit être portée à quelques champs-clés. Sur le premier onglet, la case « Conserver les données d'édition » détermine si les espaces de nommage Inkscape et Sodipodi sont préservés. | Quant aux données additionnelles en lien avec les espaces de nommage, une attention particulière doit être portée à quelques champs clés. Sur le premier onglet, la case « Conserver les données d'édition » détermine si les espaces de nommage Inkscape et Sodipodi sont préservés. |
| |
| Dans le deuxième onglet, l'option « Supprimer les métadonnées » fera disparaître tous les autres espaces de nommage, ainsi que toutes les métadonnées que vous pourriez avoir saisies dans les Propriétés du document. | Dans le deuxième onglet, l'option « Supprimer les métadonnées » fera disparaître tous les autres espaces de nommage, ainsi que toutes les métadonnées que vous pourriez avoir saisies dans les Propriétés du document. |
| Phew! We’ve covered quite a lot this month, from <object> tags to XML namespaces. If all you want to do is to include a static image in a web page, stick with the methods described last time. But as we move on to more advanced topics, such as incorporating code into our files, the details of this article will become more relevant.** | Phew! We’ve covered quite a lot this month, from <object> tags to XML namespaces. If all you want to do is to include a static image in a web page, stick with the methods described last time. But as we move on to more advanced topics, such as incorporating code into our files, the details of this article will become more relevant.** |
| |
| Et comment le SVG optimisé se compare-t-il au code écrit à la main ? Il n'atteint pas les 107 caractères de ma version soigneusement élaborée, mais, avec ses 277 caractères de SVG assez lisibles ce n'est pas du mauvais boulot. Dans la plupart des cas où vous voulez mettre en ligne votre image dans une page HTML, elle sera suffisante, avec moins de possibilités d'erreurs qu'en essayant de tout écrire à la main. | Et comment le SVG optimisé se compare-t-il au code écrit à la main ? Il n'atteint pas les 107 caractères de ma version soigneusement élaborée, mais, avec ses 277 caractères de SVG assez lisibles, ce n'est pas du mauvais boulot. Dans la plupart des cas où vous voulez mettre en ligne votre image dans une page HTML, elle sera suffisante, avec moins de possibilités d'erreurs qu'en essayant de tout écrire à la main. |
| |
| Ouf ! Nous en avons traité pas mal ce mois-ci, des balises <object> aux espaces de nommage du XML. Si tout ce que vous voulez faire est d'inclure une image statique dans une page Web, restez-en aux méthodes décrites la dernière fois. Mais au fur et à mesure que nous avançons dans des sujets plus pointus, tels que l'incorporation de code dans nos fichiers, les détails de cet article vont devenir plus pertinents. | Ouf ! Nous en avons traité pas mal ce mois-ci, des balises <object> aux espaces de nommage du XML. Si tout ce que vous voulez faire est d'inclure une image statique dans une page Web, restez-en aux méthodes décrites la dernière fois. Mais au fur et à mesure que nous avançons dans des sujets plus pointus, tels que l'incorporation de code dans nos fichiers, les détails de cet article vont devenir plus pertinents. |
| |
