**Having looked at the four main ways of including an SVG file in a web page, we’re going to start examining what you can actually do with SVG files that you can’t achieve with simple raster graphics.
Speaking of simple raster graphics, that’s the first of our four ways of including an image, and it’s one that I’m going to dismiss immediately. Once you convert your SVG to a raster graphic, be it a png, jpeg, or gif, it becomes no different in capability to a photo from a digital camera. You can display it in your web page, but that’s about it. Sure, with modern CSS and JavaScript you can make it respond to mouse events, and can use some SVG-style techniques such as masking, clipping and (basic) filtering – but none of those abilities come from the image itself. Your raster image is essentially a rectangle that can only be modified as a single entity, losing all notion of the individual objects in your original SVG file.**
Ayant regardé les quatre façons principales d'inclure un fichier SVG dans une page Web, nous allons commencer à examiner ce que vous pouvez faire avec ces fichiers SVG et que vous ne pouvez pas faire avec de simples fichiers raster (bitmap).
À propos des images graphiques simples raster, c'est la première des quatre manières d'inclure une image, et c'en est une que nous allons écarter immédiatement. Une fois que votre SVG est converti en image raster, que ce soit en png, jpeg ou gif, il n'est plus différent d'une photo venant d'un appareil numérique. Vous pouvez l'afficher dans votre page Web, mais c'est tout. Bien sûr, avec les modernes CSS et Javascript, vous pouvez lui faire répondre aux évènements de la souris, et vous pouvez utiliser des techniques de style SVG tels que le masquage, la découpe et le filtrage (basique), mais aucune de ces possibilités ne vient avec l'image elle-même. Votre image raster est en gros un rectangle qui peut seulement être modifié comme une entité unique, en perdant toute notion des objets individuels de votre fichier SVG original.
**So let’s move on to the second way of including an image: by linking directly to the SVG file. For this example, we’re going to use the following simple HTML page, which just contains a link to our SVG file in an tag:
SVG in HTML
As for the SVG file, it’s just a simple square, drawn in Inkscape, and centered in a square page.**
Aussi, passons à la deuxième façon d'inclure une image : en se reliant directement au fichier SVG. Pour cet exemple, nous allons utiliser la simple page HTML suivante, qui contient juste un lien vers notre fichier SVG dans une balise :
SVG in HTML
Quant au fichier SVG, ce n'est qu'un simple carré, dessiné dans Inkscape et centré dans une page carrée.
**I’m going to wade in and add some handwritten CSS to this file, so, for the sake of clarity (not to mention space), I’ve saved the image as an Optimized SVG. Everything I’m going to do would also work on an Inkscape SVG, but if you’re not familiar with editing XML files, it’s probably worth using optimized files, at least at first, so that you don’t have a load of extra elements and namespaces getting in the way. My optimized file looks like the codew shown below (with a few line breaks added for clarity – they won’t affect the image).
A hand-coded version of this image could be even smaller – there would be no need for a with a transform when the x and y coordinates of the could be adjusted directly. But this is, after all, an Inkscape column, so I’ll work with the output it gives me.**
Je vais intervenir pour ajouter un peu de CSS à la main dans ce fichier ; aussi, pour plus de clarté (pour ne pas citer l'espace), j'ai sauvegardé l'image comme SVG optimisé. Tout ce que je vais faire fonctionnerait aussi avec un SVG d'Inkscape, mais, si vous n'êtes pas habitué à la modification des fichiers XML, c'est probablement mieux d'utiliser des fichiers optimisés, au moins au début, afin d'éviter toute une charge d'éléments et d'espaces nommés supplémentaires qui vous gênent. Mon fichier optimisé ressemble au code montré ci-dessous (avec quelques retours à la ligne pour la clarté, ils n'ont pas d'effet sur l'image).
Une version codée à la main de cette image pourrait même être plus petite, il n'y aurait aucun besoin d'un avec une transformation si les coordonnées x et y du peuvent être ajustées directement. Mais, après tout, c'est un article sur Inkscape ; aussi, je travaillerai avec la sortie qu'il me donne.
**With my SVG file created and saved into the same directory as the HTML document, loading the latter into a web browser gives exactly the result you would expect: a web page with a square in it. So far, we haven’t really gained a lot over using a bitmap. Yes, technically it retains a better quality when scaled, and SVG files are often (though not always) smaller than their raster equivalents – but in many cases those are modest benefits at best.
But, even when used in an , there are some things we can do with an SVG file that can’t be done with a raster image. Unlike a raster image, an SVG file can include its own CSS code. Let’s begin by making our red square blue (note, I’ve abbreviated the
Quant au fichier SVG, ce n'est qu'un simple carré, dessiné dans Inkscape et centré dans une page carrée.
**I’m going to wade in and add some handwritten CSS to this file, so, for the sake of clarity (not to mention space), I’ve saved the image as an Optimized SVG. Everything I’m going to do would also work on an Inkscape SVG, but if you’re not familiar with editing XML files, it’s probably worth using optimized files, at least at first, so that you don’t have a load of extra elements and namespaces getting in the way. My optimized file looks like the codew shown below (with a few line breaks added for clarity – they won’t affect the image).
A hand-coded version of this image could be even smaller – there would be no need for a