| Les deux révisions précédentesRévision précédente | |
| issue141:inkscape [2019/02/01 14:46] – auntiee | issue141:inkscape [2019/02/09 07:14] (Version actuelle) – andre_domenech |
|---|
| Dans les derniers mois, nous avons regardé divers astuces et effets qui peuvent être réalisés en utilisant un fichier SVG dans une page Web via l'élément HTML <img>. Mais une telle utilisation d'un fichier SVG est soumise à diverses restrictions de sécurité imposées par le navigateur, vous empêchant de faire référence à des fichiers externes (polices, css, bitmap liés) ou d'utiliser du JavaScript. Aussi, maintenant, nous allons passer à d'autres méthodes d'utilisation du SVG dans une page Web, qui offrent un plus large espace à la personnalisation. | Dans les derniers mois, nous avons regardé divers astuces et effets qui peuvent être réalisés en utilisant un fichier SVG dans une page Web via l'élément HTML <img>. Mais une telle utilisation d'un fichier SVG est soumise à diverses restrictions de sécurité imposées par le navigateur, vous empêchant de faire référence à des fichiers externes (polices, css, bitmap liés) ou d'utiliser du JavaScript. Aussi, maintenant, nous allons passer à d'autres méthodes d'utilisation du SVG dans une page Web, qui offrent un plus large espace à la personnalisation. |
| |
| Cet article regardera une petite astuce du CSS pour hériter d'une couleur de votre page HTML dans votre SVG. Malheureusement, les lois encadrant le CSS font que celui-ci ne marche que si vous intégrez correctement votre code SVG dans votre HTML. Ceci nécessite du soin et de l'attention, mais n'est pas vraiment difficile, car vous pouvez en grande partie copier/coller le contenu de votre fichier SVG à partir d'un éditeur de texte. La taille de votre fichier HTML va enfler, mais, en retour, vous gagnerez de la place en n'ayant pas à télécharger une image SVG séparée. Commençons avec une page HTML basique (en haut à droite). | Cet article se penchera sur une petite astuce du CSS pour hériter d'une couleur de votre page HTML dans votre SVG. Malheureusement, les lois encadrant le CSS font que celui-ci ne marche que si vous intégrez correctement votre code SVG dans votre HTML. Ceci nécessite du soin et de l'attention, mais n'est pas vraiment difficile, car vous pouvez en grande partie copier/coller le contenu de votre fichier SVG à partir d'un éditeur de texte. La taille de votre fichier HTML va enfler, mais, en retour, vous gagnerez de la place en n'ayant pas à télécharger une image SVG séparée. Commençons avec une page HTML basique (en haut à droite). |
| |
| **Now we need some SVG to put into the file. For this demonstration, I created a simple rounded rectangle in Inkscape, then saved it as in “Optimised SVG” format to clear out a lot of the unnecessary metadata and other content. Even then, I was able to manually trim the resulting file a little further, as the namespace declaration isn’t required, and I was left with a single <g> wrapping the content which serves no purpose in this case. | **Now we need some SVG to put into the file. For this demonstration, I created a simple rounded rectangle in Inkscape, then saved it as in “Optimised SVG” format to clear out a lot of the unnecessary metadata and other content. Even then, I was able to manually trim the resulting file a little further, as the namespace declaration isn’t required, and I was left with a single <g> wrapping the content which serves no purpose in this case. |
| The result of the export, manual trimming, and reformatting to fit the magazine, was the chunk of SVG shown below.** | The result of the export, manual trimming, and reformatting to fit the magazine, was the chunk of SVG shown below.** |
| |
| Nous avons besoin maintenant d'un SVG à mettre dans le fichier. Pour cette démonstration, j'ai créé dans Inkscape un simple rectangle aux angles arrondis, puis je l'ai sauvegardé dans le format « SVG optimisé » pour effacer un bon nombre de méta-données sans utilité et d'autres contenus. J'ai même ensuite été capable d'affiner encore un peu plus le fichier résultant à la main, car la déclaration des noms d'espace n'est pas nécessaire et je me suis retrouvé avec un <g> unique encadrant du contenu qui n'a aucun intérêt dans ce cas-ci. | Nous avons besoin maintenant d'un SVG à mettre dans le fichier. Pour cette démonstration, j'ai créé dans Inkscape un simple rectangle aux angles arrondis, puis je l'ai sauvegardé dans le format « SVG optimisé » pour effacer un bon nombre de métadonnées sans utilité et d'autres contenus. J'ai même ensuite été capable d'affiner encore un peu plus le fichier résultant à la main, car la déclaration des noms d'espace n'est pas nécessaire et je me suis retrouvé avec un <g> unique encadrant du contenu qui n'a aucun intérêt dans ce cas-ci. |
| |
| Dans le dialogue de sauvegarde, j'ai pris l'option « Convertir les attributs CSS en attributs XML ». Ceci divise l'attribut « style », autrement très densément rempli, en une série d'attributs de présentation individuels. Le faire n'est pas absolument nécessaire, car cette technique marche tout aussi bien avec l'attribut style, ou même une section <style> quelque part ailleurs dans le XML, mais l'éclatement du style dans des attributs séparés rend plus claires les explications sur ce qui se passe. | Dans le dialogue de sauvegarde, j'ai pris l'option « Convertir les attributs CSS en attributs XML ». Ceci divise l'attribut « style », autrement très densément rempli, en une série d'attributs de présentation individuels. Le faire n'est pas absolument nécessaire, car cette technique marche tout aussi bien avec l'attribut style, ou même une section <style> quelque part ailleurs dans le XML, mais l'éclatement du style dans des attributs séparés rend plus claires les explications sur ce qui se passe. |
| Vous serez pardonné de ne pas être terriblement enthousiasmé par ceci, mais, revenez un pas en arrière et pensez à ce que vous avez réalisé : vous avez fixé une couleur dans votre contenu SVG, basée sur une valeur du CSS de votre HTML. Vous ne comprenez toujours pas ? Ajoutons un identifiant (ID) dans l'élément <rect>, puis créons quelques sections <div> supplémentaires (ci-dessous). | Vous serez pardonné de ne pas être terriblement enthousiasmé par ceci, mais, revenez un pas en arrière et pensez à ce que vous avez réalisé : vous avez fixé une couleur dans votre contenu SVG, basée sur une valeur du CSS de votre HTML. Vous ne comprenez toujours pas ? Ajoutons un identifiant (ID) dans l'élément <rect>, puis créons quelques sections <div> supplémentaires (ci-dessous). |
| |
| Au cas où vous ne l'auriez pas deviné, l'élément <use> vous permet de réutiliser une bribe du SVG ailleurs, en référençant son ID dans la partie de l'URL faite pour l'identificateur de fragment, dans l'attribut « href ». Ici, nous faisons référence à un élément du même fichier ; aussi, nous n'avons pas besoin de l'URL complète - seulement l'identificateur de fragment (l'ID précédé d'un #). Ainsi, ce code dit simplement au navigateur de faire le rendu de trois copies de notre <rect> ; mais, avec le CSS de chaque <div>, en combinaison avec l'utilisation de currentColor dans le SVG, le résultat est un feu tricolore d'aspect cubiste. | Au cas où vous ne l'auriez pas deviné, l'élément <use> vous permet de réutiliser une bribe du SVG ailleurs, en référençant son ID dans la partie de l'URL faite pour l'identificateur de fragment, dans l'attribut « href ». Ici, nous faisons référence à un élément du même fichier ; aussi, nous n'avons pas besoin de l'URL complète, seulement l'identificateur de fragment (l'ID précédé d'un #). Ainsi, ce code dit simplement au navigateur de faire le rendu de trois copies de notre <rect> ; mais, avec le CSS de chaque <div>, en combinaison avec l'utilisation de currentColor dans le SVG, le résultat est un feu tricolore d'aspect cubiste. |
| |
| **Let’s put this to a more practical use. How about icons for a website? Here (shown right) I’ve created four icons, each in a separate layer in Inkscape, and given each layer a descriptive ID. The details of the paths are omitted for brevity. The “color” attributes are removed, and the fill or stroke color set to “currentColor” as necessary. Then the whole SVG block is hidden using CSS in the <svg> element. | **Let’s put this to a more practical use. How about icons for a website? Here (shown right) I’ve created four icons, each in a separate layer in Inkscape, and given each layer a descriptive ID. The details of the paths are omitted for brevity. The “color” attributes are removed, and the fill or stroke color set to “currentColor” as necessary. Then the whole SVG block is hidden using CSS in the <svg> element. |
| Faisons de ceci une utilisation plus pratique. Pourquoi pas des icônes pour un site Web ? Ici (voir à droite), j'ai créé quatre icônes, chacune sur un calque séparé dans Inkscape, et donné à chaque calque un ID descriptif. Les détails des chemins sont omis pour faire court. Les attributs « color » sont enlevés, et les couleurs de remplissage et de contour sont réglées sur « currentColor » comme il se doit. Ensuite, tout le bloc SVG est masqué en utilisant le CSS de l'élément <svg>. | Faisons de ceci une utilisation plus pratique. Pourquoi pas des icônes pour un site Web ? Ici (voir à droite), j'ai créé quatre icônes, chacune sur un calque séparé dans Inkscape, et donné à chaque calque un ID descriptif. Les détails des chemins sont omis pour faire court. Les attributs « color » sont enlevés, et les couleurs de remplissage et de contour sont réglées sur « currentColor » comme il se doit. Ensuite, tout le bloc SVG est masqué en utilisant le CSS de l'élément <svg>. |
| |
| Maintenant, chaque icône de cet ensemble peut être affichée individuellement sur la page via un élément <use>, avec sa taille et sa couleur définies dans l'élément SVG qui contient le <use>, ou même, dans l'élément parent qui est au-dessus de lui - comme démontré avec ces quelques sections (page suivante, en haut à droite). | Maintenant, chaque icône de cet ensemble peut être affichée individuellement sur la page via un élément <use>, avec sa taille et sa couleur définies dans l'élément SVG qui contient le <use>, ou même, dans l'élément parent qui est au-dessus de lui, comme démontré avec ces quelques sections (page suivante, en haut à droite). |
| |
| **Of course the color could be set at a much higher level on the page, so it needs to be set only once for the whole page – or you could use CSS variables for the same effect. Now a change to a single color will alter all the icons used on your page: you’ve just created a means of applying a theme. Because the CSS “color” property also affects the text on the page, you can ensure that your icons are kept in sync with the text, whichever theme is selected. As a demonstration, suppose we use a block like this several times (next page, bottom right). | **Of course the color could be set at a much higher level on the page, so it needs to be set only once for the whole page – or you could use CSS variables for the same effect. Now a change to a single color will alter all the icons used on your page: you’ve just created a means of applying a theme. Because the CSS “color” property also affects the text on the page, you can ensure that your icons are kept in sync with the text, whichever theme is selected. As a demonstration, suppose we use a block like this several times (next page, bottom right). |
| For each copy of this block, we’ll change the color values in the <div>. A little extra CSS adds a border that also has its color set to “currentColor”, and for some of the copies we’ll even put in a “background” property to produce an inverted look. Here’s the result of a few minutes of copying, pasting, and editing some CSS – all with only a single copy of the SVG icons, each referenced multiple times:** | For each copy of this block, we’ll change the color values in the <div>. A little extra CSS adds a border that also has its color set to “currentColor”, and for some of the copies we’ll even put in a “background” property to produce an inverted look. Here’s the result of a few minutes of copying, pasting, and editing some CSS – all with only a single copy of the SVG icons, each referenced multiple times:** |
| |
| Bien sûr, la couleur pourrait être définie à un niveau beaucoup plus haut dans la page afin qu'elle ne doive l'être qu'une seule fois pour toute la page - ou vous pourriez utiliser des variables du CSS pour obtenir le même effet. Attention : la modification d'une seule couleur changera toutes les icônes utilisées sur votre page : vous venez de créer un moyen d'appliquer un thème. Comme la propriété « color » du CSS s'applique aussi au texte de la page, vous pouvez vous assurer que vos icônes restent synchronisées avec le texte, quelque soit le thème sélectionné. Pour le démontrer, supposez que nous utilisions plusieurs fois un bloc comme celui-ci (page suivante, en bas à droite). | Bien sûr, la couleur pourrait être définie à un niveau beaucoup plus haut dans la page afin qu'elle ne doive l'être qu'une seule fois pour toute la page - ou vous pourriez utiliser des variables du CSS pour obtenir le même effet. Attention : la modification d'une seule couleur changera toutes les icônes utilisées sur votre page : vous venez de créer un moyen d'appliquer un thème. Comme la propriété « color » du CSS s'applique aussi au texte de la page, vous pouvez vous assurer que vos icônes restent synchronisées avec le texte, quel que soit le thème sélectionné. Pour le démontrer, supposez que nous utilisions plusieurs fois un bloc comme celui-ci (page suivante, en bas à droite). |
| |
| Pour chaque copie de ce bloc, nous changerons les valeurs des couleurs dans <div>. Un petit supplément de CSS ajoute une bordure dont la couleur est aussi réglée sur « currentColor » et, pour certaines de ces copies, nous ajouterons même une propriété « background » pour produire un effet inversé. Voici le résultat de quelques minutes passées à copier, coller et modifier un peu de CSS - tout ça avec une copie unique des icônes SVG, chacune référencée plusieurs fois. | Pour chaque copie de ce bloc, nous changerons les valeurs des couleurs dans <div>. Un petit supplément de CSS ajoute une bordure dont la couleur est aussi réglée sur « currentColor » et, pour certaines de ces copies, nous ajouterons même une propriété « background » pour produire un effet inversé. Voici le résultat de quelques minutes passées à copier, coller et modifier un peu de CSS - tout ça avec une copie unique des icônes SVG, chacune référencée plusieurs fois. |
| **I’ll confess this trick of using currentColor in SVG is a limited one. The SVG has to be inlined with your HTML, and you can change only a single color. But, with a cleverly designed SVG file, it’s possible to give the impression of something more sophisticated – by masking the colored element with a gradient, or using a filter to alter the color, for example. There is one interesting thing to note about this technique: it will work in Internet Explorer right the way back to version 9! If you need to theme some icons on a website, but still need IE support (so no CSS variables), this might be just the trick you need.** | **I’ll confess this trick of using currentColor in SVG is a limited one. The SVG has to be inlined with your HTML, and you can change only a single color. But, with a cleverly designed SVG file, it’s possible to give the impression of something more sophisticated – by masking the colored element with a gradient, or using a filter to alter the color, for example. There is one interesting thing to note about this technique: it will work in Internet Explorer right the way back to version 9! If you need to theme some icons on a website, but still need IE support (so no CSS variables), this might be just the trick you need.** |
| |
| Je dois avouer que cette astuce d'utiliser currentColor dans SVG a des limites. Le SVG doit être intégré dans votre HTML, et vous ne pouvez changer qu'une seule couleur. Mais, avec un fichier SVG intelligemment conçu, il est possible de donner l'impression de quelque chose de plus sophistiqué - en masquant l'élément coloré avec un dégradé ou en utilisant un filtre pour altérer la couleur, par exemple. Une chose est intéressante à noter à propos de cette technique : elle fonctionnera bien dans Internet Explorer dans la version 9 et supérieures! Si vous avez besoin d'appliquer un thème à quelques icônes dans un site Web, mais avez encore besoin de prendre IE en charge (donc sans variables CSS), celui-ci pourrait être l'astuce dont vous avez besoin. | Je dois avouer que cette astuce d'utiliser currentColor dans SVG a des limites. Le SVG doit être intégré dans votre HTML, et vous ne pouvez changer qu'une seule couleur. Mais, avec un fichier SVG intelligemment conçu, il est possible de donner l'impression de quelque chose de plus sophistiqué, en masquant l'élément coloré avec un dégradé ou en utilisant un filtre pour altérer la couleur, par exemple. Une chose est intéressante à noter à propos de cette technique : elle fonctionnera bien dans Internet Explorer, version 9 et supérieures! Si vous avez besoin d'appliquer un thème à quelques icônes dans un site Web, mais avez encore besoin de prendre IE en charge (donc sans variables CSS), celui-ci pourrait être l'astuce dont vous avez besoin. |
