From 7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a Mon Sep 17 00:00:00 2001 From: julieng Date: Mon, 1 Nov 2021 07:51:27 +0100 Subject: move *.html to *.md --- .../fr/web/svg/tutorial/getting_started/index.html | 99 ---------------------- files/fr/web/svg/tutorial/getting_started/index.md | 99 ++++++++++++++++++++++ 2 files changed, 99 insertions(+), 99 deletions(-) delete mode 100644 files/fr/web/svg/tutorial/getting_started/index.html create mode 100644 files/fr/web/svg/tutorial/getting_started/index.md (limited to 'files/fr/web/svg/tutorial/getting_started') diff --git a/files/fr/web/svg/tutorial/getting_started/index.html b/files/fr/web/svg/tutorial/getting_started/index.html deleted file mode 100644 index 5b5fda31c5..0000000000 --- a/files/fr/web/svg/tutorial/getting_started/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Premiers pas -slug: Web/SVG/Tutorial/Getting_Started -tags: - - SVG - - SVG:Tutoriel -translation_of: Web/SVG/Tutorial/Getting_Started -original_slug: Web/SVG/Tutoriel/Premiers_pas ---- -

{{PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions")}}

- -

Un exemple simple

- -

Commençons directement avec un exemple pratique. Jetez un coup d'œil au morceau de code suivant :

- -
-<svg version="1.1"
-     baseProfile="full"
-     width="300" height="200"
-     xmlns="http://www.w3.org/2000/svg">
-
-  <rect width="100%" height="100%" fill="red" />
-
-  <circle cx="150" cy="100" r="80" fill="green" />
-
-  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
-
-</svg>
-
- -

Copiez le code précédent dans un document texte, puis enregistrez-le sous le nom de demo1.svg. Ouvrez le fichier dans Firefox. Vous obtiendrez alors l'image suivante (pour les utilisateurs de Firefox : cliquez ici)

- -

une image avec un rectangle rouge contenant un disque vert dans lequel est écrit SVG en blanc

- -

Quelques explications s'imposent quant au fonctionnement du rendu :

- -
    -
  1. Nous commençons avec l'élément svg à la racine : - -
      -
    • La déclaration du doctype que l'on voit en (X)HTML peut être enlevée, car la validation DTD du SVG provoque plus de problèmes qu'elle n'en résout.
      • -
    • Avant SVG 2, pour identifier la version du SVG pour d'autre types de validation, les attributs version et baseProfile devaient toujours être utilisés. Ces deux attributs sont dépréciés en SVG 2.
      • -
    • En tant que langage basé sur XML, l'espace de noms du document SVG doit être correct, d'où l'attribut xmlns. Pour plus d'informations, n'hésitez pas à consulter la page Cours d'introduction aux espaces de noms.
      • -
    -
    2. -
  2. L'arrière-plan est défini par un rectangle rouge, déclaré grâce à la balise <rect> qui recouvre l'intégralité de l'espace.
    3. -
  3. Un cercle (<circle>) vert d'un rayon de 80px est dessiné par-dessus le centre du rectangle rouge, avec un décalage de 30+120px vers l'intérieur et de 50+50px vers le haut.
    4. -
  4. Le texte "SVG" est dessiné. L'intérieur de chaque lettre est rempli de blanc. Le texte est positionné grâce à une ancre placée là où nous souhaitons qu'elle soit. Dans le cas présent, le centre du texte doit correspondre au milieu du rectangle rouge. De petits ajustements peuvent être apportés à la taille de la police et au positionnement vertical, de manière à assurer un résultat final esthétiquement agréable.
    5. -
- -

Les propriétés basiques des fichiers SVG

- - - -

Les types de fichiers SVG

- -

Les fichiers SVG peuvent exister sous deux formes. La première consiste en des fichiers textes traditionnels, contenant des balises SVG. Il est recommandé de nommer ces fichiers avec l'extension ".svg" (tout en minuscules).

- -

Toutefois, les fichiers SVG peuvent atteindre une taille assez importante, suivant l'utilisation qu'on en fait. Une application géographique utilisera ainsi des fichiers SVG plus volumineux, par exemple. Pour ces cas particuliers, la spécification SVG permet l'utilisation de fichiers compressés avec gzip. Il est conseillé d'utiliser l'extension .svgz (toujours tout en minuscules) pour ce type de fichiers. Par contre, il est assez problématique d'utiliser des fichiers SVG compressés avec gzip avec certains user agents quand les fichiers sont distribués à travers un serveur Microsoft IIS. De plus, Firefox ne peut pas charger les fichiers compressés en local. Évitez donc d'utiliser les fichiers compressés, sauf si vous êtes sûr que le serveur Web que vous utilisez puisse les distribuer correctement (voir ci-après).

- -

Un mot sur les serveurs web

- -

Maintenant qu'on sait comment créer des fichiers SVG basiques, la prochaine étape consiste à les envoyer sur un serveur web. À ce stade, il existe quelques précautions à suivre. Pour les fichiers SVG normaux, les serveurs devraient envoyer l'en-tête HTTP :

- -
-Content-Type: image/svg+xml
-Vary: Accept-Encoding
-
- -

Pour les fichiers SVG compressés, les serveurs devraient envoyer l'en-tête HTTP :

- -
-Content-Type: image/svg+xml
-Content-Encoding: gzip
-Vary: Accept-Encoding
-
- -

Vous pouvez vérifier que votre serveur envoie le bon en-tête HTTP avec vos fichiers SVG en utilisant le Moniteur réseau ou un site comme websniffer.cc. Fournissez l'URL d'un de vos fichiers SVG et regardez les en-têtes HTTP de la réponse. Si vous remarquez que votre serveur n'envoie pas les en-têtes avec les valeurs ci-dessus, vous devriez contacter votre hébergeur. Si vous avez du mal à le convaincre de configurer correctement leurs serveurs pour le SVG, il y a peut-être moyen de le faire vous-même. Regardez la page de configuration d'un serveur sur le site w3.org pour quelques solutions simples.

- -

La mauvaise configuration du serveur est souvent la cause de l'échec du chargement du SVG, donc assurez-vous bien d'avoir vérifié le vôtre. Si votre serveur n'est pas configuré pour envoyer les bons en-têtes avec les fichiers SVG qu'il fournit, alors Firefox affichera le contenu du fichier comme du texte ou comme du rebut encodé, ou demandera peut-être à l'utilisateur de choisir une application pour l'ouvrir.

- -

{{PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions")}}

diff --git a/files/fr/web/svg/tutorial/getting_started/index.md b/files/fr/web/svg/tutorial/getting_started/index.md new file mode 100644 index 0000000000..5b5fda31c5 --- /dev/null +++ b/files/fr/web/svg/tutorial/getting_started/index.md @@ -0,0 +1,99 @@ +--- +title: Premiers pas +slug: Web/SVG/Tutorial/Getting_Started +tags: + - SVG + - SVG:Tutoriel +translation_of: Web/SVG/Tutorial/Getting_Started +original_slug: Web/SVG/Tutoriel/Premiers_pas +--- +

{{PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions")}}

+ +

Un exemple simple

+ +

Commençons directement avec un exemple pratique. Jetez un coup d'œil au morceau de code suivant :

+ +
+<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect width="100%" height="100%" fill="red" />
+
+  <circle cx="150" cy="100" r="80" fill="green" />
+
+  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
+
+</svg>
+
+ +

Copiez le code précédent dans un document texte, puis enregistrez-le sous le nom de demo1.svg. Ouvrez le fichier dans Firefox. Vous obtiendrez alors l'image suivante (pour les utilisateurs de Firefox : cliquez ici)

+ +

une image avec un rectangle rouge contenant un disque vert dans lequel est écrit SVG en blanc

+ +

Quelques explications s'imposent quant au fonctionnement du rendu :

+ +
    +
  1. Nous commençons avec l'élément svg à la racine : + +
      +
    • La déclaration du doctype que l'on voit en (X)HTML peut être enlevée, car la validation DTD du SVG provoque plus de problèmes qu'elle n'en résout.
      • +
    • Avant SVG 2, pour identifier la version du SVG pour d'autre types de validation, les attributs version et baseProfile devaient toujours être utilisés. Ces deux attributs sont dépréciés en SVG 2.
      • +
    • En tant que langage basé sur XML, l'espace de noms du document SVG doit être correct, d'où l'attribut xmlns. Pour plus d'informations, n'hésitez pas à consulter la page Cours d'introduction aux espaces de noms.
      • +
    +
    2. +
  2. L'arrière-plan est défini par un rectangle rouge, déclaré grâce à la balise <rect> qui recouvre l'intégralité de l'espace.
    3. +
  3. Un cercle (<circle>) vert d'un rayon de 80px est dessiné par-dessus le centre du rectangle rouge, avec un décalage de 30+120px vers l'intérieur et de 50+50px vers le haut.
    4. +
  4. Le texte "SVG" est dessiné. L'intérieur de chaque lettre est rempli de blanc. Le texte est positionné grâce à une ancre placée là où nous souhaitons qu'elle soit. Dans le cas présent, le centre du texte doit correspondre au milieu du rectangle rouge. De petits ajustements peuvent être apportés à la taille de la police et au positionnement vertical, de manière à assurer un résultat final esthétiquement agréable.
    5. +
+ +

Les propriétés basiques des fichiers SVG

+ + + +

Les types de fichiers SVG

+ +

Les fichiers SVG peuvent exister sous deux formes. La première consiste en des fichiers textes traditionnels, contenant des balises SVG. Il est recommandé de nommer ces fichiers avec l'extension ".svg" (tout en minuscules).

+ +

Toutefois, les fichiers SVG peuvent atteindre une taille assez importante, suivant l'utilisation qu'on en fait. Une application géographique utilisera ainsi des fichiers SVG plus volumineux, par exemple. Pour ces cas particuliers, la spécification SVG permet l'utilisation de fichiers compressés avec gzip. Il est conseillé d'utiliser l'extension .svgz (toujours tout en minuscules) pour ce type de fichiers. Par contre, il est assez problématique d'utiliser des fichiers SVG compressés avec gzip avec certains user agents quand les fichiers sont distribués à travers un serveur Microsoft IIS. De plus, Firefox ne peut pas charger les fichiers compressés en local. Évitez donc d'utiliser les fichiers compressés, sauf si vous êtes sûr que le serveur Web que vous utilisez puisse les distribuer correctement (voir ci-après).

+ +

Un mot sur les serveurs web

+ +

Maintenant qu'on sait comment créer des fichiers SVG basiques, la prochaine étape consiste à les envoyer sur un serveur web. À ce stade, il existe quelques précautions à suivre. Pour les fichiers SVG normaux, les serveurs devraient envoyer l'en-tête HTTP :

+ +
+Content-Type: image/svg+xml
+Vary: Accept-Encoding
+
+ +

Pour les fichiers SVG compressés, les serveurs devraient envoyer l'en-tête HTTP :

+ +
+Content-Type: image/svg+xml
+Content-Encoding: gzip
+Vary: Accept-Encoding
+
+ +

Vous pouvez vérifier que votre serveur envoie le bon en-tête HTTP avec vos fichiers SVG en utilisant le Moniteur réseau ou un site comme websniffer.cc. Fournissez l'URL d'un de vos fichiers SVG et regardez les en-têtes HTTP de la réponse. Si vous remarquez que votre serveur n'envoie pas les en-têtes avec les valeurs ci-dessus, vous devriez contacter votre hébergeur. Si vous avez du mal à le convaincre de configurer correctement leurs serveurs pour le SVG, il y a peut-être moyen de le faire vous-même. Regardez la page de configuration d'un serveur sur le site w3.org pour quelques solutions simples.

+ +

La mauvaise configuration du serveur est souvent la cause de l'échec du chargement du SVG, donc assurez-vous bien d'avoir vérifié le vôtre. Si votre serveur n'est pas configuré pour envoyer les bons en-têtes avec les fichiers SVG qu'il fournit, alors Firefox affichera le contenu du fichier comme du texte ou comme du rebut encodé, ou demandera peut-être à l'utilisateur de choisir une application pour l'ouvrir.

+ +

{{PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions")}}

-- cgit v1.2.3-54-g00ecf