HTML SVG
Auparavant, le mini-projet demandait un petit site personnel. Cette leçon ouvre une piste graphique optionnelle. SVG permet à HTML de dessiner icônes et formes nettes avec des maths, pas des pixels. Portée pratique : mettre du SVG sur la page — pas un cours de design complet.
Pourquoi SVG dans un cours HTML
Les images raster flouent à l’agrandissement. SVG décrit chemins et formes — le logo reste net. Les débutants voient SVG comme icône d’en-tête ou badge. Savoir en ligne vs fichier garde les pages légères et accessibles.
Réponse directe
1) En ligne : arbre svg dans le HTML. 2) Fichier : enregistrez .svg et chargez avec img + alt. 3) Préférez en ligne pour CSS/JS ou nom précis. 4) Préférez img pour logos statiques. 5) Nommez les graphiques significatifs. 6) Ce cours couvre seulement l’intégration.
📊 SVG embedding beginners use
| Choice | What it does | Beginner tip |
|---|---|---|
| Inline svg | Shapes live in the HTML tree | Easy to style and label in-page |
| img to .svg | Treats SVG like an image file | Simple for static logos |
| viewBox | Maps SVG coords to the viewport | Keep width/height + viewBox aligned |
| Accessible name | alt or aria-label on meaningful art | Empty name only if truly decorative |
| Scales cleanly | Vectors stay sharp when resized | Great for icons and UI marks |
| Not a photo format | Photos stay JPEG/PNG/WebP | Use SVG for shapes/icons, not camera shots |
Minuscule SVG en ligne
Le SVG en ligne n’est que du balisage. Un cercle avec viewBox et nom accessible montre le travail HTML : le navigateur dessine ; vous contrôlez taille et sens.
<svg width="80" height="80" viewBox="0 0 80 80" role="img" aria-label="Green circle">
<circle cx="40" cy="40" r="32" fill="#2a7"></circle>
</svg>
Lire la démo en ligne
- svg est la racine
- width/height boîte de mise en page ; viewBox coordonnées
- circle est une forme enfant
- role=img + aria-label nomme le graphique
- le redimensionnement reste net
- le mini-projet utilisait img pour photos ; ici l’« image » peut être du balisage
SVG comme fichier image
Si logo.svg existe, traitez-le comme média : src et alt utile. Les chemins doivent matcher le dossier.
<img src="images/logo.svg" alt="Site logo" width="120">
Lire le motif fichier
- src pointe vers .svg
- alt porte le nom accessible
- width contrôle la taille ; les vecteurs scalent proprement
- CSS stylise la boîte img plus facilement que chaque chemin en ligne
- Réutilisez un fichier sur plusieurs pages
- Ensuite canvas dessine en pixels JS — autre outil
Choisir en ligne vs fichier
- Icône à teinter en CSS : souvent en ligne
- Logo de marque statique : img
- Photos : formats raster
- Grande illustration en ligne : préférez un fichier
- Graphique significatif : toujours le nommer
- Authoring SVG profond : plus tard
Pratique — SVG sur la page
- Collez le cercle ; vérifiez le rendu.
- Changez width/height — reste net.
- Chargez .svg avec img+alt.
- Retirez aria-label/alt un moment.
- Icône en ligne près d’un titre sur une copie du mini-projet.
- Phrase : SVG est balisage ou fichier vectoriel — pas un substitut photo.
- Aperçu : canvas dessine au script.
Erreurs faciles
- Oublier les noms accessibles
- Coller d’énormes arbres SVG en ligne
- Utiliser SVG pour des photos
- Omettre viewBox
- Confondre SVG et canvas
- Prendre l’intro pour un cours d’illustration
- Abandonner les habitudes a11y du mini-projet
Résumé
- SVG dessine formes et icônes indépendantes de la résolution
- En ligne avec svg ou fichier avec img
- Nommez les graphiques significatifs
- Les vecteurs scalent ; les photos restent raster
- Le mini-projet était le build ; ici commence le graphique optionnel
- Suivant : canvas en HTML
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut