30:[] 2e:{"title":"Le format SVG","cells":[{"id":0,"value":"# Le format SVG","pinned":false,"hidden":false,"mode":"md"},{"id":390,"value":"*Notebook forké depuis https://observablehq.com/@sd-progwebdataviz/rappels-svg*","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":9,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"

TAILLE

","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":403,"value":"

VIEWBOX

","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"L'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.","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":12,"value":"

COORDONNÉES

","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"L'origine du repère utilisé pour exprimer les coordonnées dans un document SVG est située en haut à gauche.\n\nL'axe **x** va de gauche à droite et l'axe **y** va de haut en bas.","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"\n \n \n \n \n \n Origine\n 5\n 5\n \n x: 4 y: 5\n","pinned":false,"hidden":false,"mode":"html"},{"id":16,"value":"*Source : https://observablehq.com/@idris-maps/svg*","pinned":false,"hidden":false,"mode":"md"},{"id":407,"value":"

LES ÉLÉMENTS DE BASE

","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"- [`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)","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"","pinned":true,"hidden":false,"mode":"html"},{"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"},{"id":110,"value":"","pinned":true,"hidden":false,"mode":"html"},{"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"},{"id":122,"value":"\n","pinned":true,"hidden":false,"mode":"html"},{"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"},{"id":136,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":321,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":355,"value":"Il est aussi possible d'inclure des images avec l'élément [`image`](https://developer.mozilla.org/fr/docs/Web/SVG/Element/image).","pinned":false,"hidden":false,"mode":"md"},{"id":357,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":145,"value":"

L'ÉLEMENT G (GROUPE)

","pinned":false,"hidden":false,"mode":"md"},{"id":147,"value":"L'élément `g` permet de grouper des éléments.\n","pinned":false,"hidden":false,"mode":"md"},{"id":149,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":162,"value":"

TRANSFORM

\n","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":182,"value":"- #### Translate","pinned":false,"hidden":false,"mode":"md"},{"id":176,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":190,"value":"- #### Scale","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":200,"value":"- #### Rotate","pinned":false,"hidden":false,"mode":"md"},{"id":201,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":209,"value":"- #### Plusieurs transformations simultanées","pinned":false,"hidden":false,"mode":"md"},{"id":211,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":425,"value":"

SVG ET CSS

\n","pinned":false,"hidden":false,"mode":"md"},{"id":235,"value":"Tous les attributs de présentation du SVG peuvent également être utilisés en tant que propriétés CSS.","pinned":false,"hidden":false,"mode":"md"},{"id":306,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":429,"value":"

SVG ET JAVASCRIPT

\n","pinned":false,"hidden":false,"mode":"md"},{"id":237,"value":"SVG 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.).","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":246,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":275,"value":"viewof button = Inputs.button(\"Change color\", {reduce: changeColor})","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"function changeColor() {\n const elem = document.querySelector('#figure > 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":"ojs"},{"id":398,"value":"## *Appendix*","pinned":false,"hidden":false,"mode":"md"},{"id":400,"value":"","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}