Récupération du cours SVG

formes/exercice/index.md

@@ -0,0 +1,26 @@
+---
+layout: layouts/page.njk
+title: SVG - Smartphone
+---
+
+> ***Prérequis :*** le format SVG, les [formes](../) et les [propriétés](../../propriétés)
+:{.info}
+
+Vous devez dessiner un téléphone au format SVG.
+Utilisez Visual Studio Code avec l'extension SVG de Jock pour prévisualiser le résultat.
+
+1. Créer un rectangle de largeur 490 et de hauteur 970. Le rectangle a des coins arrondis de 70. Le contour noir fait 15 d'épaisseur. Remplissez le rectangle d'un gris très clair (#fcfcfc).
+
+2. Créer un deuxième rectangle de le largeur 410 et de hauteur 745. Le contour noir fait 15 d'épaisseur. Remplissez le rectangle de blanc. Le rectangle est centré horizontalement dans le premier et décalé de 110 vers le bas.
+
+3. Dessiner une ligne de longueur 60. Le contour noir fait 15 d'épaisseur. La ligne est terminée par des arrondis. La ligne  est centré horizontalement dans le premier et centré verticalement entre les 2 rectangles.
+
+4. Dessinez un cercle de rayon 10 alignée sur la ligne et placé à 170 du bord gauche.
+
+5. Dessinez un cercle rempli de couleur noire de rayon 35 situé à 905 du haut.
+
+6. Dessinez un cercle rempli de couleur blanche de rayon blanc, centré sur le premier cercle.
+
+![](telephone.png)
+
+Télécharger la [solution](telephone.svg)

formes/exercice/notebook.svg

@@ -0,0 +1,11 @@
+<svg>
+<path fill="currentColor" d="M89.5,3.4C89.3,3.3,89.1,3.1,89,3c-0.2-0.2-0.5-0.4-0.7-0.5c-0.4-0.3-0.9-0.5-1.3-0.6
+  c-0.1-0.1-0.3-0.1-0.4-0.1c-0.6-0.2-1.2-0.2-1.8-0.2H66.3H52.1h-7.7H30.1H11.7C8,1.5,5,4.5,5,8.2v18.4l0,0v32.2h86.4V26.6l0,0V8.2
+  c0-0.7-0.1-1.4-0.3-2C90.8,5.1,90.2,4.2,89.5,3.4z"></path><path fill="none" d="M59.3,64.6h-22c-2,0-2.6,0.6-2.7,1.4h0v0.1v0.1h0c0.1,0.8,0.7,1.4,2.7,1.4h22c2,0,2.4-0.6,2.6-1.4h0v-0.1V66h0
+  C61.8,65.2,61.3,64.6,59.3,64.6z"></path><path d="M96.4,65.9C96.2,64.2,95.2,63,91,63H5.7c-4.2,0-5.5,1.3-5.7,2.9h0v0.2v0.2h0c0.2,1.6,1.6,2.9,5.7,2.9H91
+  c4.2,0,5.2-1.3,5.4-2.9h0v-0.2L96.4,65.9L96.4,65.9z M61.9,66.1L61.9,66.1L61.9,66.1c-0.1,0.9-0.6,1.5-2.6,1.5h-22
+  c-2,0-2.6-0.6-2.7-1.4h0v-0.1V66h0c0.1-0.8,0.7-1.4,2.7-1.4h22C61.3,64.6,61.8,65.2,61.9,66.1L61.9,66.1L61.9,66.1z"></path><path d="M92.9,8.2c0-4.5-3.7-8.2-8.2-8.2h-73C7.2,0,3.6,3.7,3.6,8.2v52.2h89.3V8.2z M91.4,58.9H5V8.2c0-3.7,3-6.7,6.7-6.7h73
+  c0.6,0,1.2,0.1,1.8,0.2c0.2,0,0.3,0.1,0.4,0.1c0.5,0.2,0.9,0.4,1.3,0.6C88.5,2.7,88.8,2.8,89,3c0.2,0.1,0.3,0.3,0.5,0.4
+  c0.8,0.8,1.3,1.7,1.7,2.7c0.2,0.6,0.3,1.3,0.3,2V58.9z">
+</path>
+</svg>

formes/exercice/telephone.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200">
+<g transform="translate(255 15)">
+<rect x="0" y="0" width="490" height="970" rx="70" ry="70" fill="#fcfcfc" 
+stroke="black" stroke-width="15"/>
+<rect x="40" y="110" width="410" height="745" fill="#fff" 
+stroke="black" stroke-width="15" />
+<line x1="215" y1="55" x2="275" y2="55" 
+stroke="black" stroke-width="15" stroke-linecap="round"/>
+<circle cx="170" cy="55" r="10" fill="#000" />
+<circle cx="240" cy="915" r="35" fill="#000" />
+<circle cx="240" cy="915" r="20" fill="#fcfcfc" />
+</g>
+</svg>

formes/exercice/tv/index.md

@@ -0,0 +1,44 @@
+---
+layout: layouts/page.njk
+title: SVG - Télévision
+---
+
+> ***Pérequis :*** le format SVG, les [formes](../), les [propriétés](../../propriétés), le [masquage](../../découpe)
+{.info}
+
+Vous devez dessiner un téléphone au format SVG.
+Utilisez Visual Studio Code avec l'extension SVG de Jock pour prévisualiser le résualt.
+
+Une partie de l'illustration est déja fournie
+
+```svg
+<g id="pied">
+  <path d="M99.401,76.806l-18.189-3.69 -21.333-4.483c-0.099-0.368-0.166-0.778-0.197-1.22c-0.854,0.003-1.71,0.006-2.57,0.006
+    s-1.716-0.003-2.573-0.006c-0.028,0.442-0.099,0.852-0.197,1.221l-21.236,4.462 -18.284,3.709c-0.93,0.179-1.533,1.039-1.343,1.92
+    c0.188,0.883,1.096,1.452,2.028,1.272l40.321-7.015c0.432-0.013,0.88-0.02,1.342-0.02c0.414,0,0.814,0.007,1.203,0.017
+    l40.343,7.019c0.93,0.179,1.838-0.391,2.027-1.272C100.934,77.845,100.333,76.986,99.401,76.806z"/>
+  <path d="M18.519,74.021c0,0,31.385-5.191,31.475-5.683c0.208-0.084,0.075-0.533-0.118-0.519l-31.787,4.184
+    c-0.588,0.113-0.969,0.656-0.85,1.214C17.357,73.773,17.932,74.133,18.519,74.021z"/>
+  <path d="M96.986,73.216c0.12-0.558-0.26-1.101-0.85-1.214l-31.787-4.184c-0.193-0.014-0.326,0.435-0.118,0.519
+    c0.088,0.492,31.475,5.683,31.475,5.683C96.292,74.133,96.867,73.773,96.986,73.216z"/>
+</g>
+```
+
+L'illustration commence à l'origine en **0,0**.\
+La largeur totale est de **115px** et la hauteur d'un côté de **62px**.\
+La partie centrale est incurvée avec un vecteur de contrôle vertical qui descend de **3px** à bartir du bord, elle relie le point central qui est plus bas de **5px** que le bord, le vecteur issu du point central est horizontal est fait **20px**.\
+Une courbe relie l'autre bord de l'écran, elle est symétrique par rapport à la première.
+
+La marge entre le bord extérieur et la La zone vide intérieure fait **4px**.
+
+Vous devez dessiner l'écran avec un seul élément path qui sera composé de 2 parties. Pour passer d'une partie à l'autre il faut fermer le premier chemin avec la commande z et se déplacer au début du deuxième avec la commande M.
+Pour que le centre soit vide il faut que les 2 chemins tournent en sens inverse l'un de l'autre.
+
+Ajouter la photo du panda, fixer la hauteur de la photoraphie à **90px**, la largeur est laissée en automatique par rapport à la hauteur.
+
+Faire un découpage de l'image pour la faire rentrer dans la tv
+
+
+![](tv.png)
+
+![](panda.webp)

formes/exercice/tv/reponse.md

@@ -0,0 +1,89 @@
+---
+layout: layouts/page.njk
+title: Réponse
+---
+
+
+Le milieu de la forme se trouve à 115 / 2 = 57.5px
+
+Origine en 0, 0 -> M0,0\
+Lettre en minuscule toutes les coordonnées sont relatives au point précédent\
+Largeur totale -> h115 (ligne horizontale)\
+Hauteur d"un coté -> v62 (ligne verticale)
+
+partie centrale incurvée -> c\
+vecteur de contrôle vertical qui descend de **3px** ->0 3\
+point central qui est plus bas de **5px** -> -57.5 5\
+le vecteur issu du point central est horizontal est fait **20px** -> (-57.5 + 20) 5 -> -37.5 5\
+
+courbe symétrique -> s
+il n'est pas nécessaire de définir le vecteur issu du point central\
+vecteur de contrôle vertical qui descend de **3px** pour l'extremtité gauche -> s-57.5 -2. On descend de 3px du point mais comme nous sommes déja descendu de 5 il faut remonter de 2. La lettre minuscule indique un déplacement relatif par rapport au point précédent.\
+Extremité gauche -> -57.5 -5 On remonte de 5px\
+Retour à l'origine et fermer la forme-> z
+
+Déplacement à l'origine de la deuxième forme -> M4,4 -> 4px de marge\
+Cette fois si il faut se déplacer dans le sens trigonométrique\
+Descendre de 54px (62 - 4 - 4) -> v54\
+Aller à l'autre extremité -> 155 - 4 - 4 -> h107\
+Remonter -> V4 ou v-54
+Revenir à l'origine et fermer la forme -> z
+
+
+```svg
+<path d="M0,0
+    h115
+    v62
+    c0 3 -37.5 5 -57.5 5
+    s-57.5 -2 -57.5 -5
+    z
+    M4,4 v54 h107 V4 z" />
+```
+
+Le cercle au centre de rayon 2.5
+
+```svg
+<circle cx="57.5" cy="62" r="2.5" fill="white" />
+```
+
+La balise image
+
+```svg
+<image href="panda.webp" height="90" clip-path="url(#ecran)" />
+```
+
+```svg
+<defs>
+<clipPath id="ecran">
+<rect x="4" y="4" width="107" height="54.5" />
+</clipPath>
+</defs>
+```
+
+Le <a href="../tv.svg" download>fichier</a>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 82">
+<defs>
+<clipPath id="ecran">
+<rect x="4" y="4" width="107" height="54.5" />
+</clipPath>
+</defs>
+<g id="pied">
+  <path d="M99.401,76.806l-18.189-3.69 -21.333-4.483c-0.099-0.368-0.166-0.778-0.197-1.22c-0.854,0.003-1.71,0.006-2.57,0.006
+    s-1.716-0.003-2.573-0.006c-0.028,0.442-0.099,0.852-0.197,1.221l-21.236,4.462 -18.284,3.709c-0.93,0.179-1.533,1.039-1.343,1.92
+    c0.188,0.883,1.096,1.452,2.028,1.272l40.321-7.015c0.432-0.013,0.88-0.02,1.342-0.02c0.414,0,0.814,0.007,1.203,0.017
+    l40.343,7.019c0.93,0.179,1.838-0.391,2.027-1.272C100.934,77.845,100.333,76.986,99.401,76.806z"/>
+  <path d="M18.519,74.021c0,0,31.385-5.191,31.475-5.683c0.208-0.084,0.075-0.533-0.118-0.519l-31.787,4.184
+    c-0.588,0.113-0.969,0.656-0.85,1.214C17.357,73.773,17.932,74.133,18.519,74.021z"/>
+  <path d="M96.986,73.216c0.12-0.558-0.26-1.101-0.85-1.214l-31.787-4.184c-0.193-0.014-0.326,0.435-0.118,0.519
+    c0.088,0.492,31.475,5.683,31.475,5.683C96.292,74.133,96.867,73.773,96.986,73.216z"/>
+</g>
+  <image href="../panda.webp" height="90" clip-path="url(#ecran)" />
+  <path d="M0,0
+    h115
+    v62
+    c0 3 -37.5 5 -57.5 5
+    s-57.5 -2 -57.5 -5z
+    M4,4 v54 h107 V4z" />
+  <circle cx="57.5" cy="62" r="2.5" fill="white" />
+</svg>

formes/exercice/tv/tv.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 82">
+<defs>
+<clipPath id="ecran">
+<rect x="4" y="4" width="107" height="54.5" />
+</clipPath>
+</defs>
+<g id="pied">
+  <path d="M99.401,76.806l-18.189-3.69 -21.333-4.483c-0.099-0.368-0.166-0.778-0.197-1.22c-0.854,0.003-1.71,0.006-2.57,0.006
+    s-1.716-0.003-2.573-0.006c-0.028,0.442-0.099,0.852-0.197,1.221l-21.236,4.462 -18.284,3.709c-0.93,0.179-1.533,1.039-1.343,1.92
+    c0.188,0.883,1.096,1.452,2.028,1.272l40.321-7.015c0.432-0.013,0.88-0.02,1.342-0.02c0.414,0,0.814,0.007,1.203,0.017
+    l40.343,7.019c0.93,0.179,1.838-0.391,2.027-1.272C100.934,77.845,100.333,76.986,99.401,76.806z"/>
+  <path d="M18.519,74.021c0,0,31.385-5.191,31.475-5.683c0.208-0.084,0.075-0.533-0.118-0.519l-31.787,4.184
+    c-0.588,0.113-0.969,0.656-0.85,1.214C17.357,73.773,17.932,74.133,18.519,74.021z"/>
+  <path d="M96.986,73.216c0.12-0.558-0.26-1.101-0.85-1.214l-31.787-4.184c-0.193-0.014-0.326,0.435-0.118,0.519
+    c0.088,0.492,31.475,5.683,31.475,5.683C96.292,74.133,96.867,73.773,96.986,73.216z"/>
+</g>
+
+  <image href="panda.webp" height="90" clip-path="url(#ecran)" />
+
+  <path d="M0,0
+    h115
+    v62
+    c0 3 -37.5 5 -57.5 5
+    s-57.5 -2 -57.5 -5z
+    M4,4 v54 h107 V4z" />
+  <circle cx="57.5" cy="62" r="2.5" fill="white" />
+</svg>