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 <img> 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 <img> 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 <img>, 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 <img>, à 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 <img> 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 <img>. 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 <object> element rather than an <img>. Whereas forums and social media sites are happy to expose a user’s file via an <img> link, they tend not to do the same via <object> – so, if you want to take this approach, you need to be able to edit the underlying HTML directly. This usually implies that you are creating content for your own domain, rather than just uploading something to a third-party site. What you gain from this extra requirement is an enhanced level of trust from the browser, allowing JavaScript in your image to execute. With sufficient knowledge and experience, it’s even possible to create two-way interactions between code on the page and in your image. But, again, you’re also at the whim of the browser in terms of the final rendering of your file.
Le rendu de texte est particulièrement problématique. Si la personne qui regarde l'image n'a pas installé sur sa machine la même police que celle avec laquelle vous avez créé l'image, elle sera remplacée par une autre police. En HTML, ceci peut être agaçant, mais, en général, le navigateur ajuste un peu la disposition de la page et il n'y a pas de gros dégâts. Cependant, dans un format d'image, le problème peut devenir bien plus important. Prenez par exemple une bande dessinée : si le rendu du texte n'est pas de la bonne taille, il pourrait ne pas rentrer dans les bulles ; s'il est rendu dans une autre police, l'impression narrative pourrait être complètement modifiée. Pour cette raison, je poste toutes mes bandes dessinées en tant qu'images PNG ou JPEG et les relie aux fichiers SVG séparément, là où je veux rendre les fichiers source disponibles aux gens pour les télécharger.
La troisième approche est en gros une autre façon de faire le lien avec un ficher SVG, mais, cette fois, elle utilise l'élément <object> au lieu de <img>. Si les sites des forums et des réseaux sociaux sont contents d'afficher le fichier d'un utilisateur via un lien <img>, il n'en va pas de même via <object> - aussi, si vous voulez prendre cette approche, vous devez être capable de modifier directement le HTML sous-jacent. Habituellement, ceci implique que vous créez du contenu pour votre propre domaine, au lieu de juste téléverser quelque chose sur un site tiers. Ce que vous gagnez avec cette exigence supplémentaire, c'est un meilleur niveau de confiance de la part du navigateur, permettant l'exécution de Javascript dans votre image. Avec suffisamment de connaissances et d'expérience, il est même possible de créer des interactions bidirectionnelles entre le code de la page et celui de votre image. Mais, à nouveau, vous êtes aussi à la merci du navigateur pour le rendu final de votre fichier.
The last approach is a relatively recent option. For years, SVG was neglected by the web developer community, largely because Microsoft refused to support it in earlier versions of Internet Explorer, at a time when it commanded the majority share of the market. But with later releases, Microsoft softened their stance, adding SVG support and paving the way for SVG to be promoted to a first-class citizen in the world of HTML5. Now, you can put a chunk of SVG code directly into your HTML and it will just work. And if you’re hand-coding your SVG, you no longer have to concern yourself with the complexities of namespaces in XML – just use the SVG tags in the same way as you would HTML. With this last method, the SVG is a direct part of your web page, so writing code to manipulate the image is much simpler than with the <object> approach. But it does mean that your SVG code is right there in the middle of your HTML. If all you’re doing is drawing a couple of simple objects, that might not be so bad, but including all the code from a complex drawing can quickly overwhelm the rest of your page, making it harder to work with the surrounding HTML. And, once more, your browser’s rendering engine might make poor work of your image.
La dernière approche est une option relativement récente. Pendant des années, SVG avait été négligée par la communauté des développeurs du Web, en grande partie parce que Microsoft refusait de la supporter dans les plus anciennes versions d'Internet Explorer, à une époque où il contrôlait la majeure partie du marché. Mais dans les versions récentes, Microsoft est revenu sur sa position, ajoutant le support de SVG et ouvrant la voie pour que SVG soit promu au niveau du citoyen de première classe dans le monde du HTML5. Maintenant, vous pouvez mettre un morceau de code SVG directement dans votre HTML et il fonctionnera. Et si vous codez votre SVG à la main, vous n'avez plus à vous inquiéter de la complexité des noms d'espace dans XML - il suffit d'utiliser les balises de SVG de la même façon que vous l'auriez fait dans HTML.
Avec cette dernière méthode, le SVG est un élément direct de votre page Web ; aussi, l'écriture du code pour manipuler une image est beaucoup plus facile que dans l'approche avec <object>. Mais cela signifie bel et bien que votre code est au milieu de votre HTML. Si tout ce que vous faîtes est de dessiner quelques objets simples, ça devrait pas être si mauvais, mais l'inclusion de tout le code pour un dessin complexe peut rapidement submerger le reste de la page, rendant difficile son fonctionnement avec le HTML qui l'entoure. Et, encore une fois, le moteur de rendu de votre navigateur pourrait ne pas bien traiter votre image.
Enough theory, let’s put it into practice. Next month, I’ll describe how to use <object> and inline SVG, but, this time, we’ll deal with the <img> methods. Begin by loading a simple image into Inkscape, or creating one from scratch if necessary. I’m going to work with this basic circle (the square around it is the Inkscape canvas): Let’s export this to a PNG image via the File > Export PNG Image… menu item. This opens a dialog in which to set the details for the export: I covered this dialog way back in part 12 of this series, but, for the purposes of creating a PNG to use online, you can ignore many of the options. You do need to decide what to export using the buttons at the top: usually this will be the entire page, the entirety of your drawing (which could be larger or smaller than the page), or a rectangle that encompasses the currently selected objects. I’ve chosen to export the whole page, as I want to include a little bit of blank space around my circle.
Assez de théorie ! Passons à la pratique. Le mois prochain, je décrirai comme utiliser <object> et le SVG en ligne, mais, cette fois-ci, nous nous occuperons des méthodes <img>. Commencez par charger une image simple dans Inkscape, ou créez-en une nouvelle si nécessaire. Je vais travailler avec ce cercle basique (le carré qui l'entoure est le canevas d'Inkscape) :
Exportons-la comme image PNG par la ligne de menu Fichier > Exporter au format PNG… Ceci ouvre un dialogue dans lequel régler les détails de l'exportation :
J'ai expliqué ce dialogue dans la partie 12 de la série, mais, pour les besoins de la création d'un PNG à utiliser en ligne, vous pouvez ignorer la plupart des options. Vous devez absolument décider ce que vous exportez en utilisant les boutons du haut : habituellement, ce sera la page entière, tout votre dessin (qui peut être plus grand ou plus petit que la page) ou un rectangle qui encadre tous les objets sélectionnés. J'ai choisi d'exporter toute la page, car je veux inclure un peu d'espace blanc autour du cercle.
Now comes the most important decision: how big do you want your image to be? This is set in the Image Size section, by adjusting the image dimensions or dpi (dots per inch). For web use, you can generally ignore the dpi option and go straight for setting the width and height in pixels. If you’re creating an image for a profile picture or banner ad, you’ll usually be told the dimensions your graphic must be. Note, however, that you can’t set these fields independently, so you’ll either have to create your design to the right proportions, or export a larger area that you can then crop in a bitmap editor such as The GIMP or Krita. The last setting required is the filename to export to. Click the Export As… button and navigate to your destination folder in the file selector. Enter a filename in the selector, making sure it ends in “.png”, and then use the file selector’s Save button to return your selected location and name to the export dialog. Despite the name of the button, this won’t have saved a PNG file anywhere; it’s just saved the export location. In order to actually save the file, you have to click the Export button.
C'est là qu'il faut prendre la décision la plus importante : quelle taille voulez-vous donner à votre image ? Elle est définie dans la section Taille de l'image, en ajustant les dimensions de l'image, en pixels par pouce (ppp). Pour une utilisation sur le Web, vous pouvez en général ignorer l'option des « ppp » et régler directement les largeur et hauteur en pixels. Si vous créez une image pour une photo de profil ou une bannière publicitaire, les dimensions de votre dessin vous auront été indiquées. Notez, cependant, que vous ne pouvez pas régler ces champs indépendamment l'un de l'autre ; aussi vous devrez, soit créer votre dessin aux bonnes proportions, soit exporter une zone plus étendue que vous pouvez ensuite retailler dans un éditeur bitmap comme GIMP ou Krita.
Le dernier réglage vous demande le nom du fichier vers lequel exporter. Cliquez sur le bouton Exporter sous… et naviguer jusqu'au dossier de destination dans le sélecteur de fichier. Entrez un nom de fichier dans le sélecteur, en vous assurant qu'il se termine par « .png », puis utilisez le bouton Enregistrer du sélecteur de fichier pour retourner la localisation et le nom sélectionnés au dialogue d'exportation. En dépit du nom du bouton, ceci n'aura pas sauvegardé votre fichier PNG ; seule la destination de l'exportation aura été enregistrée. Pour réellement sauvegarder votre fichier, vous devez cliquer sur le bouton Exporter.
You should now have a PNG file on disk that can be uploaded to just about any site that accepts user images. If you want to use it in your own HTML page, that’s easy too. If you’re already familiar with writing HTML then you almost certainly know how to link to your image. But if you’ve never written a line of HTML in your life, why not give it a try now – it’s not as tricky as you might think. In a text editor type the code shown below. Modify the “circle.png” string to suit the filename of your own PNG, and save the document into the same directory as the exported image, making sure to give the filename an extension of “.html”. Open the web browser of your choice, press CTRL-O to open the file selector, and load your HTML file. You should see a text heading with your PNG image displayed below it.
Maintenant, vous devriez avoir un fichier PNG sur le disque qui peut être téléversé sur n'importe quel site qui accepte des images des utilisateurs. Si vous voulez l'utiliser dans votre propre page HTML, c'est tout aussi facile. Si vous êtes déjà à l'aise avec l'écriture en HTML, vous savez presque certainement comment relier votre image. Mais, si vous n'avez jamais écrit la moindre ligne de HTML de votre vie, pourquoi ne pas essayer maintenant - ce n'est pas aussi compliqué que vous le pensez. Dans un éditeur de texte, tapez le code présenté ci-dessous.
Remplacez la chaîne « string.png » par le nom du fichier de votre propre PNG et enregistrez le document dans le même répertoire que l'image exportée, en vous assurant de donner l'extension « .html » au nom de fichier. Ouvrez le navigateur de votre choix, appuyez sur CTRL+O pour ouvrir le sélecteur de fichier et chargez votre fichier HTML. Vous devriez voir un texte d'en-tête avec votre image PNG affichée en dessous.
That wasn’t too tricky, was it? Linking directly to an SVG file is just as simple. If your original Inkscape file isn’t in the same directory as the HTML file, use File > Save a Copy… to put a copy of it there. When you look in the directory you should now see your HTML file, your exported PNG, and an SVG file. To get the latter to appear in your web page, just add the following lines below the existing image link: <h1>IMG tag (SVG)</h1> <img src=“circle.svg”></img> Save the file, switch to your browser, and press F5 to reload the page. You should see both your PNG image and the SVG version. There’s a good chance that the images aren’t the same size, but SVG files are scalable so we can fix that easily. Given that my PNG was exported at 250px in width, I can modify the <img> tag for the SVG file to set it to the same: <img src=“circle.svg” width=“250”></img>
Ce n'était pas trop compliqué, n'est-ce pas ? Relier directement une fichier SVG est vraiment simple. Si votre fichier Inkscape d'origine n'est pas dans le même répertoire que le fichier HTML, utilisez Fichier > Enregistrer une copie… pour y mettre une copie à cet endroit. Pour que cette dernière apparaisse dans votre page Web, il suffit d'ajouter les lignes suivantes sous le lien existant vers l'image :
<h1>IMG tag (SVG)</h1>
<img src=“circle.svg”></img>
Sauvegardez le fichier, passez sur votre navigateur et pressez F5 pour recharger la page. Vous devriez voir à la fois l'image PNG et la version SVG. Il y a de bonnes chances que les images ne soient pas de la même taille, mais les images SVG sont redimensionnables ; aussi, vous pouvez le régler facilement. Étant donné que mon PNG a été exporté avec 250 pixels de large, je peux modifier la balise <img> pour que le fichier SVG s'ajuste à celle -là :
<img src=“circle.svg” width=“250”></img>
Another press of F5 in the browser and you should find that both images are the same size. But what if we wanted them both to be larger? Try setting a width attribute on both of them, with a value of 1000 or more. Notice how blocky the PNG becomes, whilst the SVG is still rendered as smoothly as possible. That’s the main advantage of using an SVG file in a web page instead of a PNG. Linking to an image via an <img> tag is a common way to display user-submitted images on the web. But, when coding your own pages, images are often used in other ways as well, typically via CSS. You can use an SVG file wherever you would usually use a PNG in these cases. For example, let’s fill the background of our web page with copies of the SVG file using this chunk of CSS, inserted between the </head> and <body> sections of the HTML code: <style> body { background: url(“circle.svg”); background-size: 50px; } </style>
Un autre appui sur F5 dans le navigateur et vous devriez voir que les deux images ont la même taille. Mais que se passe-t-il si vous voulez que les deux images soient plus grandes ? Essayez de paramétrer un attribut de largeur pour chacune, avec une valeur de 1000 ou plus. Notez comme le PNG devient grossier, alors que le rendu du SVG est toujours aussi lissé que possible. C'est l'avantage principal d'utiliser un fichier SVG, à la place d'un PNG, dans un page Web.
La liaison à une image via la balise <img> est une manière classique d'afficher sur le Web des images proposées par l'utilisateur. Mais, quand vous codez vos propres pages, les images sont souvent utilisées aussi par d'autres méthodes, typiquement via CSS. Vous pouvez utiliser un fichier SVG dans les mêmes cas où vous utiliseriez habituellement un fichier PNG. Par exemple, remplissons l'arrière-plan de notre page Web avec des copies du fichier SVG, en utilisant ce bout de CSS, inséré entre les sections </head> et <body> du code HTML :
<style>
body {
background: url("circle.svg");
background-size: 50px;
}
</style>
Reload the page to see the result. As a rule, modern browsers will let you use an SVG image wherever a raster is allowed. But although the browser might be happy to do that, many websites still only let you upload pure raster formats such as PNG, GIF and JPEG. If you write your own HTML you have full control over what formats to use, but if you’re trying to upload an image to a third party site you may find your options limited. If you can use an SVG, though, I encourage you to do so. Only by ever more SVG content making its way online will browser vendors have an incentive to provide better support for the format, and the SVG working group have a chance to introduce more of the new features that would make this useful format even better.
Rechargez la page pour voir le résultat. La règle est que les navigateurs modernes vous laisseront utiliser une image SVG là où un bitmap est autorisé. Mais, bien que le navigateur puisse être heureux de le faire, beaucoup de sites Web ne vous laissent télécharger que de purs formats bitmap comme PNG, GIF ou JPEG. Si vous écrivez votre propre HTML, vous disposez du contrôle total sur les formats à utiliser, mais si vous essayez de télécharger une image sur le site d'un tiers, vous pourriez être limité dans vos options. Cependant, si vous pouvez utiliser un SVG, je vous encourage à le faire. Ce n'est qu'en augmentant le contenu SVG en ligne que les fournisseurs de navigateurs seront incités à fournir un meilleur support pour le format, et le groupe de travail SVG aura l'occasion d'introduire plus de nouvelles fonctionnalités qui rendraient ce format utile encore meilleur.