issue142:inkscape
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Prochaine révision | Révision précédente | ||
| issue142:inkscape [2019/02/24 15:24] – créée auntiee | issue142:inkscape [2019/03/13 10:29] (Version actuelle) – andre_domenech | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | Over the past few months, you’d be forgiven for thinking that this column has morphed from an Inkscape tutorial to a more general “SVG in HTML” series. In practice, I’ve been introducing a little background knowledge before delving into the (limited) JavaScript features that are already present in Inkscape. But that requires just a little more background information about JavaScript itself, and its use in SVG on the web… | + | **Over the past few months, you’d be forgiven for thinking that this column has morphed from an Inkscape tutorial to a more general “SVG in HTML” series. In practice, I’ve been introducing a little background knowledge before delving into the (limited) JavaScript features that are already present in Inkscape. But that requires just a little more background information about JavaScript itself, and its use in SVG on the web… |
| - | JavaScript (JS) is the de facto programming language used in web pages. It’s an implementation of a language called ECMAScript, so you might occasionally see that term mentioned. It’s nothing to do with the Java programming language – it just shares a similar name thanks to someone in marketing at Netscape many years ago deciding that ‘brand awareness’ was more important than ‘avoiding decades of confusion’. | + | JavaScript (JS) is the de facto programming language used in web pages. It’s an implementation of a language called ECMAScript, so you might occasionally see that term mentioned. It’s nothing to do with the Java programming language – it just shares a similar name thanks to someone in marketing at Netscape many years ago deciding that ‘brand awareness’ was more important than ‘avoiding decades of confusion’.** |
| - | Within a browser, JavaScript gives you the capability to write code that can modify the page and respond to interactions initiated by the user, or by external actions such as some data being pushed from a server. These triggers are referred to as ‘events’, and will form the core of the JS code we’ll be writing in this series. The basic approach is that we’ll use SVG to draw something to the browser window, then attach events to monitor for clicks, mouse movements, keypresses, and so on, each of which then triggers some JS code which can, in turn, modify the SVG. | + | Au cours des quelques derniers mois, vous seriez pardonné si vous avez pensé que cette rubrique s' |
| - | Because | + | JavaScript |
| - | To prevent such attacks, browsers limit the ability of SVG to run JavaScript, depending on how the SVG has been included in the page. I’ve talked about this previously, but it’s worth recapping: | + | **Within a browser, JavaScript gives you the capability to write code that can modify the page and respond to interactions initiated by the user, or by external actions such as some data being pushed from a server. These triggers are referred to as ‘events’, |
| + | |||
| + | Because JavaScript can read keypresses from the user, and can talk to a server, it raises security concerns. You could, for example, use SVG to create a beautiful image, but as soon as the mouse moves over it, your JS could redraw the image to look like a legitimate username/ | ||
| + | |||
| + | Dans un navigateur, JavaScript vous donne la possibilité d' | ||
| + | |||
| + | Comme JavaScript peut lire les appuis de l' | ||
| + | |||
| + | |||
| + | **To prevent such attacks, browsers limit the ability of SVG to run JavaScript, depending on how the SVG has been included in the page. I’ve talked about this previously, but it’s worth recapping: | ||
| SVG in an < | SVG in an < | ||
| Ligne 16: | Ligne 25: | ||
| Inline SVG: | Inline SVG: | ||
| - | This requires the actual code of the page to be edited, so it’s assumed that the work is being done by someone in a trusted position, and therefore the browser allows JavaScript. | + | This requires the actual code of the page to be edited, so it’s assumed that the work is being done by someone in a trusted position, and therefore the browser allows JavaScript.** |
| - | SVG in an < | + | Pour empêcher de telles attaques, les navigateurs limitent la possibilité pour le SVG de lancer du JavaScript, selon comment le SVG a été incorporé dans la page. J'en avais parlé précédemment, |
| + | |||
| + | SVG dans un <img> : | ||
| + | C'est ainsi que les images sont généralement affichées dans une page Web, et c'est utilisé dans un nombre incalculable de sites de tableaux d' | ||
| + | |||
| + | SVG comme image d' | ||
| + | Bien que moins fréquemment utilisé par les utilisateurs pour téléverser des images, les bouts de code utilisés dans les navigateurs sont à peu près les mêmes pour les images du CSS que pour les éléments <img> ; aussi, la règle précédente s' | ||
| + | |||
| + | SVG en ligne : | ||
| + | Ceci requiert que le vrai code de la page soit édité ; aussi, il est admis que ce travail doit être fait par une personne de confiance et, donc, le JavaScript est autorisé. | ||
| + | |||
| + | |||
| + | **SVG in an < | ||
| This is the W3C standard way to include “foreign” content into a web page – including Flash, Java applets, and other potentially dangerous code. As such, it’s always had a more lax set of security rules than < | This is the W3C standard way to include “foreign” content into a web page – including Flash, Java applets, and other potentially dangerous code. As such, it’s always had a more lax set of security rules than < | ||
| SVG in an < | SVG in an < | ||
| - | Using an < | + | Using an < |
| - | There’s one final way to display an SVG image in a browser which doesn’t involve embedding it into an HTML file in any way, and that’s simply to load the SVG file directly. For an SVG file on your local machine, you can just press CTRL-O and find it in the file selector. For one sent by a web server, the browser’s URL field just has to point directly at the SVG image, and the browser will load it in the same manner as if you pointed directly at a PNG or JPEG file… | + | SVG dans un < |
| + | C'est la façon normative du W3C pour inclure du contenu « étranger » dans une page Web, y compris du Flash, des applets Java, et d' | ||
| - | …except it won’t. Not unless the server has been configured correctly. Which is a whole other story of politics and pain in which countless users and developers suffer from an ideological disagreement at a technical level. Brace yourself, this is going to get petty! | + | SVG dans une < |
| + | Une < | ||
| - | Serving an SVG file isn’t terribly tricky. Your web server has to be configured to send the right MIME type (a header that tells the browser what sort of file it’s receiving), but that’s usually a small configuration change. If you’ve got direct control over the configuration of your server, search online for some appropriate terms (e.g. “Apache SVG MIME”), and you should find suitable instructions. If your server is managed by someone else – such as the typical case of a website hosted by an ISP – first try putting an SVG image onto your site and accessing it, as there’s a good chance the configuration has already been done. If the file appears as text, the browser tries to save rather than display it, or there’s a message suggesting the browser’s treating it as an XML document, you’ll need to raise a support request with your host. | ||
| - | Where it gets more complex is with SVGZ files – “compressed SVG” in Inkscape’s terms. These are literally just SVG files that have been compressed using the Gzip algorithm, and you can get the same effect by using the gzip program on your Linux box: | + | **There’s one final way to display an SVG image in a browser which doesn’t involve embedding it into an HTML file in any way, and that’s simply to load the SVG file directly. For an SVG file on your local machine, you can just press CTRL-O and find it in the file selector. For one sent by a web server, the browser’s URL field just has to point directly at the SVG image, and the browser will load it in the same manner as if you pointed directly at a PNG or JPEG file… |
| + | |||
| + | …except it won’t. Not unless the server has been configured correctly. Which is a whole other story of politics and pain in which countless users and developers suffer from an ideological disagreement at a technical level. Brace yourself, this is going to get petty!** | ||
| + | |||
| + | Il y a une dernière façon d' | ||
| + | |||
| + | ...sauf qu'il ne le fera pas. Sauf si le serveur a été configuré correctement. Ce qui est une toute autre douloureuse histoire de grands principes dans lesquels d' | ||
| + | |||
| + | |||
| + | **Serving an SVG file isn’t terribly tricky. Your web server has to be configured to send the right MIME type (a header that tells the browser what sort of file it’s receiving), but that’s usually a small configuration change. If you’ve got direct control over the configuration of your server, search online for some appropriate terms (e.g. “Apache SVG MIME”), and you should find suitable instructions. If your server is managed by someone else – such as the typical case of a website hosted by an ISP – first try putting an SVG image onto your site and accessing it, as there’s a good chance the configuration has already been done. If the file appears as text, the browser tries to save rather than display it, or there’s a message suggesting the browser’s treating it as an XML document, you’ll need to raise a support request with your host.** | ||
| + | |||
| + | |||
| + | Envoyer un fichier SVG n'est pas terriblement compliqué. Votre serveur Web doit être configuré pour envoyer le bon type MIME (une entête qui dit au navigateur quel est le type de fichier qu'il reçoit), mais c'est, en général, une petite modification de la configuration. Si vous avez le contrôle direct de la configuration du serveur, cherchez en ligne avec les termes appropriés (par ex. « Apache SVG MIME ») et vous devriez trouver des instructions convenables. Si votre serveur est géré par quelqu' | ||
| + | |||
| + | **Where it gets more complex is with SVGZ files – “compressed SVG” in Inkscape’s terms. These are literally just SVG files that have been compressed using the Gzip algorithm, and you can get the same effect by using the gzip program on your Linux box: | ||
| gzip -k image.svg | gzip -k image.svg | ||
| Ligne 36: | Ligne 72: | ||
| mv image.svg.gz image.svgz | mv image.svg.gz image.svgz | ||
| - | The first line creates a gzipped version of “image.svg” but doesn’t overwrite the original file (due to the -k switch). Gzip defaults to simply appending “.gz” to the filename, so the second line renames the file to the standard “.svgz” (this could also be done directly with the “--suffix” switch to gzip). The resultant file can be directly loaded into Inkscape for further editing – it’s indistinguishable from a “compressed SVG” file saved from Inkscape itself. On the surface, SVGZ seems like a great format, as it’s much smaller than an equivalent SVG file, but you can still open it in Inkscape, or even convert back and forth from the command-line if you do want to edit the XML content by hand. The problems come when you try to put an SVGZ file online. | + | The first line creates a gzipped version of “image.svg” but doesn’t overwrite the original file (due to the -k switch). Gzip defaults to simply appending “.gz” to the filename, so the second line renames the file to the standard “.svgz” (this could also be done directly with the “--suffix” switch to gzip). The resultant file can be directly loaded into Inkscape for further editing – it’s indistinguishable from a “compressed SVG” file saved from Inkscape itself. On the surface, SVGZ seems like a great format, as it’s much smaller than an equivalent SVG file, but you can still open it in Inkscape, or even convert back and forth from the command-line if you do want to edit the XML content by hand. The problems come when you try to put an SVGZ file online.** |
| - | The W3C working group that created | + | Là où ça devient plus compliqué c'est avec les fichiers SVGZ - « SVG compressé » en termes d' |
| - | But saying that is like stating that browsers support only uncompressed HTML or CSS. In practice you can send any supported format with on-the-fly Gzip compression, | + | gzip -k image.svg |
| + | |||
| + | mv image.svg.gz image.svgz | ||
| + | |||
| + | La première ligne crée une version « g-zippée » de « image.svg » mais n' | ||
| + | |||
| + | |||
| + | **The W3C working group that created SVG thought, quite rightly, that defining a compressed form of the format as part of the spec would be a worthwhile addition, especially back in 2001 when storage space and bandwidth were more expensive. Gzipping of content on-the-fly was already a standard feature of the web, so browsers had decompression code in place, making for an obvious choice of algorithm. Unfortunately, | ||
| + | |||
| + | But saying that is like stating that browsers support only uncompressed HTML or CSS. In practice you can send any supported format with on-the-fly Gzip compression, | ||
| + | |||
| + | Le groupe de travail du W3G qui a créé SVG pensait, à juste titre, que la définition d'une forme compressée du format comme partie intégrante de la spécif. serait un ajout valable, surtout en 2001 quand l' | ||
| + | |||
| + | Mais dire cela, c'est comme faire état du seul support des HTML ou CSS non compressés dans les navigateurs. En pratique, vous pouvez envoyer n' | ||
| + | |||
| + | **The summary, therefore, is that browsers don’t really support SVGZ, but with the right server configuration, | ||
| + | |||
| + | En résumé, les navigateurs ne supportent donc pas vraiment le SVGZ, mais, avec la bonne configuration du serveur, vous pouvez les tromper et utiliser malgré tout ces fichiers. Cela explique aussi pourquoi vous ne pouvez pas charger directement un fichier SVGZ dans votre navigateur à partir de votre système de fichiers local - si le fichier ne vient pas d'un serveur Web, il n'y a aucune entête « content-encoding » et le navigateur décide de rester muet. Cette situation pourrait être facilement résolue si les navigateurs optaient pour traiter le SVGZ comme un format de fichier de première classe et les dézippaient automatiquement même en l' | ||
| - | The summary, therefore, is that browsers don’t | + | **Personally, I think the browser vendors are wrong on this one. JPEG images, for example, are essentially just arrays of pixels |
| - | Personally, I think the browser vendors are wrong on this one. JPEG images, | + | Personnellement, je pense que les fournisseurs de navigateurs ont tort dans ce cas. Les images |
| - | To begin our journey into the world of Inkscape and JavaScript, I’ll assume that you are able to load an Inkscape-created SVG file into your web browser, either from a web server or from the local filesystem. Later on, we’ll look at some differences that apply when you use < | + | **To begin our journey into the world of Inkscape and JavaScript, I’ll assume that you are able to load an Inkscape-created SVG file into your web browser, either from a web server or from the local filesystem. Later on, we’ll look at some differences that apply when you use < |
| Remember those JavaScript ‘events’ I spoke of earlier? Let’s use Inkscape to add some JS code that listens for a “click” event – the result of the user clicking on an object in our image. Create a new image, draw a simple object, then right-click on it and bring up the Object Properties dialog. At the bottom of the dialog is a series of fields, all with labels that start with the word “on”. If they’re not visible, you’ll need to click on the “Interactivity” label to expose them. In the “onclick” field, enter the following JavaScript code: | Remember those JavaScript ‘events’ I spoke of earlier? Let’s use Inkscape to add some JS code that listens for a “click” event – the result of the user clicking on an object in our image. Create a new image, draw a simple object, then right-click on it and bring up the Object Properties dialog. At the bottom of the dialog is a series of fields, all with labels that start with the word “on”. If they’re not visible, you’ll need to click on the “Interactivity” label to expose them. In the “onclick” field, enter the following JavaScript code: | ||
| + | |||
| + | alert(' | ||
| + | |||
| + | Pour commencer notre voyage dans le monde d' | ||
| + | |||
| + | Vous souvenez-vous des « events » du JavaScript dont j'ai parlé avant ? Utilisons Inkscape pour ajouter du code JS qui attend un événement « clic » - le résultat du clic de l' | ||
| alert(' | alert(' | ||
| - | Save the file and load it into your web browser. You should see the object you drew in Inkscape. Click on it to confirm that the browser presents you with a dialog that contains the word “Clicked”. This type of dialog, referred to as ‘an alert’, is the simplest form of output from JavaScript. You can display only a single string, and you can’t change the layout of the dialog or the label on the button. But writing even this most simplistic of code is a useful first step in any JavaScript application: | ||
| - | The single line of code you wrote above does one thing: | + | **Save the file and load it into your web browser. You should see the object you drew in Inkscape. Click on it to confirm that the browser presents you with a dialog that contains |
| + | The single line of code you wrote above does one thing: it calls a function named alert() when the user clicks the left mouse button (or taps) on the object to which you attached your code. The function is given a single parameter – a string containing the word “Clicked” – which it displays on the screen in a dialog. Let’s see how that code in Inkscape manifests itself in the SVG file. Open the SVG file in a text edito and, towards the bottom of the file, you should find something similar to the code shown on the next page, top right.** | ||
| + | Sauvegardez le fichier et chargez-le dans votre navigateur Web. Vous devriez voir l' | ||
| - | You might have a different element than a < | + | La simple ligne de code que vous avez écrite au-dessus fait une chose : elle appelle une fonction nommée alert() quand l' |
| + | |||
| + | **You might have a different element than a < | ||
| It’s worth getting familiar with the way that your JS appears in the file. Whilst the single-line text boxes in Inkscape are okay for typing very short amounts of code, if you need something even slightly more substantial, | It’s worth getting familiar with the way that your JS appears in the file. Whilst the single-line text boxes in Inkscape are okay for typing very short amounts of code, if you need something even slightly more substantial, | ||
| - | With those edits in place and saved, reload your page, and click on your object again. This time you should see a series of three alerts. | + | With those edits in place and saved, reload your page, and click on your object again. This time you should see a series of three alerts.** |
| - | Unfortunately, edits made like this don’t reflect well back in the Inkscape UI. Your three lines will be present, but all put onto a single line, and with any white space that you used to align them included in the line. Generally it’s easiest to edit code in either a text editor, or in Inkscape, but not to go back and forth between them. | + | Vous pourriez avoir un élément autre qu'un < |
| - | As you’ve guessed from the Inkscape UI, there are other events you can react to. But, in most cases, using the alert() function will prevent you testing correctly. Consider trying the onmousemove option, which is supposed to fire events continuously as your mouse moves over your object: as soon as your mouse moves over the object you’ll get an alert which you’ll need to dismiss before you can continue; then another, and another, each time your mouse moves over the object, with you having to manually dismiss each one in turn. Hardly the constant stream of events you were interested in. | + | Il vaut mieux être à l'aise avec la façon dont le JavaScript apparaît dans le fichier. Alors que des champs avec une seule ligne de texte conviennent pour saisir de très courtes quantités de code, si vous avez besoin de quelque chose de plus conséquent, il est souvent plus facile de modifier directement le SVG. Voici une version modifiée de mon objet (les attributs non concernés ont été éliminés), pour vous montrer comment gérer des lignes multiples |
| - | Back in the dim and distant past, debugging by throwing up alert messages was the de facto way to develop with JavaScript, but, thankfully, the tools have moved on a lot since then. Modern desktop browsers all have a developer toolbox which you can usually open by pressing F12. There are a variety of tools in here, but the one we’re interested in is the console – there should be a tab for it somewhere near the top of the toolbox. In Inkscape try adding a console.log(' | + | Ces modifications étant mises en place et sauvegardées, |
| + | |||
| + | **Unfortunately, | ||
| + | |||
| + | As you’ve guessed from the Inkscape UI, there are other events you can react to. But, in most cases, using the alert() function will prevent you testing correctly. Consider trying the onmousemove option, which is supposed to fire events continuously as your mouse moves over your object: as soon as your mouse moves over the object you’ll get an alert which you’ll need to dismiss before you can continue; then another, and another, each time your mouse moves over the object, with you having to manually dismiss each one in turn. Hardly the constant stream of events you were interested in.** | ||
| + | |||
| + | Malheureusement, | ||
| + | |||
| + | Comme vous l'avez deviné en regardant l' | ||
| + | |||
| + | **Back in the dim and distant past, debugging by throwing up alert messages was the de facto way to develop with JavaScript, but, thankfully, the tools have moved on a lot since then. Modern desktop browsers all have a developer toolbox which you can usually open by pressing F12. There are a variety of tools in here, but the one we’re interested in is the console – there should be a tab for it somewhere near the top of the toolbox. In Inkscape try adding a console.log(' | ||
| Now, with the file saved and the developer console open, reload your file in the browser. Clicking should throw up an alert, as before, but moving the mouse around over your object should generate a stream of messages in the console. Actually you’re likely to only see one message, plus a count to the right of the console indicating how many times the message has been logged. This is a convenience in modern tools to avoid filling your screen with duplicate messages. If you really want to see them streaming by, you can add a random number to your log entry so that each one becomes unique: | Now, with the file saved and the developer console open, reload your file in the browser. Clicking should throw up an alert, as before, but moving the mouse around over your object should generate a stream of messages in the console. Actually you’re likely to only see one message, plus a count to the right of the console indicating how many times the message has been logged. This is a convenience in modern tools to avoid filling your screen with duplicate messages. If you really want to see them streaming by, you can add a random number to your log entry so that each one becomes unique: | ||
| + | |||
| + | console.log(' | ||
| + | |||
| + | Il y a longtemps, le débogage par l' | ||
| + | |||
| + | Maintenant, le fichier étant sauvegardé et la console développeur ouverte, rechargez votre fichier dans le navigateur. Un clic devrait faire apparaître une alerte, comme précédemment, | ||
| console.log(' | console.log(' | ||
| - | This demonstrates another huge advantage of console.log() over alert() – you can give it multiple parameters, and they don’t all have to be strings. | + | **This demonstrates another huge advantage of console.log() over alert() – you can give it multiple parameters, and they don’t all have to be strings. |
| + | |||
| + | That’s a very basic start to adding some interactivity to an Inkscape file. We’ll be exploring this topic a lot more over the coming months, so please do try the simple exercises above so that you’ve got a good basis to build on as we make our events do more interesting things than just printing some text to the screen. ** | ||
| + | |||
| + | Ceci démontre l' | ||
| + | |||
| + | Ceci est un début très basique pour l' | ||
| + | |||
| + | **A blatant plug! | ||
| - | That’s a very basic start to adding some interactivity to an Inkscape | + | Mark and his colleague Vince have been using Inkscape |
| - | A blatant plug! | + | De la publicité manifeste |
| - | Mark and his colleague | + | Mark et son collègue |
issue142/inkscape.1551018272.txt.gz · Dernière modification : 2019/02/24 15:24 de auntiee