issue172: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 | ||
issue172:inkscape [2021/08/30 15:45] – d52fr | issue172:inkscape [2021/08/31 15:49] (Version actuelle) – andre_domenech | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | Drawing with Inkscape – Part 112 | ||
- | By Mark Crutch | ||
- | |||
**I’m going to start this month with yet another complaint about the state of font support in web browsers. Once again, a single browser vendor has effectively scuppered a format that is supported by their peers, leaving us users and developers without a practical alternative. | **I’m going to start this month with yet another complaint about the state of font support in web browsers. Once again, a single browser vendor has effectively scuppered a format that is supported by their peers, leaving us users and developers without a practical alternative. | ||
+ | |||
I’ve written in the past about how Firefox’s lack of support for SVG fonts effectively killed the format. This was a real blow: the ability for a web developer to dynamically modify fonts on-the-fly using JavaScript could have been truly revolutionary. More recently, it looked like SVG in OpenType would provide some new capabilities in terms of color fonts and bitmap support, but Google has closed the relevant issue on the Chromium bug tracker (#306078) with a status of WONTFIX, indicating that they won’t be adding support for this format to the browser. Given Chrome’s dominant market share, this effectively neuters some of the new font support in Inkscape 1.0 that I covered in part 108 of this series. | I’ve written in the past about how Firefox’s lack of support for SVG fonts effectively killed the format. This was a real blow: the ability for a web developer to dynamically modify fonts on-the-fly using JavaScript could have been truly revolutionary. More recently, it looked like SVG in OpenType would provide some new capabilities in terms of color fonts and bitmap support, but Google has closed the relevant issue on the Chromium bug tracker (#306078) with a status of WONTFIX, indicating that they won’t be adding support for this format to the browser. Given Chrome’s dominant market share, this effectively neuters some of the new font support in Inkscape 1.0 that I covered in part 108 of this series. | ||
Variable fonts, as described in that article, already work and will continue to do so. It’s the SVG in OpenType format that is now effectively dead, despite being supported in Firefox, Safari and even older versions of Edge. My own experiments suggested some level of support for the fonts I was using (e.g. the Gilbert Color font was rendered in Chrome, but only as a monochrome font). I now suspect that was due to the fonts themselves providing non-SVG fallback content, rather than Chrome providing any support at all for this format.** | Variable fonts, as described in that article, already work and will continue to do so. It’s the SVG in OpenType format that is now effectively dead, despite being supported in Firefox, Safari and even older versions of Edge. My own experiments suggested some level of support for the fonts I was using (e.g. the Gilbert Color font was rendered in Chrome, but only as a monochrome font). I now suspect that was due to the fonts themselves providing non-SVG fallback content, rather than Chrome providing any support at all for this format.** | ||
+ | Je vais commencer ce mois-ci par une nouvelle plainte sur l' | ||
+ | |||
+ | J'ai décrit dans le passé la façon dont l' | ||
+ | |||
+ | Les polices variables, telles que décrites dans cet article, fonctionnent déjà et continueront à fonctionner. C'est le format SVG dans OpenType qui est maintenant effectivement mort, bien qu'il soit pris en charge par Firefox, Safari et même les anciennes versions de Edge. Mes propres expériences suggéraient un certain niveau de prise en charge des polices que j' | ||
Ligne 13: | Ligne 16: | ||
Time will tell whether or not Google’s new format will win out, or font foundries will just embed both the Google and the SVG versions of color glyphs into ever-more-bloated font files. For now, however, despite Inkscape’s support for color fonts – and its partial support for bitmap fonts – you might want to think twice about using these in your projects.** | Time will tell whether or not Google’s new format will win out, or font foundries will just embed both the Google and the SVG versions of color glyphs into ever-more-bloated font files. For now, however, despite Inkscape’s support for color fonts – and its partial support for bitmap fonts – you might want to think twice about using these in your projects.** | ||
+ | Ce qui est le plus décourageant dans cette évolution, c'est que la principale raison invoquée par Google pour ne pas prendre en charge SVG dans OpenType semble être qu'ils développent leur propre format pour les polices de caractères en couleur (à nouveau, intégré à OpenType). Si vous doutiez que Google puisse utiliser sa domination du marché pour forcer la direction des standards du Web, peut-être que ceci vous fera réaliser qu'un seul vendeur ayant autant de contrôle n'est pas vraiment dans le meilleur intérêt des utilisateurs. La nécessité de disposer de moteurs de rendu multiples et indépendants est la raison pour laquelle je continue à utiliser Firefox comme mon navigateur quotidien. La bataille contre IE a peut-être été gagnée, mais la guerre pour un Web véritablement ouvert et indépendant continue. | ||
+ | |||
+ | Le temps nous dira si le nouveau format de Google l' | ||
Ligne 21: | Ligne 27: | ||
Let’s begin with some history. The SVG format has always been a little confused about its identity. It was created during the great XML uprising of the late 1990s, when the World Wide Web Consortium (W3C) were pushing for a world in which XML formed a common basis for many file formats, allowing for tools and workflows that could easily combine and convert different types of data. SVG was a stand-alone vector format, not yet directly integrated into any web browsers, but the intention was clear that it should conform to, and work with, existing web standards. This left it with something of a dichotomy: on the one hand, it needed a way to directly define fonts, colors and dimensions in order to be used as a generic vector format with no dependency on a browser engine; on the other hand, it had to work well with the growing power of CSS to define styles for those users who did want to work in a more web-focused way.** | Let’s begin with some history. The SVG format has always been a little confused about its identity. It was created during the great XML uprising of the late 1990s, when the World Wide Web Consortium (W3C) were pushing for a world in which XML formed a common basis for many file formats, allowing for tools and workflows that could easily combine and convert different types of data. SVG was a stand-alone vector format, not yet directly integrated into any web browsers, but the intention was clear that it should conform to, and work with, existing web standards. This left it with something of a dichotomy: on the one hand, it needed a way to directly define fonts, colors and dimensions in order to be used as a generic vector format with no dependency on a browser engine; on the other hand, it had to work well with the growing power of CSS to define styles for those users who did want to work in a more web-focused way.** | ||
+ | CSS dans SVG | ||
+ | |||
+ | Le sujet principal de ce mois-ci était censé être le dialogue Sélecteurs et CSS qui a été ajouté de manière expérimentale dans Inkscape v1.0, puis promu à non expérimental dans la v1.0.1. Mais pour comprendre ce que fait cette boîte de dialogue, il est essentiel d' | ||
+ | |||
+ | Commençons par un peu d' | ||
Ligne 33: | Ligne 44: | ||
This approach requires only the consuming program to understand XML and SVG, and doesn’t impose the need for a complete CSS parser (though things like color values and most units are still taken from the CSS spec).** | This approach requires only the consuming program to understand XML and SVG, and doesn’t impose the need for a complete CSS parser (though things like color values and most units are still taken from the CSS spec).** | ||
+ | Ainsi, nous nous sommes retrouvés avec une profusion, et une confusion, de manières de styliser le contenu SVG. Il y a d' | ||
+ | <rect x=" | ||
+ | width=" | ||
+ | fill=" | ||
+ | stroke=" | ||
+ | stroke-width=" | ||
+ | /> | ||
+ | |||
+ | Cette approche nécessite uniquement que le programme utilisateur comprenne XML et SVG, et n' | ||
Ligne 43: | Ligne 63: | ||
If CSS only offered a way to put all the style information into a single attribute, it wouldn’t be terribly useful. But as well as setting styles on each element individually, | If CSS only offered a way to put all the style information into a single attribute, it wouldn’t be terribly useful. But as well as setting styles on each element individually, | ||
- | Dans les premiers temps du HTML, les attributs de présentation étaient courants. Les développeurs Web chevronnés se souviennent peut-être des attributs « border », « color » et « bgcolor », entre autres, mais ces fonctionnalités ont rapidement été supplantées par la portée croissante de CSS. Afin de remplacer les styles CSS par élément, les règles CSS pertinentes ont dû être combinées en un seul attribut « style ». Cette méthode fonctionne également avec le SVG, ce qui signifie que notre rectangle rouge à traits épais pourrait également être écrit comme ceci : | + | Dans les premiers temps du HTML, les attributs de présentation |
<rect x=" | <rect x=" | ||
width=" | width=" | ||
Ligne 72: | Ligne 92: | ||
Notice that the syntax of the stylesheet is quite different to that of the SVG content. I won’t go into details about how to write CSS here, but suffice to say that it’s made up of multiple rules (delimited by curly braces: { and } ), with each rule starting with a “selector” that determines what elements the rule will apply to. In this case, the selector is just the string “rect” which will make this rule apply to all the < | Notice that the syntax of the stylesheet is quite different to that of the SVG content. I won’t go into details about how to write CSS here, but suffice to say that it’s made up of multiple rules (delimited by curly braces: { and } ), with each rule starting with a “selector” that determines what elements the rule will apply to. In this case, the selector is just the string “rect” which will make this rule apply to all the < | ||
- | Ces astuces | + | Ces tours sont réalisées en déplaçant les informations de style hors des attributs de style, dans un élément < |
< | < | ||
rect { | rect { | ||
Ligne 125: | Ligne 145: | ||
We can also target multiple items by giving them the same value in a “class” attribute and using it preceded by a dot (.) as the CSS selector. This example has four rectangles, split into two different classes. Note that an element can have more than one class, separated by spaces, which allows for a huge amount of flexibility in combining objects into overlapping sets.** | We can also target multiple items by giving them the same value in a “class” attribute and using it preceded by a dot (.) as the CSS selector. This example has four rectangles, split into two different classes. Note that an element can have more than one class, separated by spaces, which allows for a huge amount of flexibility in combining objects into overlapping sets.** | ||
- | Nous pouvons cibler un élément spécifique en nous assurant qu'il possède un attribut « "id » dans le contenu du SVG (ce qu' | + | Nous pouvons cibler un élément spécifique en nous assurant qu'il possède un attribut « id » dans le contenu du SVG (ce qu' |
< | < | ||
Ligne 229: | Ligne 249: | ||
/> | /> | ||
- | Les CSS des navigateurs Web fournissent également des sélecteurs d' | + | Les CSS des navigateurs Web fournissent également des sélecteurs d' |
**These basic selectors can be combined to further refine the elements that will match. Using “rect.important”, | **These basic selectors can be combined to further refine the elements that will match. Using “rect.important”, | ||
Ligne 236: | Ligne 256: | ||
Selectors can be combined in different ways to match more elements, or to further refine the match based on the hierarchical structure of the SVG document. “#id1, #id2, .important” would match the two elements with the specified IDs, but also any element with the “important” class. “text + path”, meanwhile, would match any < | Selectors can be combined in different ways to match more elements, or to further refine the match based on the hierarchical structure of the SVG document. “#id1, #id2, .important” would match the two elements with the specified IDs, but also any element with the “important” class. “text + path”, meanwhile, would match any < | ||
- | Ces sélecteurs de base peuvent être combinés pour affiner davantage les éléments qui correspondent. L' | + | Ces sélecteurs de base peuvent être combinés pour affiner davantage les éléments qui correspondent. L' |
- | Le navigateur fournit gratuitement certaines classes, sous la forme de « pseudo-classes », qui vous permettent de créer des sélecteurs ciblant des éléments que le navigateur calcule au moment de l' | + | Le navigateur fournit gratuitement certaines classes, sous la forme de « pseudo-classes », qui vous permettent de créer des sélecteurs ciblant des éléments que le navigateur calcule au moment de l' |
Les sélecteurs peuvent être combinés de différentes manières pour faire correspondre plus d' | Les sélecteurs peuvent être combinés de différentes manières pour faire correspondre plus d' | ||
Ligne 278: | Ligne 298: | ||
There’s even more to CSS than the rules I’ve laid out here, but these are the ones that are most useful or relevant when working with the Selectors and CSS dialog. Even so, it’s a lot to take on board if you’re not already familiar with CSS. Next month, it will hopefully start to make a bit more sense as we begin our look at the new dialog.** | There’s even more to CSS than the rules I’ve laid out here, but these are the ones that are most useful or relevant when working with the Selectors and CSS dialog. Even so, it’s a lot to take on board if you’re not already familiar with CSS. Next month, it will hopefully start to make a bit more sense as we begin our look at the new dialog.** | ||
- | Un simple caractère espace crée une règle qui correspond si le deuxième élément est un descendant (éventuellement même un descendant profondément imbriqué) du premier. Par exemple, | + | Un simple caractère espace crée une règle qui correspond si le deuxième élément est un descendant (éventuellement même un descendant profondément imbriqué) du premier. Par exemple, |
Avec les informations des derniers paragraphes, | Avec les informations des derniers paragraphes, |
issue172/inkscape.1630331118.txt.gz · Dernière modification : 2021/08/30 15:45 de d52fr