SVG Syntaxe de base

Un document SVG se compose d'un ou plusieurs éléments SVG qui définissent le contenu et les propriétés des graphiques.

<svg
  width="200"     <!-- 指定SVG画布的宽度 -->
  height="200"    <!-- 指定SVG画布的高度 -->
  xmlns="http://www.w3.org/2000/svg">   <!-- 指定SVG命名空间 -->
  <!-- SVG图形内容 -->
</svg>

  • widthetheightLes attributs définissent la largeur et la hauteur du canevas SVG.

  • xmlnsL'attribut spécifie l'espace de noms XML du document SVG.

Syntaxe de base du SVG :

  • Un document SVG commence par<svg>la balise et se termine par</svg>la balise.

  • Les éléments SVG utilisent des balises pour décrire différents graphiques, par exemple<circle>représente un cercle,<rect>représente un rectangle, etc.

  • Les éléments SVG peuvent contenir des attributs pour spécifier diverses caractéristiques des graphiques, telles que la position, la taille, la couleur, etc.

Dessin de formes de base :

SVG fournit une série d'éléments graphiques pour dessiner diverses formes, telles que des rectangles, des cercles, des lignes, des polygones, etc.

  • <rect>: Dessiner un rectangle
  • <circle>: Dessiner un cercle
  • <ellipse>: Dessiner une ellipse
  • <line>: Dessiner une ligne
  • <polyline>: Dessiner une polyligne
  • <polygon>: Dessiner un polygone
  • <path>: Dessiner un chemin

Rectangles :Utilisez l'élément <rect> pour dessiner un rectangle ; vous pouvez spécifier des attributs tels que la position, la taille et les coins arrondis.

<rect x="50" y="50" width="100" height="50" rx="10" ry="10" fill="blue" />

Cercles :Utilisez l'élément <circle> pour dessiner un cercle ; vous pouvez spécifier les coordonnées du centre et le rayon.

<circle cx="100" cy="100" r="50" fill="red" />

Ellipses :Utilisez l'élément <ellipse> pour dessiner une ellipse ; vous pouvez spécifier les coordonnées du centre ainsi que les rayons des axes majeur et mineur.

<ellipse cx="100" cy="100" rx="80" ry="50" fill="green" />

Lignes :Utilisez l'élément <line> pour dessiner une ligne ; vous devez spécifier les coordonnées de début et de fin.

<line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" />

Polygones :Utilisez l'élément <polygon> pour dessiner un polygone ; vous devez spécifier les coordonnées de plusieurs sommets.

<polygon points="100,50 150,150 50,150" fill="orange" />

Polylignes :Utilisez l'élément <polyline> pour dessiner une polyligne ; vous devez spécifier les coordonnées de plusieurs points.

<polyline points="100,50 150,150 50,150" fill="none" stroke="blue" stroke-width="2" />

Chemins :Utilisez l'élément <path> pour dessiner un chemin ; vous pouvez dessiner diverses formes en spécifiant une série de commandes de chemin.

<path d="M10 10 L90 10 L90 90 Z" fill="none" stroke="black" stroke-width="2" />

Dégradés et remplissages :

  • Utiliser<linearGradient>ou<radialGradient>pour définir des dégradés.

  • Utiliserfilletstrokedes attributs pour spécifier les styles de remplissage et de contour.

Texte et polices :

  • Utiliser<text>élément pour insérer du texte.

  • Utiliserfont-family、font-sizeet d'autres attributs pour contrôler le style du texte.

Animation et interaction :

  • Utilisez CSS ou JavaScript pour créer des effets d'animation.

  • Ajoutez des gestionnaires d'événements pour implémenter des fonctionnalités interactives telles que les clics de souris, le survol, etc.

Attributs des éléments SVG :

Les éléments SVG peuvent avoir divers attributs pour spécifier des caractéristiques telles que la position, la taille et la couleur.

<circle
  cx="100"       <!-- 圆心的x坐标 -->
  cy="100"       <!-- 圆心的y坐标 -->
  r="50"         <!-- 圆的半径 -->
  fill="red"     <!-- 填充颜色 -->
  stroke="black" <!-- 描边颜色 -->
  stroke-width="2" <!-- 描边宽度 -->
/>

  • cxetcyLes attributs définissent les coordonnées x et y du centre.

  • rL'attribut définit le rayon du cercle.

  • fillL'attribut définit la couleur de remplissage.

  • strokeL'attribut définit la couleur du contour.

  • stroke-widthL'attribut définit la largeur du contour.

Imbrication et regroupement :

Les éléments SVG peuvent être imbriqués et regroupés pour mieux organiser et gérer les éléments graphiques.

<g id="group1">   <!-- 定义一个分组 -->
  <!-- 分组内的图形元素 -->
  <rect x="10" y="10" width="50" height="50" />
  <circle cx="100" cy="100" r="30" />
</g>

  • <g>L'élément est utilisé pour créer un groupe.

  • idL'attribut est utilisé pour attribuer un identifiant unique au groupe.

Exemple SVG simple

Il est recommandé d'utiliser.svg(en minuscules) comme extension pour ces fichiers.

1. Voici un exemple simple de fichier SVG qui crée une image SVG contenant un cercle :

fichier test.svg

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="bleu" />
</svg>

Ce code décrit un canevas SVG d'une largeur de 200 unités et d'une hauteur de 200 unités. Un cercle est dessiné sur le canevas avec des coordonnées de centre (100, 100), un rayon de 80 unités et une couleur de remplissage bleue.

Aperçu :

2. Un autre exemple simple de graphique SVG :

fichier test.svg

<svg version="1.1"
  baseProfile="full"
  width="300" height="200"
  xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />

  <circle cx="150" cy="100" r="80" fill="vert" />

  <text x="150" y="115" font-size="16" text-anchor="middle" fill="white">EXAMPLE SVG TEST</text>

</svg>

Essayez-le »

Le résultat est affiché comme suit :

EXAMPLE SVG TEST

Analyse du code SVG :

  • <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">: Il s'agit de la balise de début du document SVG, spécifiant la version SVG, la configuration de base (full), ainsi que la largeur et la hauteur du canevas. L'attribut xmlns définit l'espace de noms XML du document SVG.

  • <rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />: Il s'agit d'un élément rectangle, utilisant<rect>balise pour le représenter. Sa largeur et sa hauteur sont toutes deux définies à la largeur et à la hauteur du canevas (100%). L'attribut stroke spécifie la couleur de bordure du rectangle comme étant red, l'attribut stroke-width définit la largeur de bordure à 4 unités, et l'attribut fill spécifie la couleur de remplissage du rectangle comme étant yellow.

  • <circle cx="150" cy="100" r="80" fill="green" />: Il s'agit d'un élément cercle, utilisant<circle>balise pour le représenter. Ses coordonnées de centre (cx, cy) sont (150, 100), le rayon r est de 80 unités, et l'attribut fill spécifie la couleur de remplissage du cercle comme étant green.

  • <text x="150" y="115" font-size="16" text-anchor="middle" fill="white">EXAMPLE SVG TEST</text>: Il s'agit d'un élément texte, utilisant<text>balise pour le représenter. Ses coordonnées de départ (x, y) sont (150, 115). L'attribut font-size définit la taille de police à 16 unités, l'attribut text-anchor définit l'alignement horizontal du texte sur center, et l'attribut fill spécifie la couleur du texte comme étant white. Le contenu textuel est "EXAMPLE SVG TEST".

  • </svg>: Ceci est la balise de fermeture du document SVG, marquant la fin du document SVG.

Autres extensions