**Over the past six years, this series has detailed just about every part of Inkscape, from basic shapes through to more complex features such as filters and path effects. With nothing more to cover, it’s time for this column to take a sharp turn from its previous tack: I’m going to look at how you can use graphics you’ve created in Inkscape on the world wide web.
On the surface, this might seem like a simple task – worthy of an instalment or two at most. But SVG is unlike any other graphics format; its XML heritage lends it to the same kind of manipulation with CSS and JavaScript as HTML, allowing for graphical tricks that go way beyond simply displaying a static image on a page. At the same time, you still have the option to treat SVG as a dumb image format, if that’s a better fit for your requirements.
Broadly speaking, there are four ways to include an Inkscape-created image in a web page. Each has its own pros and cons, which are outlined in the table shown above.**
Durant les six dernières années, cette série a détaillé presque chaque élément d'Inkscape, des formes de base jusqu'aux fonctionnalités les plus complexes comme les filtres et les effets de chemin. Il ne reste plus rien à traiter. C'est le moment, dans cette rubrique, de faire un grand changement de direction : je vais regarder comment vous pouvez utiliser les dessins que vous créez dans Inkscape dans le vaste Web mondial.
En surface, cela pourrait sembler une tâche simple - l'affaire d'un épisode, de deux au plus. Mais SVG ne ressemble pas aux autres formats graphiques : son héritage du XML le conduit au même type de manipulation du CSS et de Javascript que du HTML, permettant des astuces graphiques qui vont bien au-delà du simple affichage d'une image statique sur une page. En même temps, vous avez toujours la possibilité de traiter le SVG comme un format d'image simple, si ça convient mieux à vos besoins.
En gros, il y a quatre façons d'inclure une image créée avec Inkscape dans une page Web. Chacune a ses avantages et ses inconvénients, qui sont présentés dans le tableau ci-dessus.
**The first method is to simply avoid the whole SVG question entirely and export your image to a PNG file – possibly even converting it to a JPEG afterwards to reduce the file size, if the image doesn’t require transparency. The resultant raster image can be included in a web page via an tag, used on social media sites or blogs, and generally be treated the same way as a photo from a phone or digital camera. Because you’re effectively creating a snapshot of the image as it appears in Inkscape, you also don’t have to worry about missing fonts, flowed text, or mismatches in browsers’ rendering engines. The downside is that the exported raster image is no longer infinitely scalable in the same way as a vector image. You also lose any concept of the individual objects that made up the image, so it’s not possible to manipulate them individually using CSS animations or JavaScript.
The second approach relies on the fact that most modern browsers do a pretty decent job of rendering SVG – so why not just use the SVG file directly, rather than converting to a raster format first? This is as simple as referencing an SVG file in your tag, rather than a PNG or JPEG. Because the internal structure of your SVG is preserved, the browser knows about individual objects, so can animate them using CSS. In theory it could also allow JavaScript, but that’s prevented when using images like this, for security reasons.**
La première méthode évite complètement la question du SVG en exportant votre image vers un fichier PNG - avec même la possibilité ultérieure d'une conversion en JPEG pour réduire la taille du fichier, si votre image ne réclame pas de transparence. L'image bitmap résultante peut être incluse dans une page Web via une balise , utilisée dans les sites de réseaux sociaux ou de blogs, et traitée généralement de la même façon qu'une photo venant d'un téléphone ou d'un appareil photo. Parce que vous créez effectivement un instantané de l'image telle qu'elle apparaît dans Inkscape, vous n'avez pas à vous soucier de polices manquantes, de texte au kilomètre ou de différences dans les moteurs de rendu des navigateurs. L'inconvénient, c'est que l'image raster (ou bitmap) exportée n'est plus redimensionnable à l'infini comme l'est une image vectorielle. Vous perdez aussi tout ce qui rend individuels les objets qui composent l'image, ce qui fait que vous ne pouvez plus les manipuler individuellement en utilisant des animations en CSS ou en Javascript.
La seconde approche s'appuie sur le fait que les navigateurs les plus modernes fassent un travail plutôt remarquable de rendu du SVG - aussi, pourquoi ne pas utiliser directement le fichier SVG, plutôt que de le convertir d'abord en format raster ? C'est aussi simple que de référencer un fichier SVG dans votre balise , à la place d'un fichier PNG ou JPEG. Parce que la structure interne de votre SVG est préservée, le navigateur connaît les objets individuels, de sorte que vous pouvez les animer avec du CSS. En théorie, il permettrait aussi le Javascript, mais celui-ci doit être évité en utilisant de telles images, pour des raisons de sécurité.
**What does security have to do with an SVG image, you may wonder. Consider that many social media platforms, forums, and other websites, will let you upload your own SVG file, then expose it to other people on the site by using an tag. This would effectively give a malicious user a means to run their own JavaScript under the guise of the hosting website. The code could capture user’s keypresses, spoof a login dialog to record passwords, or redirect the user to another site entirely. Given that being able to upload an SVG file to a site and have it rendered as an image is generally a good thing, but that unfettered permission to run JavaScript in such a file could easily be abused, browsers take the sensible approach of allowing CSS animations to run (giving SVG an edge over raster images), but disallowing any JavaScript.
Unfortunately this method does come with one big drawback – though it’s a problem that diminishes every year. Because you are relying on your browser’s rendering engine to draw each object in your image, you no longer have complete control over the appearance of your image. For simple drawings, this isn’t generally a problem. But add in more advanced features, such as filters, and the output of the browsers begins to diverge.**
Que vient faire la sécurité dans une image SVG, vous demandez-vous ? Imaginez que beaucoup de plateformes de réseaux sociaux, forums et autre sites Web, vous laisseront télécharger votre propre fichier SVG, puis l'exposer ensuite aux autres personnes sur le site en utilisant la balise . Ceci donnerait effectivement un moyen à un utilisateur malicieux de faire tourner son propre Javascript sous couvert du site Web hôte. Le code pourrait capturer les frappes des utilisateurs sur leur clavier, parodier un identifiant d'utilisateur ou rediriger l'utilisateur vers un tout autre site. Étant donné qu'être capable de télécharger un fichier SVG sur un site et de le rendre sous forme d'image est généralement une bonne chose, mais que la permission d'exécuter JavaScript dans un tel fichier pourrait facilement être détournée, les navigateurs adoptent l'approche raisonnable de permettre aux animations CSS de fonctionner (donnant à SVG un avantage sur les images raster), mais interdisant tout JavaScript.
Malheureusement, cette méthode s'accompagne d'un seul gros désavantage - quoique celui-ci se réduit d'année en année. Parce que vous faites confiance au moteur de rendu de votre navigateur pour dessiner chaque objet de votre image, vous ne contrôlez plus complètement son apparence. Pour des dessins simples, ce n'est généralement pas un problème. Mais ajoutez des fonctions pointues, tels que des filtres, et les sorties de vos navigateurs commencent à diverger.
**Text rendering is a particularly significant problem. If the person viewing the image doesn’t have the same font installed on their machine that you used to create the document in the first place, it will be replaced with a different font. In HTML, this can be annoying, but usually the browser adjusts the page layout a little and no real harm is done. In an image format, however, it can be much more of a problem. Consider something like a comic strip: if the text is rendered at the wrong size it might not fit the speech bubbles; if it’s rendered in a different font it could change the feel of the narrative entirely. For this reason, I post all my comic strips as PNG or JPEG images, and link to the SVG files separately where I want to make the source files available for people to download.
The third approach is essentially another way of linking to an SVG file, but this time it uses the