2c:null 2d:["$","title",null,{"children":"Rappels SVG | BUT SD - Cours Programmation Web Dataviz | Observable"}] 32:[] 30:{"id":"b3e61e8810cc7b65","slug":"rappels-svg","title":"Rappels SVG","thumbnail":"fbb5d9e970fa879ce3542d91104e76cf3fad1348e52e9871eefa252c89cf0d29","access_level":"public","create_time":"$D2023-08-30T09:37:52.244Z","update_time":"$D2026-09-04T07:53:14.296Z","view_time":null,"first_public_time":"$D2023-09-10T18:38:53.308Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz","avatar_url":"https://avatars-next.observableusercontent.com/9abf99c7291a1bcb0c0549771e1476593088700d797bd36ff146f1e5ff3035e7","tier":"starter_2024","bio":"Voir la page Web du cours pour retrouver l'ensemble des supports."},"version":447,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null,"bio":""}],"members":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null,"role":"editor"},{"type":"team","id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz","avatar_url":"https://avatars-next.observableusercontent.com/9abf99c7291a1bcb0c0549771e1476593088700d797bd36ff146f1e5ff3035e7","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"fcbf8027d5457b45","slug":"guide-et-exemples","title":"Guide et exemples","owner":{"id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz"}},"type":"notebook","body":{"titling":"auto","title":"Rappels SVG","cells":[{"id":0,"value":"# Rappels SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"banner","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"Le format SVG (*Scalable Vector Graphics*) est un format de données conçu pour décrire des ensembles de graphiques vectoriels. Il s'agit d'un format basé sur XML.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"## Dimension d'un élément SVG\n\n### Taille\n\nLa dimension d'un élément SVG se définit grâce aux attributs `width` et `height`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"### viewBox\n\nL'attribut [`viewBox`](https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/viewBox) permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur.\n\nPar exemple ci-dessous, nous définissons un conteneur (l'élement `","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"*Source : https://observablehq.com/@idris-maps/svg*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"## Les éléments de base\n\nLes principaux éléments de base en SVG sont :\n- [`rect`](https://developer.mozilla.org/fr/docs/Web/SVG/Element/rect) (rectangle)\n- [`circle`](https://developer.mozilla.org/fr/docs/Web/SVG/Element/circle) (cercle)\n- [`line`](https://developer.mozilla.org/fr/docs/Web/SVG/Element/line) (ligne)\n- [`ellipse`](https://developer.mozilla.org/fr/docs/Web/SVG/Element/ellipse) (ellipse)\n- [`text`](https://developer.mozilla.org/fr/docs/Web/SVG/Element/text) (texte)\n- [`path`](https://developer.mozilla.org/fr/docs/Web/SVG/Element/path) (chemin arbitraire, exprimé en coordonnées par lesquelles passe le chemin)\n\nRegardez attentivement les attributs de chacun des éléments ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"Si ces éléments ont des propriétés semblables pour définir leur position (`x` et `y` pour text et rectangle, `cx` et `cy` pour ellipse et cercle, etc.), l'élément `path` va utiliser l'attribut `d` pour spécifier le chemin à dessiner.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"La meilleure manière d'aborder l'attribut `d` est d'imaginer que nous donnons des instructions à un stylo (ou à un collègue avec un stylo dans la main). Dans le cas ci-dessus:\n\n- *Move to x :0, y: 90* (M 0 90) - On déplace le stylo pour aller aux coordonnées (0, 90)\n- *Line to x: 100, y: 0* (L 100 0) - On trace, depuis la position précédente une ligne jusqu'à (100, 0)\n- *Line to x: 200, y: 90* (L 200 90) - On trace, depuis la position précédent, une ligne jusqu'à (200, 90)\n\nPour fermer le tracé (revenir au point de départ depuis le dernier point), nous utilisons la lettre Z :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"En SVG, il est également possible de dessiner des [courbes de Bézier](). Pour cela nous devons définir des points de contrôle qui spécifient comment courber le chemin à tracer.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":316,"value":"Il existe également les éléments [`polygon`](https://developer.mozilla.org/fr/docs/Web/SVG/Element/polygon), et [`polyline`](https://developer.mozilla.org/fr/docs/Web/SVG/Element/polyline). Nous ne le utiliserons pas, au profit de l'utilisation de l'élément `path` qui permet (cf. les images aux dessus) de décrire des polylignes ou des polygones.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"Vous n'écrirez (ou ne calculerez) toutefois probablement pas ou peu l'attribut `d` d'un `path` à la main.\nEn effet, lorsque nous utiliserons D3.js, nous utiliserons les fonctions `d3.line`, `d3.arc`, `d3.geoPath` etc. qui permettront de calculer la propriété `d` de ces chemins en fonction de différents paramètres (tels que les données que vous souhaitez représenter).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":355,"value":"Enfin, il est possible d'inclure une matricielle avec l'élément [`image`](https://developer.mozilla.org/fr/docs/Web/SVG/Element/image).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":357,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"### L'élément `g` (groupe)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"L'élément `g` permet de grouper des éléments.\n\nCet élément est intéressant car les attributs qui lui sont appliqués vont être reportés à l'ensemble des éléments du groupe (ses enfants), et cela aussi bien pour les attributs de présentation (comme ici `fill`, `stroke`, etc.) qui pour les gestionnaires d'événements (voir plus bas dans la partie *SVG et JavaScript* où l'événement `click` est écouté au niveau de l'élément `g`).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"## L'attribut `transform`\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":164,"value":"La position d'un élément est définie par des attributs qui lui sont propre (`x` et `y`, ou `cx` et `cy`, etc.).\n\nAvec l'attribut `transform`, nous allons pouvoir modifier la position d'un élément (ou d'un groupe d'éléments si appliqué à un groupe `g`) sans toucher aux attributs `x`, `y`, etc. des éléments.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"Il est possible d'exprimer plusieurs types de transformations grâce à l'attribut `transform`:\n\n- *translate* (déplacement dans le plan)\n- *rotate* (rotation)\n- *scale* (mise à l'échelle - agrandir ou diminuer la taille)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"#### Translate :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":190,"value":"#### Scale :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"#### Rotate :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"#### Plusieurs transformations simultanées :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"## SVG et CSS\n\nTous les attributs de présentation du SVG peuvent également être utilisés en tant que propriétés CSS.\n\nIl est possible d'intégrer cette feuille de style directement dans un contenu SVG, comme ci-dessous, ou à son emplacement habituel dans le document HTML.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":306,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"## SVG et JavaScript\n\nSVG fait partie du DOM d'une page HTML ; il peut donc être sélectionné et manipulé comme les autres éléments du DOM (`document.querySelector`, `setAttribute`, etc.).\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":369,"value":"Notez que l'événement `click` est écouté au niveau du groupe (élément `g`), le gestionnaire d'événement est donc appelé lors d'un clic sur n'importe lequel de ses enfants.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":384,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"const button = view(Inputs.button(\"Change color\", {reduce: changeColor}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"function changeColor() {\n const elem = document.querySelector('#figure1 > g');\n const color = `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`;\n elem.setAttribute('fill', color)\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"import { banner } from 'observable:@sd-progwebdataviz/banner-template'","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"2"}} 31:"$30:body"