28:null 29:["$","title",null,{"children":"SVG | Anders | Observable"}] 2e:T1256,html`

`2f:[] 2c:{"id":"b599e09d1c5d26d3","slug":"svg","title":"SVG","thumbnail":"8ff63ed2d006e4bc519143d24e9f3f1facd41d32c5e6476cb05879a14bc584fa","access_level":"public","create_time":"$D2018-11-10T18:56:23.206Z","update_time":"$D2022-03-18T07:40:45.329Z","view_time":null,"first_public_time":"$D2018-11-11T09:01:21.678Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"185626bcadc26005","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":"starter_2024"},"version":592,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"37cf327f614a460d","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":null}],"members":[{"type":"individual","id":"37cf327f614a460d","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"04f4b394708037c7","slug":"heig-visdom-2020","title":"HEIG-visdom-2020","owner":{"id":"185626bcadc26005","login":"idris-maps","name":"Anders"}},"type":"notebook","body":{"title":"SVG","cells":[{"id":483,"value":"md`# SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`\n\"Le Scalable Vector Graphics (en français « graphique vectoriel adaptable »), ou SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML.\" ([wikipedia](https://fr.wikipedia.org/wiki/Scalable_Vector_Graphics))\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`### Le système de coordonnées`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"svg`\n \n \n \n \n \n Origine\n 5\n 5\n \n x: 4 y: 5\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`L'axe **x** va de gauche à droite, l'axe **y** va haut en bas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`\nLa \"toile\" fait 200 unités de large, 100 de haut. Un carré bleu est dessiné sur la moitié gauche de la toile. Un cercle rouge d'un rayon de 40 unités est dessiné au centre de la toile.\n\nLe carré est un rectangle dont l'angle en haut à gauche est placé à l'origine (x=\"0\" y=\"0\"). Le cercle est quand à lui placé par rapport à son centre (cx=\"50\" cy=\"100\").\n\nLe SVG est lu de haut en bas et les éléments dessinés au fur et à mesure. Le carré est dessiné avant le cercle. Vous pouvez inverser l'ordre dans l'exemple au dessus et appuyer sur le la flèche de droite (le bouton \"play\") pour voir le résultat.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`\n### viewBox\n\nLa toile est infinie. L'attribut \"viewBox\" détermine quelle partie est visible. Comme une fenêtre posée sur la toile. La position et la taille de la fenêtre est définie de cette manière: **viewBox=\"x y width height\"**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"html`\n

\n \n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`\nDans l'exemple ci-dessus les éléments sont placés de la même manière qu'avant dans le système de coordonnées. C'est la fenêtre qui a été déplacée de 100 unités sur la gauche. \"x\" le premier numéro du \"viewBox\" est de -100.\n\nVous avez peut-être noté que l'exemple avec \"viewBox\" était encadré par un élément \"div\". Dans le contexte d'une page HTML (comme ici), un SVG avec l'attribut \"viewBox\" rempli entièrement la largeur de l'élément \"parent\". Modifiez la largeur de la \"div\" ou enlevez la pour voir ce qui se passe. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`### Le fichier .svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`\nComme nous venons de le voir, le SVG peu être intégré au HTML. Il peut également être contenu dans un fichier texte pour être lu par d'autres logiciels comme [inkscape](https://inkscape.org/). Dans ce cas il faut ajouter un attribut \"xmls\" (XML Name Space) à l'élément \"svg\" pour déclarer le dialect XML.\n\n**xmlns=\"http://www.w3.org/2000/svg\"**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"svg`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`\n### Les éléments de base\n\nNous avons déjà vu les éléments **rect** et **circle**. En voici quelques autres.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`\nLa position de l'**ellipse** est définie de la même manière que pour **circle**. La seule différence est qu'elle a deux rayons (rx=\"30\" ry=\"20\").\n\nL'élément **line** prends un point de départ (x1=\"100\" y1=\"0\") et un point d'arrivée (x2=\"200\" y2=\"100\"). Notez que nous avons ajouté un attribut **stroke** pour la couleur. Sinon il aurait été invisible. En revanche l'attribut **fill** est noir par défaut, nous pouvons voir l'ellipse malgré le fait que nous n'avons pas défini de couleur.\n\nLa position de l'élément **text** est comme pour l'élément **rect** définie par \"x\" et \"y\". Cette fois le point d'ancrage est sur la ligne du texte.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`\nL'ancrage sur l'axe \"y\" peut être défini par l'attribut **text-anchor** (\"start\" par défaut).\n\n**text-anchor=\"middle\"**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"md`**text-anchor=\"end\"**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md`Pour une liste exhaustive des éléments SVG: [MDN - SVG element reference](https://developer.mozilla.org/en-US/docs/Web/SVG/Element)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"md`\n### Les attributs de base\n\nNous avons vu **fill** et **stroke**. Ces derniers peuvent être appliqués à d'autres éléments.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md`**stroke-width**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`**opacity**, **fill-opacity** et **stroke-opacity**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`**stroke-linecap**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"md`**stroke-dasharray**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"md`\n**stroke-dashoffset** défini le point de départ de **stroke-dasharray**. Voir [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset) pour les détails. Il est souvent utilisé pour donner une impression d'élément dessiné sous nos yeux.\n\nImaginons un **stroke-dasharray** de 300 sur un élément dont le contour fait moins de 300. Le premier trait rempli couvre la totalité du contour. Si nous changons le point de départ, ce trait va glisser le long du contour jusqu'à disparaître.\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"offset = {\n let n = 0\n let dir = 0\n while (true) {\n if (n === 300) { dir = 1 }\n if (n === 0) { dir = 0 }\n if (dir === 1) { n = n - 1 }\n if (dir === 0) { n = n + 1 }\n yield n\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"md`\n### L'élément \"path\" et son attribut \"d\"\n\nJusqu'ici nous n'avons vu que des formes de base. L'élément **path** permet de dessiner des formes plus complexes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"md`\nLa meilleure manière d'aborder l'attribut **d** est d'imaginer que nous donnons des instructions à 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)\n- Line to x: 100, y: 0 (L 100 0)\n- Line to x: 200, y: 90 (L 200 90)\n\nPour revenir au point de départ à la fin, nous utilisons la lettre **Z**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"md`Pour dessiner une courbe il faut ajouter des points de contrôle entre les deux points`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"svg`\n\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"md`\nLes deux lignes ci-dessus ont les même points de départ (20, 20) et d'arrivée (180, 20). Pour la ligne rouge nous avons donné l'instruction **C** (dessine une courbe), au lieu de **L** (dessine une ligne). **C** prends deux points de contrôle (40, 50) et (160 50) avant le point d'arrivée (180, 20). Les points de contrôle sont ici illustrés par des cercles rouges.\n\nPour plus de détails sur l'élément **path** et l'attribut **d**, voir [Paths sur MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"md`\n### L'élément \"g\"\n\nL'élément **g** permet de grouper des éléments.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"md`Ici les attributs **fill**, **stroke** et **stroke-width** sont appliqués à tous les éléments du groupe.\n\nCeci est particulièrement utile pour les transformations.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`\n### L'attribut \"transform\"\n\nLa position d'un élément est comme nous l'avons vu définie par des attributs qui lui sont propres. Ceci est nécessaire pour décrire où ils se trouvent sur la toile. Avec **transform** nous pouvons modifier cette position sans changer les attributs x, y, cx, cy, x1, y1 ...\n\n**translate**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"md`\nAvec **translate** nous avons déplacé le groupe entier de 50 unités sur la gauche et de 20 unités vers le bas.\n\n**scale**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"md`\nAvec **scale** nous pouvons agrandir la taille des éléments\n\n**rotate**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"md`Le premier argument de **rotate** est le nombre de degrés (20). Les deux arguments suivants représentent le point autour duquel se fait la rotation: 100 (x) et 40 (y) .`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"md`\n### SVG et CSS\n\nLorsque le SVG est intégré dans une page HTML, nous pouvons définir certains styles avec du CSS.\n\n[Liste des attributs qui peuvent être définis en CSS](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"html`\n \n \n \n \n \n \n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"md`Avec la définition CSS **#cercle:hover** nous pouvons décrire le style quand l'élément est survolé.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"md`\n### SVG et JavaScript\n\nFaisant partie du [DOM](https://fr.wikipedia.org/wiki/Document_Object_Model) d'une page HTML, SVG peut également être manipulé par JavaScript. Nous l'avons déjà fait plus haut avec l'exemple **stroke-dashoffset**. Dans l'exemple ci-dessous nous écoutons les changements de **rValue** pour en faire le rayon du cercle.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"rInput = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"rValue = Generators.input(rInput)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"