diff options
Diffstat (limited to 'files/fr/web/svg/tutorial/introduction/index.html')
| -rw-r--r-- | files/fr/web/svg/tutorial/introduction/index.html | 18 |
1 files changed, 8 insertions, 10 deletions
diff --git a/files/fr/web/svg/tutorial/introduction/index.html b/files/fr/web/svg/tutorial/introduction/index.html index e6bd6d5c2e..0bac917759 100644 --- a/files/fr/web/svg/tutorial/introduction/index.html +++ b/files/fr/web/svg/tutorial/introduction/index.html @@ -9,11 +9,11 @@ original_slug: Web/SVG/Tutoriel/Introduction --- <p>{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}</p> -<p><a href="/@api/deki/files/6301/=lion_svg.png" title="lion_svg.png"><img alt="lion_svg.png" class="internal lwrap" src="/@api/deki/files/6301/=lion_svg.png?size=webview" style="float: left; height: 292px; width: 208px;"></a>SVG est un langage <a href="/fr/XML" title="XML">XML</a>, assez similaire au <a href="/fr/XHTML" title="fr/XHTML">XHTML</a>. Ce langage peut être utilisé pour dessiner des choses complexes, comme le petit lion sur la gauche. Je l'ai dit en présentation de ce tutoriel, le SVG est un langage vectoriel. En gros, cela veut dire que l'image peut être transformée, rétrécie, agrandie, bref, manipulée, sans perte de qualité.</p> +<p>SVG est un langage <a href="/fr/XML" title="XML">XML</a>, assez similaire au <a href="/fr/XHTML" title="fr/XHTML">XHTML</a>. Ce langage peut être utilisé pour dessiner des choses complexes, comme le petit lion sur la gauche. Je l'ai dit en présentation de ce tutoriel, le SVG est un langage vectoriel. En gros, cela veut dire que l'image peut être transformée, rétrécie, agrandie, bref, manipulée, sans perte de qualité.</p> <p>La seconde particularité est que vous allez pouvoir lire le code. Stop ! Lire une image ? Et oui, cela vient du fait que SVG dérive du XML. Nous verrons dans ce tutoriel que le code SVG reste (la plupart du temps) humainement lisible. C'est aussi sympa car on va pouvoir le transformer en arbre DOM et ainsi le manipuler, avec du CSS et / ou du Javascript.</p> -<p>SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au <a class="external external-icon" href="http://www.w3.org" title="en-US/W3C">W3C</a> sans succès. SVG est pris en charge par tous les <a href="https://caniuse.com/#search=svg">principaux navigateurs</a>. Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation.</p> +<p>SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au <a href="http://www.w3.org" title="en-US/W3C">W3C</a> sans succès. SVG est pris en charge par tous les <a href="https://caniuse.com/#search=svg">principaux navigateurs</a>. Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation.</p> <h2 id="Les_ingrédients_de_base">Les ingrédients de base</h2> @@ -25,9 +25,11 @@ original_slug: Web/SVG/Tutoriel/Introduction <h2 id="Les_bons_outils">Les bons outils</h2> -<p>Il y a un certain nombre de logiciels de dessin disponibles qui utilisent SVG comme format natif. Certains, comme <a class="external" href="http://www.inkscape.org/">Inkscape</a>, sont libres et gratuits. Néanmoins, ce tutoriel se basera sur le XML et un simple éditeur de texte. Le but est d'enseigner les mécanismes de SVG à ceux qui veulent les comprendre, et la meilleure façon de le faire est de mettre les mains dans le cambouis avec un peu de balisage.</p> +<p>Il y a un certain nombre de logiciels de dessin disponibles qui utilisent SVG comme format natif. Certains, comme <a href="http://www.inkscape.org/">Inkscape</a>, sont libres et gratuits. Néanmoins, ce tutoriel se basera sur le XML et un simple éditeur de texte. Le but est d'enseigner les mécanismes de SVG à ceux qui veulent les comprendre, et la meilleure façon de le faire est de mettre les mains dans le cambouis avec un peu de balisage.</p> -<p class="note">Tous les visionneurs SVG ne sont pas égaux, il est donc probable que quelque chose écrit pour une application ne s'affiche pas exctement de la même manière dans une autre, simplement parce qu'ils prennent en charge différentes spécifications SVG, CSS ou JavaScript.</p> +<div class="note"> + <p><strong>Note :</strong> Tous les visionneurs SVG ne sont pas égaux, il est donc probable que quelque chose écrit pour une application ne s'affiche pas exctement de la même manière dans une autre, simplement parce qu'ils prennent en charge différentes spécifications SVG, CSS ou JavaScript.</p> +</div> <p>Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le <a href="/fr/HTML" title="fr/HTML">HTML</a>. Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête :</p> @@ -36,7 +38,7 @@ original_slug: Web/SVG/Tutoriel/Introduction <li>Les valeurs des attributs en SVG doivent être placées entre guillemets même si ce sont des nombres.</li> </ul> -<p>La <a class="external" href="http://www.w3.org/Graphics/SVG/">spécification du langage SVG (en)</a> est énorme. Ce tutoriel a pour but d'en traiter juste assez pour pouvoir commencer. Une fois que vous serez à l'aise avec les bases du SVG, vous devriez être capables d'utiliser les <a href="/fr/SVG/Référence_d'éléments" title="fr/SVG/Référence_d'éléments">références d'éléments</a> et les <a href="/fr/SVG/Référence_d'interfaces" title="fr/SVG/Référence_d'interfaces">références d'interfaces</a> pour découvrir tout ce que vous aurez besoin de connaître.</p> +<p>La <a href="http://www.w3.org/Graphics/SVG/">spécification du langage SVG (en)</a> est énorme. Ce tutoriel a pour but d'en traiter juste assez pour pouvoir commencer. Une fois que vous serez à l'aise avec les bases du SVG, vous devriez être capables d'utiliser les <a href="/fr/SVG/Référence_d'éléments" title="fr/SVG/Référence_d'éléments">références d'éléments</a> et les <a href="/fr/SVG/Référence_d'interfaces" title="fr/SVG/Référence_d'interfaces">références d'interfaces</a> pour découvrir tout ce que vous aurez besoin de connaître.</p> <h2 id="Les_versions_SVG">Les versions SVG</h2> @@ -48,8 +50,4 @@ original_slug: Web/SVG/Tutoriel/Introduction <p>Une spécification SVG Print était prévue, qui ajouterait la prise en charge de plusieurs pages et une gestion améliorée des couleurs. Ce travail a été interrompu.</p> -<p>{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}</p> - -<p><span class="comment">Interwiki Languages Links</span></p> - -<p>{{ languages( { "en": "en/SVG/Tutorial/Introduction", "ja": "ja/SVG/Tutorial/Introduction" } ) }}</p> +<p>{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}</p>
\ No newline at end of file |