issue70:tutoriel_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édenteProchaine révision | Révision précédente | ||
issue70:tutoriel_inkscape [2013/05/17 21:42] – fredphil91 | issue70:tutoriel_inkscape [2013/05/22 18:08] (Version actuelle) – [9] auntiee | ||
---|---|---|---|
Ligne 13: | Ligne 13: | ||
====== 2 ====== | ====== 2 ====== | ||
- | The first version of the SVG spec was released in 2001, followed by version 1.1 in 2003. After that, several years were spent working on version 1.2, which was to include many additions and improvements – including additions to support text which will wrap and reflow to fill its container. The Inkscape developers spent quite some time implementing support for this “flowed text” format, fully anticipating its official release in the new SVG standard. | + | **The first version of the SVG spec was released in 2001, followed by version 1.1 in 2003. After that, several years were spent working on version 1.2, which was to include many additions and improvements – including additions to support text which will wrap and reflow to fill its container. The Inkscape developers spent quite some time implementing support for this “flowed text” format, fully anticipating its official release in the new SVG standard. |
- | Then SVG 1.2 withered and died. It never became a standard and to this day – 8 years later! – SVG 1.1 is still the latest official version of the SVG specification. This left Inkscape with the ability to create objects that are compatible with only an aborted spec, but, as this facility had made it into a release version of the software, it would break compatibility with users' files if the code was simply excised. The Inkscape developers took the pragmatic decision to leave the Flowed Text feature in place, even though using it will create files that other applications will not fully understand. | + | Then SVG 1.2 withered and died. It never became a standard and to this day – 8 years later! – SVG 1.1 is still the latest official version of the SVG specification. This left Inkscape with the ability to create objects that are compatible with only an aborted spec, but, as this facility had made it into a release version of the software, it would break compatibility with users' files if the code was simply excised. The Inkscape developers took the pragmatic decision to leave the Flowed Text feature in place, even though using it will create files that other applications will not fully understand.** |
+ | |||
+ | La première version de la spécification SVG est sortie en 2001, suivie par la version 1.1 en 2003. Après cela, plusieurs années ont été consacrées à travailler sur la version 1.2, qui devait inclure de nombreux ajouts et améliorations - y compris des ajouts de support de texte qui irait à la ligne pour remplir son contenant. Les développeurs d' | ||
+ | |||
+ | Ensuite, SVG 1.2 a périclité et disparu. Ce n'est jamais devenu une norme et à ce jour - 8 ans plus tard ! - SVG 1.1 est toujours la dernière version officielle de la spécification SVG. Ce qui a laissé à Inkscape le seul choix de créer des objets qui ne sont compatibles qu' | ||
====== 3 ====== | ====== 3 ====== | ||
- | As a result of this historical issue, Inkscape can create text in two different forms: the SVG 1.1 type, which doesn' | + | **As a result of this historical issue, Inkscape can create text in two different forms: the SVG 1.1 type, which doesn' |
Let's get practical and actually create some text. First select the Text tool by clicking its icon in the tool palette, or by pressing “T” or F8. | Let's get practical and actually create some text. First select the Text tool by clicking its icon in the tool palette, or by pressing “T” or F8. | ||
- | Now, simply click inside the drawing window and start typing. If you can't see anything, check that your color and opacity settings make sense via the status bar. Congratulations, | + | Now, simply click inside the drawing window and start typing. If you can't see anything, check that your color and opacity settings make sense via the status bar. Congratulations, |
+ | |||
+ | En raison de ce problème historique, Inkscape peut créer un texte sous deux formes différentes : de type SVG 1.1, qui ne se répartit pas de lui-même dans son conteneur (auquel je ferai référence comme texte SVG), et de type SVG 1.2 qui se répartit (texte encadré), mais qui n'est pas conforme à la spécification SVG. Le problème se pose parce qu'il est beaucoup trop facile de créer accidentellement un texte encadré, surtout si vous avez déjà utilisé d' | ||
+ | |||
+ | Passons à la pratique et créons réellement un texte. Sélectionnez d' | ||
+ | |||
+ | Maintenant, cliquez simplement dans la fenêtre de dessin et commencez à taper. Si vous voyez rien, vérifiez via la barre d' | ||
====== 4 ====== | ====== 4 ====== | ||
- | Some other graphics applications require you to drag a rectangle on the canvas to contain your text. This is especially common in desktop publishing programs such as Scribus, where almost everything is defined by drawing a frame to contain it. You can do this in Inkscape as well – just select the Text tool then click and drag a rectangle onto the canvas before typing. You've now created a Flowed Text object. With the Text tool still active, and the Flowed Text object selected, you should see a small square handle at the bottom-left of the text frame. By moving this handle you can change the size and shape of your frame, and the text will re-flow automatically. The following image shows the same Flowed Text object duplicated a couple of times in Inkscape. The copies have had their frame sizes changed, and you can easily see that the text has moved around, and, in the case of the bottom-right frame, it has been automatically truncated: | + | **Some other graphics applications require you to drag a rectangle on the canvas to contain your text. This is especially common in desktop publishing programs such as Scribus, where almost everything is defined by drawing a frame to contain it. You can do this in Inkscape as well – just select the Text tool then click and drag a rectangle onto the canvas before typing. You've now created a Flowed Text object. With the Text tool still active, and the Flowed Text object selected, you should see a small square handle at the bottom-left of the text frame. By moving this handle you can change the size and shape of your frame, and the text will re-flow automatically. The following image shows the same Flowed Text object duplicated a couple of times in Inkscape. The copies have had their frame sizes changed, and you can easily see that the text has moved around, and, in the case of the bottom-right frame, it has been automatically truncated: |
- | If we load this SVG file into Firefox, the result is a blank page. Firefox ignores the Flowed Text completely, and the same applies to almost every other application. Remember, the difference between creating SVG Text and Flowed Text is as simple as whether you just click, or click-drag. If you want to use your SVG files in other applications, | + | If we load this SVG file into Firefox, the result is a blank page. Firefox ignores the Flowed Text completely, and the same applies to almost every other application. Remember, the difference between creating SVG Text and Flowed Text is as simple as whether you just click, or click-drag. If you want to use your SVG files in other applications, |
+ | |||
+ | D' | ||
+ | |||
+ | Si nous chargeons ce fichier SVG dans Firefox, le résultat est une page blanche. Firefox ignore complètement les textes encadrés, et il se passe la même chose dans presque toutes les autres applications. Rappelez-vous, | ||
====== 5 ====== | ====== 5 ====== | ||
- | Despite the tone of the previous few paragraphs, there are sometimes valid reasons why you would want to use Flowed Text. If you don't want to use your Inkscape files in another application, | + | **Despite the tone of the previous few paragraphs, there are sometimes valid reasons why you would want to use Flowed Text. If you don't want to use your Inkscape files in another application, |
The real advantage of Flowed Text in Inkscape is that it can flow into shapes other than simple rectangles. First you will need a shape for the text to flow into: this can be any of the simple Inkscape primitives such as rectangles, ellipses and stars, or it can be a path element which allows you to create complex shapes using all the Boolean operations and node editing tools that have been described in previous articles. It must be a single object though, so can't be a group. You will also need some text, but it doesn' | The real advantage of Flowed Text in Inkscape is that it can flow into shapes other than simple rectangles. First you will need a shape for the text to flow into: this can be any of the simple Inkscape primitives such as rectangles, ellipses and stars, or it can be a path element which allows you to create complex shapes using all the Boolean operations and node editing tools that have been described in previous articles. It must be a single object though, so can't be a group. You will also need some text, but it doesn' | ||
As with normal Flowed Text, this will not be understood by other SVG applications. You can still use Text > Convert to Text, although with very complex paths you may find that the text shifts around a lot during the conversion. Nevertheless, | As with normal Flowed Text, this will not be understood by other SVG applications. You can still use Text > Convert to Text, although with very complex paths you may find that the text shifts around a lot during the conversion. Nevertheless, | ||
- | Now that you know how to create basic text objects in their various forms, it's time to exert a little more control over the style of your words. Most commonly, you'll want to choose a suitable font, set its size, and perhaps change the justification. All of these options are available from the Tool Control Bar, and, although they can be changed at any time, it's often easier to set them before you click (or click-drag) to place your text cursor to avoid problems with the focus being in the wrong place when you start to type. | + | Now that you know how to create basic text objects in their various forms, it's time to exert a little more control over the style of your words. Most commonly, you'll want to choose a suitable font, set its size, and perhaps change the justification. All of these options are available from the Tool Control Bar, and, although they can be changed at any time, it's often easier to set them before you click (or click-drag) to place your text cursor to avoid problems with the focus being in the wrong place when you start to type.** |
+ | |||
+ | Malgré le ton des quelques paragraphes précédents, | ||
+ | |||
+ | Le véritable avantage du texte encadré dans Inkscape est qu'il peut se répartir dans des formes autres que de simples rectangles. D' | ||
+ | |||
+ | Comme avec un texte encadré normal, ce ne sera pas compris par d' | ||
+ | Maintenant que vous savez comment créer des objets de texte de base dans leurs différentes formes, il est temps de contrôler un peu plus le style de vos mots. Le plus souvent, vous aurez envie de choisir une police appropriée, | ||
====== 6 ====== | ====== 6 ====== | ||
- | The drop down menu to the left of the toolbar lets you select a font. Inkscape can be a little fussy about its fonts, so you may find that some fonts on your system aren't available, especially those that haven' | + | **The drop down menu to the left of the toolbar lets you select a font. Inkscape can be a little fussy about its fonts, so you may find that some fonts on your system aren't available, especially those that haven' |
- | The size drop-down lets you pick from a few predefined sizes, all in units of “SVG pixels”. You can also type directly into this box to specify a different size, but there' | + | The size drop-down lets you pick from a few predefined sizes, all in units of “SVG pixels”. You can also type directly into this box to specify a different size, but there' |
+ | |||
+ | Le menu déroulant à gauche de la barre d' | ||
+ | |||
+ | La liste déroulante des tailles vous permet de choisir parmi quelques tailles prédéfinies, | ||
====== 7 ====== | ====== 7 ====== | ||
- | Finally, there are four buttons for setting the text's justification. Left, centre and right justification can be used for any piece of text, but full justification (where the program tries to line up both the start and end of every line) is available only for flowed text. You can convert fully justified flowed text into SVG text – which does a surprisingly good job of maintaining the justification, | + | **Finally, there are four buttons for setting the text's justification. Left, centre and right justification can be used for any piece of text, but full justification (where the program tries to line up both the start and end of every line) is available only for flowed text. You can convert fully justified flowed text into SVG text – which does a surprisingly good job of maintaining the justification, |
- | Having created your text objects in Inkscape, you may want to transfer the SVG file to another machine, or post it online. In doing so, there' | + | Having created your text objects in Inkscape, you may want to transfer the SVG file to another machine, or post it online. In doing so, there' |
+ | |||
+ | Enfin, il y a quatre boutons pour le réglage de la justification du texte. Les justifications à gauche, centré et à droite peuvent être utilisées pour n' | ||
+ | |||
+ | Après avoir créé vos objets texte dans Inkscape, vous pouvez vouloir transférer le fichier SVG sur une autre machine, ou le mettre en ligne. Dans ce cas, il y a une bonne chance que vous rencontriez un problème de polices manquantes. Le texte dans les fichiers SVG est stocké comme une chaîne de caractères, | ||
====== 8 ====== | ====== 8 ====== | ||
- | There are four possible solutions to this problem: | + | **There are four possible solutions to this problem: |
• Ensure that the required fonts are present also on the destination machine. This may not be possible if it's not your computer, or if the font licence prohibits it. | • Ensure that the required fonts are present also on the destination machine. This may not be possible if it's not your computer, or if the font licence prohibits it. | ||
• Don't use the SVG format to transfer files to other systems. For my comics, I always export a PNG version of the file to ensure that my readers see a pixel-perfect representation of the image. Exporting to other formats will be the subject of part 12 of this series. | • Don't use the SVG format to transfer files to other systems. For my comics, I always export a PNG version of the file to ensure that my readers see a pixel-perfect representation of the image. Exporting to other formats will be the subject of part 12 of this series. | ||
• Only use commonly available fonts. This is not a perfect solution, but may be viable in some circumstances. My “Greys” comics, for which I make the SVG files available to download, use the ubiquitous “Arial” font for this reason. Even with that precaution, they often display poorly in a web browser, and although this approach makes it easier to open the files in Inkscape, I still produce PNG versions for the benefit of casual readers. | • Only use commonly available fonts. This is not a perfect solution, but may be viable in some circumstances. My “Greys” comics, for which I make the SVG files available to download, use the ubiquitous “Arial” font for this reason. Even with that precaution, they often display poorly in a web browser, and although this approach makes it easier to open the files in Inkscape, I still produce PNG versions for the benefit of casual readers. | ||
- | • Convert your text into paths before saving the file. | + | • Convert your text into paths before saving the file.** |
+ | |||
+ | Il existe quatre solutions à ce problème : | ||
+ | • Veillez à ce que les polices nécessaires soient présentes également sur la machine de destination. Cela peut ne pas être possible si ce n'est pas votre ordinateur, ou si la licence de la police l' | ||
+ | |||
+ | • N' | ||
+ | • Utilisez uniquement des polices couramment disponibles. Ce n'est pas une solution parfaite, mais peut être viable dans certaines circonstances. Mes BD « Greys », pour lesquels les fichiers SVG sont disponibles au téléchargement, | ||
+ | • Convertissez votre texte en chemins avant d' | ||
====== 9 ====== | ====== 9 ====== | ||
- | That last solution is as simple as selecting the text then the Path > Object to Path menu entry. In Inkscape 0.48, your text will be replaced with some identical looking paths, one for each letter, grouped together. Earlier versions simply produced a single composite path that contained all the letters. Once converted to paths, the text is just another collection of shapes in your SVG file and no longer require the fonts to be installed. | + | **That last solution is as simple as selecting the text then the Path > Object to Path menu entry. In Inkscape 0.48, your text will be replaced with some identical looking paths, one for each letter, grouped together. Earlier versions simply produced a single composite path that contained all the letters. Once converted to paths, the text is just another collection of shapes in your SVG file and no longer require the fonts to be installed. |
+ | |||
+ | This might sound like an ideal solution, but does come with a drawback: your “text” is no longer a text object, so can no longer be edited using the text Tool in Inkscape. If you decide to use this approach I recommend performing the conversion to paths as late as possible. You should also make a copy of the text object before you do so, in case you need to edit it again at a later date. The text object should then be put onto a hidden layer, dropped behind some other object, made transparent, | ||
+ | |||
+ | Cette dernière solution est aussi simple que de sélectionner le texte, puis le menu Chemin > Objet en chemin. Dans Inkscape 0.48, votre texte sera remplacé par des chemins parfaitement ressemblants, | ||
- | This might sound like an ideal solution, | + | Cela peut sembler une solution |
issue70/tutoriel_inkscape.1368819755.txt.gz · Dernière modification : 2013/05/17 21:42 de fredphil91