issue141:inkscape
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
issue141:inkscape [2019/01/30 08:24] – d52fr | issue141:inkscape [2019/02/09 07:14] (Version actuelle) – andre_domenech | ||
---|---|---|---|
Ligne 2: | Ligne 2: | ||
This instalment will look at a little CSS trick for inheriting a color from your HTML page into your SVG. Unfortunately, | This instalment will look at a little CSS trick for inheriting a color from your HTML page into your SVG. Unfortunately, | ||
+ | |||
+ | 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' | ||
+ | |||
+ | Cet article se penchera sur une petite astuce du CSS pour hériter d'une couleur de votre page HTML dans votre SVG. Malheureusement, | ||
**Now we need some SVG to put into the file. For this demonstration, | **Now we need some SVG to put into the file. For this demonstration, | ||
Ligne 8: | Ligne 12: | ||
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, | ||
+ | |||
+ | Dans le dialogue de sauvegarde, j'ai pris l' | ||
+ | |||
+ | Le résultat de l' | ||
**Copying this code and pasting it inside the <div> in the HTML file results, as you might expect, in the browser drawing a rounded rectangle, with a dark red fill. No surprises so far. | **Copying this code and pasting it inside the <div> in the HTML file results, as you might expect, in the browser drawing a rounded rectangle, with a dark red fill. No surprises so far. | ||
Ligne 14: | Ligne 24: | ||
That effect is to get the SVG to use the current font color from the parent HTML page. We’ll use it for the fill in this case, so that our rectangle basically becomes a giant color swatch displaying the browser’s font color. To do this, we simply have to replace the value of the “fill” attribute with the keyword “currentColor” (note the spelling and capitalisation). Code is shown top right on this page.** | That effect is to get the SVG to use the current font color from the parent HTML page. We’ll use it for the fill in this case, so that our rectangle basically becomes a giant color swatch displaying the browser’s font color. To do this, we simply have to replace the value of the “fill” attribute with the keyword “currentColor” (note the spelling and capitalisation). Code is shown top right on this page.** | ||
+ | |||
+ | Une copie de ce code et son collage dans le <div> du fichier HTML a pour résultat, comme vous pouvez vous y attendre, le dessin dans le navigateur d'un rectangle à angles arrondis, avec un remplissage rouge foncé. Pas de surprise jusque-là. | ||
+ | |||
+ | L' | ||
+ | |||
+ | Cet effet est pour obliger le SVG d' | ||
**Reloading the page will most likely show the rectangle filled with black. What else were you expecting? Black is the default color for text in an HTML page if you haven’t styled things differently. But we can change that by setting the CSS “color” property on the <svg> element or, crucially, one of its ancestors. For example, let’s change the < | **Reloading the page will most likely show the rectangle filled with black. What else were you expecting? Black is the default color for text in an HTML page if you haven’t styled things differently. But we can change that by setting the CSS “color” property on the <svg> element or, crucially, one of its ancestors. For example, let’s change the < | ||
Ligne 25: | Ligne 41: | ||
Now reloading the page in the browser gives the result shown below left.** | Now reloading the page in the browser gives the result shown below left.** | ||
+ | |||
+ | Le rechargement de la page montrera sans doute le rectangle rempli de noir. Qu' | ||
+ | |||
+ | < | ||
+ | | ||
+ | <div style=" | ||
+ | | ||
+ | <svg width=" | ||
+ | ... | ||
+ | |||
+ | Maintenant, le rechargement de la page dans le navigateur présente le résultat montré ci-dessous à gauche. | ||
+ | |||
**You’d be forgiven for not getting terribly excited by this, but take a step back and think about what you’ve achieved: you’ve set a color inside your SVG content based on a CSS value in your HTML. Still not getting it? Let’s add an ID to the < | **You’d be forgiven for not getting terribly excited by this, but take a step back and think about what you’ve achieved: you’ve set a color inside your SVG content based on a CSS value in your HTML. Still not getting it? Let’s add an ID to the < | ||
In case you hadn’t guessed, the <use> element lets you re-use a snippet of SVG elsewhere, by referencing its ID in the fragment identifier part of the URL in the “href” attribute. In this case, we’re referencing an element in the same file, so we don’t need the full URL – just the fragment identifier (the ID preceded by a hash). So this code just tells the browser to render three copies of our < | In case you hadn’t guessed, the <use> element lets you re-use a snippet of SVG elsewhere, by referencing its ID in the fragment identifier part of the URL in the “href” attribute. In this case, we’re referencing an element in the same file, so we don’t need the full URL – just the fragment identifier (the ID preceded by a hash). So this code just tells the browser to render three copies of our < | ||
+ | |||
+ | 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' | ||
+ | |||
+ | Au cas où vous ne l' | ||
**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. | ||
Now each individual icon in the set can be displayed on the page via a <use> element, with its size and color set on the SVG element that contains the < | Now each individual icon in the set can be displayed on the page via a <use> element, with its size and color set on the SVG element that contains the < | ||
+ | |||
+ | 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' | ||
+ | |||
+ | Maintenant, chaque icône de cet ensemble peut être affichée individuellement sur la page via un élément < | ||
**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, | **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, | ||
For each copy of this block, we’ll change the color values in the < | For each copy of this block, we’ll change the color values in the < | ||
+ | |||
+ | Bien sûr, la couleur pourrait être définie à un niveau beaucoup plus haut dans la page afin qu' | ||
+ | |||
+ | Pour chaque copie de ce bloc, nous changerons les valeurs des couleurs dans < | ||
**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' |
issue141/inkscape.1548833046.txt.gz · Dernière modification : 2019/01/30 08:24 de d52fr