| Les deux révisions précédentesRévision précédente | |
| issue133:inkscape [2018/06/11 09:15] – auntiee | issue133:inkscape [2018/06/17 10:53] (Version actuelle) – christo.2so |
|---|
| 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. | 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, elle 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 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. | 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 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.** | 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é 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 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é. | 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é. |
| 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.** | 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é que la capacité à téléverser un fichier SVG sur un site Web et le rendre comme une image est en général une bonne chose, mais que cette permission inconditionnelle de faire tourner du Javascript dans un tel fichier peut facilement être détournée, les navigateurs prennent l'approche raisonnable de permettre de faire tourner des animations avec du CSS (donnant un avantage au SVG par rapport aux images bitmap), mais sans autoriser le Javascript. | 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. | 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. |
| 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. | 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 une é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. | 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): | **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): |
| **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.** | **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 que si plus de contenu SVG fait son trou en ligne que les fournisseurs de navigateurs auront une incitation à fournir un meilleur support à ce format, et le groupe de travail SVG aura une chance d'introduire plus de nouvelles fonctionnalités qui rendront ce format utile encore meilleur. | 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. |
