diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-01 07:45:47 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-11-01 07:45:47 +0100 |
| commit | e7f1d07cba1f78b72eb43bfcdabc262359c4991a (patch) | |
| tree | 04dbbcb9a5ed0ccf1cfb31bdce6a7ab9a5866be8 /files/fr/web/svg/tutorial | |
| parent | aab1606ed15d15bb1dc3a73f33dd60b7230e77fa (diff) | |
| download | translated-content-e7f1d07cba1f78b72eb43bfcdabc262359c4991a.tar.gz translated-content-e7f1d07cba1f78b72eb43bfcdabc262359c4991a.tar.bz2 translated-content-e7f1d07cba1f78b72eb43bfcdabc262359c4991a.zip | |
Prepare SVG section for Markdown conversion (#2570)
* Remove summary classes
* Remove hidden classes out of pre
* Remove spans
* Remove notranslate class
* Remove ids out of headings
* missed 2 ids with regex
* clean note and warning cards
* fix headings errors
* Fix dls and as
* fix imgs
* lint stuff (absolute urls, english links)
* Temporarily readding file
* delete inexisting doc in en-US with flaws
* Fixes #2842 for SVG
Diffstat (limited to 'files/fr/web/svg/tutorial')
17 files changed, 183 insertions, 215 deletions
diff --git a/files/fr/web/svg/tutorial/basic_shapes/index.html b/files/fr/web/svg/tutorial/basic_shapes/index.html index 9df236c6fd..b880c7228a 100644 --- a/files/fr/web/svg/tutorial/basic_shapes/index.html +++ b/files/fr/web/svg/tutorial/basic_shapes/index.html @@ -12,7 +12,7 @@ original_slug: Web/SVG/Tutoriel/Formes_de_base <p>Pour insérer une forme, vous devez ajouter un élément dans un document. Des éléments différents correspondent à des formes différentes et ont des attributs différents pour décrire leur taille et leur position. Certaines déclarations sont très fortement redondantes en ce qu'elles peuvent être créées par d'autres formes, mais elles sont toutes là de manière à faciliter votre vie et à rendre le document SVG aussi court et lisible que possible. Toutes les formes de bases sont affichées sur l'image de gauche. Le code pour générer tout cela ressemble à cela :</p> -<p><img alt="" src="shapes.png" style="float: right;"></p> +<p><img alt="" src="shapes.png"></p> <pre class="brush:xml"> <?xml version="1.0" standalone="no"?> @@ -35,7 +35,9 @@ original_slug: Web/SVG/Tutoriel/Formes_de_base </svg> </pre> -<div class="note"><strong>Note :</strong> les attributs <code>stroke</code>, <code>stroke-width</code> et <code>fill</code> sont détaillés plus loin dans ce tutoriel.</div> +<div class="note"> + <p><strong>Note :</strong> les attributs <code>stroke</code>, <code>stroke-width</code> et <code>fill</code> sont détaillés plus loin dans ce tutoriel.</p> +</div> <h3 id="rectangle">Rectangle</h3> @@ -143,7 +145,7 @@ original_slug: Web/SVG/Tutoriel/Formes_de_base <dl> <dt>points</dt> - <dd>Idem que l'attribut <a><code>points</code></a> de l'élément <code><polyline></code>.</dd> + <dd>Idem que l'attribut <code>points</code> de l'élément <code><polyline></code>.</dd> </dl> <h3 id="path">Chemin</h3> diff --git a/files/fr/web/svg/tutorial/basic_transformations/index.html b/files/fr/web/svg/tutorial/basic_transformations/index.html index 003a88dc05..900c050801 100644 --- a/files/fr/web/svg/tutorial/basic_transformations/index.html +++ b/files/fr/web/svg/tutorial/basic_transformations/index.html @@ -12,20 +12,20 @@ original_slug: Web/SVG/Tutoriel/Transformations_de_base <p>Maintenant, nous sommes prêts à tordre nos images dans tous les sens. Mais avant toute chose, il faut vous présenter l'élément <code><g></code>. Cet assistant va vous permettre d'assigner des attributs à un ensemble d'éléments. En fait, c'est bien son seul rôle. Par exemple :</p> -<div id="two_blocks"> +<h2>Exemple</h2> + <pre class="brush: html"><svg width="30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> </g> </svg></pre> -</div> -<p>{{ EmbedLiveSample('two_blocks', '30', '10') }}</p> +<p>{{ EmbedLiveSample('exemple', '30', '10') }}</p> -<p><span id="result_box" lang="fr"><span class="hps">Toutes les transformations</span> <span class="hps">suivantes</span> <span class="hps">sont résumées</span> <span class="hps">dans l'attribut</span> <code><span class="hps">transform</span></code> <span class="hps">de l'élément</span><span>.</span> <span class="hps">Les transformations peuvent</span> <span class="hps">être mises les unes à la suite des autres,</span> <span class="hps">tout simplement</span> <span class="hps">en les écrivant toutes dans cet attribut</span><span>,</span> <span class="hps">séparées par des espaces</span><span>.</span></span></p> +<p>Toutes les transformations suivantes sont résumées dans l'attribut <code>transform</code> de l'élément. Les transformations peuvent être mises les unes à la suite des autres, tout simplement en les écrivant toutes dans cet attribut, séparées par des espaces.</p> -<h2 id="Translation"><span lang="fr"><span>Translation</span></span></h2> +<h2 id="Translation">Translation</h2> <p>Il peut être nécessaire de décaler un élément, même s'il est possible de définir sa position dans ses attributs. Pour ce faire, la fonction <code>translate()</code> est parfaite.</p> @@ -55,9 +55,9 @@ original_slug: Web/SVG/Tutoriel/Transformations_de_base <p>Les transformations peuvent être concaténées, séparées par des espaces. Par exemple, <code>translate()</code> et <code>rotate()</code> sont couramment utilisées ensemble:</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span><span class="hexcode token">#bff</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">transform</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>translate(30,40) rotate(45)<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><svg width="40" height="50" style="background-color:#bff;"> + <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /> +</svg></pre> <p>{{ EmbedLiveSample('Transformations_multiples', '40', '50') }}</p> @@ -77,9 +77,9 @@ original_slug: Web/SVG/Tutoriel/Transformations_de_base <p><math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow><annotation encoding="TeX">\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right. </annotation></semantics></math></p> -<p>Voici un <a href="/en-US/docs/Web/SVG/Attribute/transform#General_Transformation">exemple concret sur la documentation de transformation SVG</a>. Pour plus de renseignements, veuillez vous référer à <a class="external" href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">la page de recommandation SVG</a>.</p> +<p>Voici un <a href="/fr/docs/Web/SVG/Attribute/transform#General_Transformation">exemple concret sur la documentation de transformation SVG</a>. Pour plus de renseignements, veuillez vous référer à <a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">la page de recommandation SVG</a>.</p> -<h2 class="editable" id="Effets_sur_les_systèmes_de_coordonnées"><span>Effets sur les systèmes de coordonnées</span></h2> +<h2 id="Effets_sur_les_systèmes_de_coordonnées">Effets sur les systèmes de coordonnées</h2> <p>Quand vous utilisez une transformation, vous définissez un nouveau système de coordonnées dans l'élément que vous transformez. Cela signifie que vous appliquez la transformation à tous les attributs de l'élément transformé et donc que cet élément n'est plus dans une carte de pixel d'échelle 1:1. Cette carte est également déplacée, déformée, agrandie ou réduite selon la transformation qui lui est appliquée.</p> @@ -90,13 +90,13 @@ original_slug: Web/SVG/Tutoriel/Transformations_de_base </svg> </pre> -<p>Cet exemple aura pour résultat un rectangle de 100 par 100 pixels.<span id="result_box" lang="fr"><span class="hps"> Les</span> <span class="hps">effets</span> <span class="hps">les plus étonnants</span> <span class="hps">apparaissent</span> <span class="hps">lorsque vous utilisez</span> <span class="hps">des attributs tels que</span> <code><span class="hps">userSpaceOnUse</span></code><span>.</span></span></p> +<p>Cet exemple aura pour résultat un rectangle de 100 par 100 pixels. Les effets les plus étonnants apparaissent lorsque vous utilisez des attributs tels que <code>userSpaceOnUse</code>.</p> <p>{{ EmbedLiveSample('Effets_sur_les_systèmes_de_coordonnées', '100', '100') }}</p> -<h2 id="Embarquer_du_SVG_dans_SVG"><span lang="fr"><span>Embarquer du SVG dans SVG</span></span></h2> +<h2 id="Embarquer_du_SVG_dans_SVG">Embarquer du SVG dans SVG</h2> -<p>Par opposition au HTML, le SVG peut embarquer d'autres éléments <code>svg</code> déclarés de manière tout à fait transparente. <span id="result_box" lang="fr"><span class="hps">De cette façon,</span> <span class="hps">vous pouvez</span><span class="hps"> très simplement</span><span class="hps"> créer</span> <span class="hps">de nouveaux</span> <span class="hps">systèmes de coordonnées</span> <span class="hps">en utilisant</span> <code><span class="hps">viewBox</span></code><span>, <code>width</code></span> <span class="hps">et <code>height</code></span> <span class="hps">de l'élément</span> <code>svg</code><span>.</span></span></p> +<p>Par opposition au HTML, le SVG peut embarquer d'autres éléments <code>svg</code> déclarés de manière tout à fait transparente. De cette façon, vous pouvez très simplement créer de nouveaux systèmes de coordonnées en utilisant <code>viewBox</code>, <code>width</code> et <code>height</code> de l'élément <code>svg</code>.</p> <pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <svg width="100" height="100" viewBox="0 0 50 50"> @@ -111,4 +111,4 @@ original_slug: Web/SVG/Tutoriel/Transformations_de_base <p>{{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }}</p> -<p><span class="comment">Interwiki Languages Links</span></p> +<p>Interwiki Languages Links</p> diff --git a/files/fr/web/svg/tutorial/clipping_and_masking/index.html b/files/fr/web/svg/tutorial/clipping_and_masking/index.html index d838dc5feb..868fa20e19 100644 --- a/files/fr/web/svg/tutorial/clipping_and_masking/index.html +++ b/files/fr/web/svg/tutorial/clipping_and_masking/index.html @@ -36,7 +36,7 @@ original_slug: Web/SVG/Tutoriel/Découpages_et_masquages <p>{{ EmbedLiveSample('Découper','240','240','/files/3224/clipdemo.png') }}</p> -<p>Nous avons maintenant un demi-cercle, sans avoir à passer par un arc dans un élément <code>path</code>. Pour le découpage, chaque forme à l'intérieur de <code>clipPath</code> est inspecté et évalué avec ses propriétés et ses transformations. Chaque zone transparente dans <code>clipPath</code> aura pour effet de masquer le contenu. <span id="result_box" lang="fr"><span>La couleur, l'opacité et autres n'ont pas d'effet tant qu'ils ne rendent pas les formes complètement transparentes.</span></span></p> +<p>Nous avons maintenant un demi-cercle, sans avoir à passer par un arc dans un élément <code>path</code>. Pour le découpage, chaque forme à l'intérieur de <code>clipPath</code> est inspecté et évalué avec ses propriétés et ses transformations. Chaque zone transparente dans <code>clipPath</code> aura pour effet de masquer le contenu. La couleur, l'opacité et autres n'ont pas d'effet tant qu'ils ne rendent pas les formes complètement transparentes.</p> <h3 id="Masquage">Masquage</h3> @@ -85,7 +85,7 @@ original_slug: Web/SVG/Tutoriel/Découpages_et_masquages <h2 id="Utilisation_de_techniques_CSS_bien_connues">Utilisation de techniques CSS bien connues</h2> -<p>Un des outils les plus puissants parmis l'arsenal du développeur web est <code>display: none</code>. Il n'est donc pas étonnant qu'il ait été décidé que cette propriété CSS serait également intégrée à SVG, de même que <code>visibility</code> et <code>clip</code> définis en CSS 2. Pour ré-afficher un élément précédemment caché avec <code>display: none</code> il est important de savoir que la valeur initiale des éléments SVG est <code>inline</code>.<span class="message-body-wrapper"><span class="message-flex-body"> </span></span></p> +<p>Un des outils les plus puissants parmis l'arsenal du développeur web est <code>display: none</code>. Il n'est donc pas étonnant qu'il ait été décidé que cette propriété CSS serait également intégrée à SVG, de même que <code>visibility</code> et <code>clip</code> définis en CSS 2. Pour ré-afficher un élément précédemment caché avec <code>display: none</code> il est important de savoir que la valeur initiale des éléments SVG est <code>inline</code>. </p> <p>{{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }}</p> diff --git a/files/fr/web/svg/tutorial/fills_and_strokes/index.html b/files/fr/web/svg/tutorial/fills_and_strokes/index.html index 6a17f408d6..b0b44168f7 100644 --- a/files/fr/web/svg/tutorial/fills_and_strokes/index.html +++ b/files/fr/web/svg/tutorial/fills_and_strokes/index.html @@ -11,9 +11,9 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <p>Il y a différentes manières de colorer des formes: utiliser différents attributs SVG sur l'objet, utiliser du {{glossary("CSS")}} en ligne, une section CSS ou un fichier CSS externe. La plupart des {{glossary("SVG")}} que vous trouverez sur le Web utilisent du CSS en ligne, mais il y a des avantages et inconvénients pour chaque manière.</p> -<h2 id="Fill_and_Stroke_Attributes" name="Fill_and_Stroke_Attributes">Attributs Fill et Stroke</h2> +<h2 id="Fill_and_Stroke_Attributes">Attributs Fill et Stroke</h2> -<h3 id="Painting" name="Painting">Colorer</h3> +<h3 id="Painting">Colorer</h3> <p>La coloration peut être faite en définissant deux attributs sur l'objet: <code>fill</code> et <code>stroke</code>. <code>Fill</code> définit la couleur de remplissage et <code>stroke</code> définit la couleur de la bordure. Vous pouvez utiliser la même convention de nommage des couleurs que CSS, que ce soit les noms (comme <em>red</em>), les valeurs rgb (comme <em>rgb(255,0,0)</em>), les valeurs hexadécimales, rgba, etc.</p> @@ -24,9 +24,11 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <p>De plus, vous pouvez spécifier l'opacité de <code>fill</code> et/ou <code>stroke</code>. Celle-ci est contrôlé par les attributs <code>fill-opacity</code> et <code>stroke-opacity</code> respectivement.</p> -<div class="note style-wrap"><strong>Note</strong>: Dans Firefox 3+, les valeurs rgba sont autorisés, ce qui donne le même effet qu'utiliser les attributs d'opacité. En revanche, pour être compatible avec les autres navigateurs, il est souvent préférable de spécifier fill/stoke-opacity séparemment. Si vous spécifiez à la fois une valeur rgba et fill/stoke-opacity, les deux seront appliquées.</div> +<div class="note"> + <p><strong>Note :</strong> Dans Firefox 3+, les valeurs rgba sont autorisés, ce qui donne le même effet qu'utiliser les attributs d'opacité. En revanche, pour être compatible avec les autres navigateurs, il est souvent préférable de spécifier fill/stoke-opacity séparemment. Si vous spécifiez à la fois une valeur rgba et fill/stoke-opacity, les deux seront appliquées.</p> +</div> -<h3 id="Stroke" name="Stroke">Options du contour</h3> +<h3 id="Stroke">Options du contour</h3> <p>Outre les propriétés de couleur, il existe quelques attributs additionnels pour contrôler la manière dont le contour est dessiné.</p> @@ -38,7 +40,7 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <p>Le second attribut affectant le contour est la propriété <code>stroke-linecap</code>. Elle contrôle la forme des fins de ligne. Dans l'image ci-dessous, le chemin est dessiné en rose et le contour en noir.</p> -<p><img alt="" class="internal" src="/@api/deki/files/355/=SVG_Stroke_Linecap_Example.png" style="float: right;"></p> +<p><img alt="" src="svg_stroke_linecap_example.png"></p> <pre class="brush:html;"><svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="40" x2="120" y1="20" y2="20" @@ -63,7 +65,7 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <p>La propriété <code>stroke-linejoin</code> permet de contrôler la manière de dessiner la liaison entre deux segments de ligne.</p> -<p><img alt="" class="internal" src="/@api/deki/files/356/=SVG_Stroke_Linejoin_Example.png" style="float: right;"></p> +<p><img alt="" src="svg_stroke_linejoin_example.png"></p> <pre class="brush:html;"><svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" @@ -90,7 +92,7 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <p>Finalement, vous pouvez également créer des lignes pointillées en spécifiant l'attribut <code>stroke-dasharray</code>.</p> -<p><img alt="" class="internal" src="/@api/deki/files/354/=SVG_Stroke_Dasharray_Example.png" style="float: right;"></p> +<p><img alt="" src="svg_stroke_dasharray_example.png"></p> <pre class="brush:html;"><svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" @@ -104,7 +106,7 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <p>L'attribut <code>stroke-dasharray</code> prend une série de nombres séparés par une virgule en argument. </p> <div class="note"> -<p><strong>Note</strong>: Contrairement aux paths, ces nombres <strong><em>doivent</em></strong> être séparés par des virgules (les espaces sont ignorés).</p> + <p><strong>Note :</strong> Contrairement aux paths, ces nombres <strong><em>doivent</em></strong> être séparés par des virgules (les espaces sont ignorés).</p> </div> <p>Le premier nombre spécifie la distance du trait et le second la distance de l'espace. Dans l'exemple précédent, la ligne rouge commence par un trait de 5 suivit d'un espace de 5 (<code>5,5</code>), motif qui se répète sur le reste de la ligne. Vous pouvez spécifier davantage de nombres pour créer un motif de pointillés plus complexe. Pour la ligne noire on a spécifié trois nombres (<code>5,10,5</code>), ce qui a pour effet d'alterner le motif: (5 trait, 10 espace, 5 trait), (5 espace, 10 trait, 5 espace), etc.</p> @@ -119,11 +121,13 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <li><code><a href="/fr/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset</a></code>, définit à partir d'où commencer les pointilliés sur la ligne.</li> </ul> -<h2 id="Using_CSS" name="Using_CSS">Utiliser CSS</h2> +<h2 id="Using_CSS">Utiliser CSS</h2> <p>En plus de définir des attributs sur des objets, vous pouvez également utiliser CSS pour styliser les remplissages et les contours. Tous les attributs ne peuvent pas être définis via CSS. Ceux qui traitent le remplissage et le contour le sont généralement, <code>fill</code>, <code>stroke</code>, <code>stroke-dasharray</code>, etc... peuvent donc être définis de cette manière. Les attributs tels que <code>width</code>, <code>height</code>, ou les commandes des paths, ne peuvent pas être définis par CSS. Le plus simple est de tester pour découvrir ce qui est disponible et ce qui ne l'est pas.</p> -<div class="note style-wrap"><strong>Note:</strong> La <a class="external" href="http://www.w3.org/TR/SVG/propidx.html">spécification SVG</a> décide strictement entre les attributs qui sont des <em>propriétés</em> et les autres. Les premiers peuvent être modifiés avec CSS, les derniers non.</div> +<div class="note"> + <p><strong>Note :</strong> La <a href="http://www.w3.org/TR/SVG/propidx.html">spécification SVG</a> décide strictement entre les attributs qui sont des <em>propriétés</em> et les autres. Les premiers peuvent être modifiés avec CSS, les derniers non.</p> +</div> <h4 id="En_ligne">En ligne</h4> @@ -134,7 +138,7 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <h4 id="Dans_un_section_style">Dans un section style</h4> -<p>Sinon, il peut être déplacé vers une section <code>style</code>. Au lieu de l'insérer dans une section <code><head></code> comme vous le feriez en HTML, on la place dans la zone <a href="/en/SVG/Element/defs" title="en/SVG/Element/defs"><code><defs></code></a> du SVG. <code><defs></code> (abbréviation de definitions) est l'endroit où vous placez les éléments qui n'apparaissent pas dans le SVG directement, mais qui sont utilisés par les autres éléments.</p> +<p>Sinon, il peut être déplacé vers une section <code>style</code>. Au lieu de l'insérer dans une section <code><head></code> comme vous le feriez en HTML, on la place dans la zone <a href="/fr/SVG/Element/defs" title="en/SVG/Element/defs"><code><defs></code></a> du SVG. <code><defs></code> (abbréviation de definitions) est l'endroit où vous placez les éléments qui n'apparaissent pas dans le SVG directement, mais qui sont utilisés par les autres éléments.</p> <pre class="brush:xml;"><?xml version="1.0" standalone="no"?> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> @@ -159,7 +163,7 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <h4 id="Dans_un_fichier_externe">Dans un fichier externe</h4> -<p>Ou vous pouvez spécifier une feuille de style externe pour vos règles CSS avec la <a class="external" href="http://www.w3.org/TR/xml-stylesheet/">syntaxe XML pour les stylesheets</a>:</p> +<p>Ou vous pouvez spécifier une feuille de style externe pour vos règles CSS avec la <a href="http://www.w3.org/TR/xml-stylesheet/">syntaxe XML pour les stylesheets</a>:</p> <pre class="brush:xml;"><?xml version="1.0" standalone="no"?> <?xml-stylesheet type="text/css" href="style.css"?> diff --git a/files/fr/web/svg/tutorial/filter_effects/index.html b/files/fr/web/svg/tutorial/filter_effects/index.html index 332a9b39f5..4fb19b51a6 100644 --- a/files/fr/web/svg/tutorial/filter_effects/index.html +++ b/files/fr/web/svg/tutorial/filter_effects/index.html @@ -115,34 +115,24 @@ original_slug: Web/SVG/Tutoriel/filtres <p>Finalement, {{SVGElement('feMerge')}} fusionne ensemble "offsetBlur", qui est l'ombre portée, et "litPaint", qui est l'élément d'origine avec l'effet d'éclairage.</p> -<div style="display: flex; text-align: center;"> -<div><img alt="Source graphic" src="https://mdn.mozillademos.org/files/16310/filters01-0.png" style="height: 70px; width: 115px;"> -<p>Élément d'origine</p> -</div> +<img alt="graphique source" src="filters01-0.png"> +<p>Graphique source</p> -<div><img alt="Primitive 1" src="https://mdn.mozillademos.org/files/16311/filters01-1.png" style="height: 70px; width: 115px;"> +<img alt="Primitive 1" src="filters01-1.png"> <p>Primitive 1</p> -</div> -<div><img alt="Primitive 2" src="https://mdn.mozillademos.org/files/16312/filters01-2.png" style="height: 70px; width: 115px;"> +<img alt="Primitive 2" src="filters01-2.png"> <p>Primitive 2</p> -</div> -<div><img alt="Primitive 3" src="https://mdn.mozillademos.org/files/16313/filters01-3.png" style="height: 70px; width: 115px;"> +<img alt="Primitive 3" src="filters01-3.png"> <p>Primitive 3</p> -</div> -<div><img alt="Primitive 4" src="https://mdn.mozillademos.org/files/16314/filters01-4.png" style="height: 70px; width: 115px;"> +<img alt="Primitive 4" src="filters01-4.png"> <p>Primitive 4</p> -</div> -<div><img alt="Primitive 5" src="https://mdn.mozillademos.org/files/16315/filters01-5.png" style="height: 70px; width: 115px;"> +<img alt="Primitive 5" src="filters01-5.png"> <p>Primitive 5</p> -</div> -<div><img alt="Primitive 6" src="https://mdn.mozillademos.org/files/16316/filters01-6.png" style="height: 70px; width: 115px;"> +<img alt="Primitive 6" src="filters01-6.png"> <p>Primitive 6</p> -</div> -</div> - <p>{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}</p> diff --git a/files/fr/web/svg/tutorial/gradients/index.html b/files/fr/web/svg/tutorial/gradients/index.html index 1e5e8e7d45..4528d51fb7 100644 --- a/files/fr/web/svg/tutorial/gradients/index.html +++ b/files/fr/web/svg/tutorial/gradients/index.html @@ -13,7 +13,7 @@ original_slug: Web/SVG/Tutoriel/Gradients <p>Il y a deux types de dégradés: linéaire et radial. Les dégradés sont définis dans la section <code>defs</code> et non sur les formes elles-mêmes — cela favorise leur réusabilité. Vous <strong>devez</strong> donner au dégradé un attribut <code>id</code>; autrement, il ne pourra pas être utilisé par les autres éléments à l'intérieur du fichier SVG.</p> -<h2 id="SVGLinearGradient" name="SVGLinearGradient">Dégradé Linéaire</h2> +<h2 id="SVGLinearGradient">Dégradé Linéaire</h2> <p>Les dégradés linéaires (<em>linear gradient</em> en anglais) changent de couleur le long d'une ligne droite. Pour en insérer un, on crée un élément {{SVGElement('linearGradient')}} dans la section des définitions du fichier SVG.</p> @@ -79,12 +79,12 @@ original_slug: Web/SVG/Tutoriel/Gradients <stop id="stop3" offset="100%"/> </linearGradient> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1" - xmlns:xlink="<a class="external" href="http://www.w3.org/1999/xlink" rel="freelink">http://www.w3.org/1999/xlink</a>" xlink:href="#Gradient1"/> + xmlns:xlink="<a href="http://www.w3.org/1999/xlink" rel="freelink">http://www.w3.org/1999/xlink</a>" xlink:href="#Gradient1"/> </pre> <p>Ici, le namespace xlink est inclut directement sur le noeud, bien qu'il soit généralement définit en haut du document, comme dans l'<a href="/fr/docs/Web/SVG/Tutoriel/Contenu_embarque_SVG">exemple avec les images</a></p> -<h2 id="Radial_Gradient" name="Radial_Gradient">Dégradé Radial</h2> +<h2 id="Radial_Gradient">Dégradé Radial</h2> <p>Les dégradés radiaux (<em>radial gradient</em> en anglais) sont similaires aux dégradés linéaires à la différence près qu'ils irradient autour d'un point. Pour en créer un, on crée un élément {{SVGElement('radialGradient')}} dans la section de définitions du document SVG.</p> diff --git a/files/fr/web/svg/tutorial/index.html b/files/fr/web/svg/tutorial/index.html index eacaeb73c4..8e47aea0cd 100644 --- a/files/fr/web/svg/tutorial/index.html +++ b/files/fr/web/svg/tutorial/index.html @@ -11,13 +11,12 @@ tags: translation_of: Web/SVG/Tutorial original_slug: Web/SVG/Tutoriel --- -<p class="summary"><a href="/fr/docs/Web/SVG">SVG</a>, pour Scalable Vector Graphics (ou encore Graphismes vectoriels redimensionnables), est un langage basé sur le <a href="/fr/docs/Web/XML">XML</a> du W3C qui permet de définir des éléments graphiques avec des balises. Ce langage est plus ou moins implémenté dans Firefox, Opera, les navigateurs à base de Webkit, Internet Explorer et les autres navigateurs Web.</p> +<p><a href="/fr/docs/Web/SVG">SVG</a>, pour Scalable Vector Graphics (ou encore Graphismes vectoriels redimensionnables), est un langage basé sur le <a href="/fr/docs/Web/XML">XML</a> du W3C qui permet de définir des éléments graphiques avec des balises. Ce langage est plus ou moins implémenté dans Firefox, Opera, les navigateurs à base de Webkit, Internet Explorer et les autres navigateurs Web.</p> <p>Ce tutoriel a pour but d'expliquer les mécanismes internes de SVG et regorge de détails techniques. Si vous souhaitez juste dessiner de belles images, vous trouverez plus facilement votre bonheur sur la <a href="https://inkscape.org/doc/">page de documentation d'Inkscape</a>. Le W3C fournit également une <a href="https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">bonne introduction au format SVG</a>, en anglais.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Le tutoriel en est encore à un stade précoce de développement. Si vous le pouvez, aidez-nous en rédigeant un paragraphe ou deux. Des points supplémentaires pour l'écriture d'une page entière !</p> +<div class="note"> + <p><strong>Note :</strong> Le tutoriel en est encore à un stade précoce de développement. Si vous le pouvez, aidez-nous en rédigeant un paragraphe ou deux. Des points supplémentaires pour l'écriture d'une page entière !</p> </div> <h2 id="Introducing_SVG_from_Scratch">Introduction à « SVG from Scratch »</h2> @@ -42,11 +41,4 @@ original_slug: Web/SVG/Tutoriel <li><a href="/fr/docs/Web/SVG/Tutorial/SVG_and_CSS">Graphiques SVG</a></li> </ul> -<p>Les sujets suivants sont plus avancés et devraient donc faire l'objet de leurs propres tutoriels.</p> - -<h2 id="Scripting_SVG_with_JavaScript">Scripter SVG avec JavaScript</h2> - -<div class="notecard draft"> - <p><b>Brouillon</b></p> - <p>Cette section est en cours de création.</p> -</div> +<p>Les sujets suivants sont plus avancés et devraient donc faire l'objet de leurs propres tutoriels.</p>
\ No newline at end of file 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 diff --git a/files/fr/web/svg/tutorial/other_content_in_svg/index.html b/files/fr/web/svg/tutorial/other_content_in_svg/index.html index c8d11cff2f..0356f8789c 100644 --- a/files/fr/web/svg/tutorial/other_content_in_svg/index.html +++ b/files/fr/web/svg/tutorial/other_content_in_svg/index.html @@ -8,21 +8,21 @@ original_slug: Web/SVG/Tutoriel/Contenu_embarque_SVG <p>En plus des formes graphiques simples comme les rectangles et les cercles, le format SVG permet d'ajouter d'autres types de contenu aux images.</p> -<h3 id="Embarquer_des_images">Embarquer des images</h3> +<h3 id="embarquer_des_images">Embarquer des images</h3> <p>De la même façon qu'il est possible d'utiliser la balise <strong>img</strong> en HTML, le format SVG possède un élément <strong><code>image</code></strong> qui a la même utilité. Vous pouvez l'utiliser pour insérer des images bitmap ou vectorielles dans votre image SVG. La spécification définit que les formats PNG, JPEG et SVG au moins doivent être supportés.</p> <p>L'image embarquée devient un élément SVG normal. Cela implique que vous pouvez utiliser le découpage, les masques, les filtres, les rotations et toute la panoplie des outils svg sur ce contenu embarqué :</p> -<pre><svg version="1.1" - xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" - width="200" height="200"> - <image x="90" y="-65" width="128" height="146" transform="<strong>rotate(45)</strong>" - xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/> +<pre class="brush: html"><svg version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="200" height="200"> +<image x="90" y="-65" width="128" height="146" transform="rotate(45)" + xlink:href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image/mdn_logo_only_color.png"/> </svg> </pre> -<p><img alt="imagedemo.png" class="default internal" src="/@api/deki/files/4949/=imagedemo.png"></p> +<p>{{ EmbedLiveSample('embarquer_des_images','220','240') }}</p> <h3 id="Embarquer_du_contenu_XML_quelconque">Embarquer du contenu XML quelconque</h3> @@ -30,7 +30,9 @@ original_slug: Web/SVG/Tutoriel/Contenu_embarque_SVG <p>L'élément <strong><code>foreignObject</code></strong> est donc la bonne méthode pour embarquer du <strong>XHTML</strong> dans du SVG. Si le SVG doit contenir du texte de longueur conséquente, la disposition HTML est bien plus pratique et utilisable que l'élément SVG <code>text</code>. Une autre utilisation bien pratique de cet élément est l'adjonction de formules avec MathML. Pour des applications scientifiques utilisant le SVG, c'est un bon moyen de permettre la communication entre ces deux univers.</p> -<div class="note"><strong>Note:</strong> Gardez à l'esprit que le contenu du <code>foreignObject</code> doit pouvoir être analysé et pris en compte par votre lecteur SVG. Il y a peu de chances qu'un lecteur SVG autonome soit capable de restituer du contenu HTML or MathML.</div> +<div class="note"> + <p><strong>Note :</strong> Gardez à l'esprit que le contenu du <code>foreignObject</code> doit pouvoir être analysé et pris en compte par votre lecteur SVG. Il y a peu de chances qu'un lecteur SVG autonome soit capable de restituer du contenu HTML or MathML.</p> +</div> <p>Etant donné que le <code>foreignObject</code> est un élément SVG comme un autre, vous pouvez, comme dans le case de l'élément <code>image</code>, utiliser toute la panoplie des attributs SVG qui pourrait s'appliquer au contenu embarqué.</p> diff --git a/files/fr/web/svg/tutorial/paths/index.html b/files/fr/web/svg/tutorial/paths/index.html index c006452033..e0160782bb 100644 --- a/files/fr/web/svg/tutorial/paths/index.html +++ b/files/fr/web/svg/tutorial/paths/index.html @@ -9,7 +9,7 @@ original_slug: Web/SVG/Tutoriel/Paths --- <p>{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}</p> -<p>L’élément <a href="/en-US/Web/SVG/Element/path"><code><path></code></a> (<em>chemin</em> en français) est le plus versatile des éléments de la bibliothèque SVG parmi les <a href="/fr/docs/Web/SVG/Tutoriel/Formes_de_base">formes basiques</a>. Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres.</p> +<p>L’élément <a href="/fr/Web/SVG/Element/path"><code><path></code></a> (<em>chemin</em> en français) est le plus versatile des éléments de la bibliothèque SVG parmi les <a href="/fr/docs/Web/SVG/Tutoriel/Formes_de_base">formes basiques</a>. Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres.</p> <p>Les chemins créent des formes en combinant plusieurs lignes droites ou courbes. Les formes composées uniquement de lignes droites peuvent être crées avec des <a href="/fr/docs/Web/SVG/Tutoriel/Formes_de_base#Lignes_brisées">lignes brisées</a> (<em>polylines</em>). Bien que les lignes brisées et les chemins peuvent tout deux créer des formes d’apparence similaire, les lignes brisées nécessitent un grand nombre de petites lignes pour simuler des courbes, et qui ne s’adaptent pas bien aux grandes tailles. Une bonne compréhension des chemins est importante pour dessiner en SVG. Bien qu’il ne soit pas recommandé d'éditer des chemins complexes avec un éditeur XML ou texte (on utilisera plutôt un éditeur SVG tel que Inkscape ou Adobe Illustrator), comprendre comment un chemin s'écrit vous permettra éventuellement d’identifier et de corriger des erreurs d’affichage dans un SVG.</p> @@ -38,7 +38,7 @@ original_slug: Web/SVG/Tutoriel/Paths <p>Dans l’exemple suivant, on se place au point (10, 10). Notez cependant qu'à ce stade rien n'est dessiné, on a manuellement ajouté un cercle pour indiquer la position:</p> -<p><img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p> +<p><img alt="" src="blank_path_area.png"></p> <pre class="brush: xml"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M10 10"/> @@ -60,9 +60,9 @@ original_slug: Web/SVG/Tutoriel/Paths V y (ou v dy) </pre> -<p>Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément <code><rect></code>). Il est composé uniquement de lignes horizontales et verticales <span style="line-height: 1.5;">:</span></p> +<p>Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément <code><rect></code>). Il est composé uniquement de lignes horizontales et verticales :</p> -<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p> +<p><img alt="" src="path_line_commands.png"></p> <pre class="brush: xml"><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="M10 10 H 90 V 90 H 10 L 10 10"/> @@ -101,7 +101,7 @@ V y (ou v dy) <h2 id="Commandes_pour_les_courbes">Commandes pour les courbes</h2> -<p>Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la <a class="external" href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">page Wikipedia Courbe de Bézier</a>.</p> +<p>Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">page Wikipedia Courbe de Bézier</a>.</p> <p>Il existe une infinité de courbes de Bézier, mais seulement deux des plus simples d’entre elles sont disponibles dans les éléments <code>path</code>: l’une cubique, invoquée avec <code>C</code>, et l’autre quadratique, invoquée avec <code>Q</code>.</p> @@ -116,7 +116,7 @@ V y (ou v dy) <p>Les points de contrôle décrivent, pour faire simple, la pente de la courbe pour le point de départ et pour le point d'arrivée. La fonction Bézier crée ensuite une courbe lisse faisant le lien entre la pente que vous avez établie au début de votre ligne, et celle à l’autre extrémité.</p> -<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> +<p><img src="shortcut_cubic_bézier_with_grid.png"></p> <pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/> @@ -151,7 +151,7 @@ V y (ou v dy) <p>Un exemple de cette syntaxe est montré ci-dessous. Dans la figure associée, les points de contrôle spécifiés sont indiqués en rouge, et le point de contrôle inféré, en bleu.</p> -<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> +<p><img src="shortcut_cubic_bézier_with_grid.png"></p> <pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> @@ -166,7 +166,8 @@ V y (ou v dy) <p>(x1 y1) est la position du point de contrôle, et (x y) est le point d’arrivée de la courbe.</p> -<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> +<p><img alt="courbe de Bézier quadratique avec une grille" src="quadratic_bézier_with_grid.png"></p> + <pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> @@ -182,10 +183,11 @@ V y (ou v dy) <p>Ce raccourci examine le précédent point de contrôle utilisé et en infère un nouveau à partir de celui-ci. Cela signifie qu’après un premier point de contrôle, vous pouvez créer des formes assez complexes en spécifiant seulement les points d’extrémités.</p> <div class="note"> -<p><strong>Note</strong>: Ce raccourci fonctionne uniquement si la commande précédente est une commande <code>Q</code> ou <code>T</code>. Dans le cas contraire, le point de contrôle est considéré comme le même que le point précédent, et vous ne dessinerez que des lignes.</p> + <p><strong>Note :</strong> Ce raccourci fonctionne uniquement si la commande précédente est une commande <code>Q</code> ou <code>T</code>. Dans le cas contraire, le point de contrôle est considéré comme le même que le point précédent, et vous ne dessinerez que des lignes.</p> </div> -<p><img alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p> +<p><img src="shortcut_quadratic_bézier_with_grid.png"></p> + <pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/> @@ -193,7 +195,7 @@ V y (ou v dy) <p>Les deux courbes produisent des résultats similaires, bien que les courbes cubiques vous offrent une plus grande liberté dans l’apparence exacte que vous voulez donner à votre courbe. Le choix du type de courbe de Bézier à utiliser se fait au cas par cas, et dépend du nombre de symétries que présente votre ligne.</p> -<h3 id="Arcs" name="Arcs">Elliptical Arc</h3> +<h3 id="Arcs">Elliptical Arc</h3> <p>Le dernier type de ligne courbe que vous pouvez créer avec SVG est l’arc, invoqué avec <code>A</code> (<em>Elliptical Arc</em>). Les arcs sont des sections de cercles ou d’ellipses.</p> @@ -207,7 +209,7 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy <p><code>x-axis-rotation</code> décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple:</p> -<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p> +<p><img alt="SVGArcs_XAxisRotation_with_grid" src="svgarcs_xaxisrotation_with_grid.png"></p> <pre class="brush: xml"><svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <line x1="10" y1="315" x2="315" y2="10" stroke="black" stroke-width="2" /> @@ -238,10 +240,9 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy stroke="blue" stroke-width="6" fill="none" /> </pre> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h5>Exemple jouable</h5> -<pre class="brush: html"><svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html hidden"><svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"> <g font-family="Verdana" font-size="13" > <ellipse cx="125" cy="125" rx="100" ry="50" @@ -262,7 +263,7 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy </svg></pre> </div> -<p>{{ EmbedLiveSample('Playable_code', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('exemple_jouable', '100%', 200) }}</p> <h4 id="large-arc-flag">large-arc-flag</h4> @@ -279,10 +280,9 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy stroke="blue" stroke-width="6" fill="none" /> </pre> -<div class="hidden"> -<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6> +<h4 id="code_jouable_2">Code jouable 2</h4> -<pre class="brush: html"><svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html hidden"><svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"> <g font-family="Verdana" font-size="13" > <ellipse cx="125" cy="125" rx="100" ry="50" @@ -301,13 +301,12 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy <path d="M 125,75 a100,50 0 1,0 100,50" stroke="blue" stroke-width="6" fill="none" /> </svg></pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('code_jouable_2', '100%', 200) }}</p> <p>L’exemple ci-dessous montre les quatre combinaisons possibles avec <code>sweep-flag</code> et <code>large-arc-flag</code>:</p> -<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p> +<p><img alt="" src="svgarcs_flags.png"></p> <pre class="brush: xml"><svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"> <path d="M80 80 diff --git a/files/fr/web/svg/tutorial/patterns/index.html b/files/fr/web/svg/tutorial/patterns/index.html index 0b170b5b48..703d6f3935 100644 --- a/files/fr/web/svg/tutorial/patterns/index.html +++ b/files/fr/web/svg/tutorial/patterns/index.html @@ -56,10 +56,10 @@ original_slug: Web/SVG/Tutoriel/Motifs <p>La chose à retenir est que si l'objet change de taille, le motif lui-même sera mis à l'échelle mais les objets à l'intérieur non. Ainsi, alors qu'on aura toujours 4 motifs qui se répètent horizontalement et verticalement, les objets à l'intérieur du motif garderont la même taille, et une zone vide sera affichée.</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> -<pre class="brush: html"><svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> +<h3>Exemple</h6> + +<pre class="brush: html hidden"><svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> <defs> <linearGradient id="Gradient1"> <stop offset="5%" stop-color="white"/> @@ -88,7 +88,7 @@ original_slug: Web/SVG/Tutoriel/Motifs rect.setAttribute('width', 300);</textarea> </pre> -<pre class="brush: js">var svg = document.getElementById('svg'), +<pre class="brush: js hidden">var svg = document.getElementById('svg'), rect = svg.lastElementChild; var textarea = document.getElementById('code'), @@ -110,9 +110,8 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawSvg); window.addEventListener('load', drawSvg); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code','220','350') }}</p> +<p>{{ EmbedLiveSample('exemple_jouable','220','350') }}</p> <h2 id="Unités_du_contenu_objectBoundingBox">Unités du contenu: objectBoundingBox</h2> @@ -127,10 +126,9 @@ window.addEventListener('load', drawSvg); <p>Maintenant, parce le contenu du motif utilise le même système d'unité que le motif, le motif redimensionne automatiquement son contenu. Cela contraste avec le système "userSpaceOnUse" par défaut, où lorsque le motif change le taille, le contenu garde la même taille.</p> -<div class="hidden"> -<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6> +<h3 id="code_jouable_2">Code jouable 2</h3> -<pre class="brush: html"><svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> +<pre class="brush: html hidden"><svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> <defs> <linearGradient id="Gradient1"> <stop offset="5%" stop-color="white"/> @@ -159,7 +157,7 @@ window.addEventListener('load', drawSvg); rect.setAttribute('width', 300);</textarea> </pre> -<pre class="brush: js">var svg = document.getElementById('svg'), +<pre class="brush: js hidden">var svg = document.getElementById('svg'), rect = svg.lastElementChild; var textarea = document.getElementById('code'), @@ -181,11 +179,12 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawSvg); window.addEventListener('load', drawSvg); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2','220','350') }}</p> +<p>{{ EmbedLiveSample('code_jouable_2','220','350') }}</p> -<p class="note"><strong>Note</strong>: Dans Gecko, les cercles semblent avoir du mal à être dessinés si le rayon est inférieur à 0.075 (on ignore s'il s'agit d'un bug de l'élément pattern ou non). Pour contourner ce problème, il est probablement préférable d'éviter de dessiner des cercles dans des unités "objectBoundingBox".</p> +<div class="note"> + <p><strong>Note :</strong> Dans Gecko, les cercles semblent avoir du mal à être dessinés si le rayon est inférieur à 0.075 (on ignore s'il s'agit d'un bug de l'élément pattern ou non). Pour contourner ce problème, il est probablement préférable d'éviter de dessiner des cercles dans des unités "objectBoundingBox".</p> +</div> <h2 id="Unités_du_motif_userSpaceOnUse">Unités du motif: userSpaceOnUse</h2> @@ -200,10 +199,9 @@ window.addEventListener('load', drawSvg); <p>Bien sûr, cela veut dire que le motif ne sera pas mis à l'échelle si vous modifiez la taille de l'objet ultérieurement.</p> -<div class="hidden"> -<h6 id="Playable_code_3" name="Playable_code_3">Playable code</h6> +<h3>Exemple jouable</h3> -<pre class="brush: html"><svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> +<pre class="brush: html hidden"><svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> <defs> <linearGradient id="Gradient1"> <stop offset="5%" stop-color="white"/> @@ -232,7 +230,7 @@ window.addEventListener('load', drawSvg); rect.setAttribute('width', 300);</textarea> </pre> -<pre class="brush: js">var svg = document.getElementById('svg'), +<pre class="brush: js hidden">var svg = document.getElementById('svg'), rect = svg.lastElementChild; var textarea = document.getElementById('code'), @@ -254,14 +252,13 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawSvg); window.addEventListener('load', drawSvg); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_3','220','350') }}</p> +<p>{{ EmbedLiveSample('exemple_jouable_3','220','350') }}</p> <h2 id="Récapitulatif">Récapitulatif</h2> <p>Les trois exemples sont illustrés ci-dessous sur un rectangle allongé à une hauteur de 300px:</p> -<p><img alt="Image:SVG_Pattern_Comparison_of_Units.png" class="internal" src="/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png"></p> +<p><img src="svg_pattern_comparison_of_units.png"></p> <p>{{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }}</p> diff --git a/files/fr/web/svg/tutorial/positions/index.html b/files/fr/web/svg/tutorial/positions/index.html index a2542da4f7..4a42fe000f 100644 --- a/files/fr/web/svg/tutorial/positions/index.html +++ b/files/fr/web/svg/tutorial/positions/index.html @@ -12,7 +12,9 @@ original_slug: Web/SVG/Tutoriel/Positionnement <h3 id="La_grille">La grille</h3> -<p><img alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="float: right;">Pour chaque élément, SVG utilise un ensemble de coordonnées aussi appelé grille assez similaire à ce qui est utilisé dans <a href="/fr/HTML/Canvas" title="fr/HTML/Canvas">canvas</a> (et par tout un tas d'autres routines de dessin informatique). Dans le cas présent, le point en haut à gauche est considéré comme le point (0,0) ou point d'origine. Le positionnement est ensuite mesuré en pixel, depuis le coin supérieur gauche. Les valeurs positives de x vont vers la droite, les valeurs positives de y vont vers le bas. Notez que tout ceci est un peu contraire à la géométrie que l'on vous a enseignée. Ici, le positionnement fonctionne de la même manière que pour les éléments HTML.</p> +<p>Pour chaque élément, SVG utilise un ensemble de coordonnées aussi appelé grille assez similaire à ce qui est utilisé dans <a href="/fr/HTML/Canvas" title="fr/HTML/Canvas">canvas</a> (et par tout un tas d'autres routines de dessin informatique). Dans le cas présent, le point en haut à gauche est considéré comme le point (0,0) ou point d'origine. Le positionnement est ensuite mesuré en pixel, depuis le coin supérieur gauche. Les valeurs positives de x vont vers la droite, les valeurs positives de y vont vers le bas. Notez que tout ceci est un peu contraire à la géométrie que l'on vous a enseignée. Ici, le positionnement fonctionne de la même manière que pour les éléments HTML.</p> + +<img alt="" src="canvas_default_grid.png"> <h4 id="Exemple">Exemple</h4> @@ -51,6 +53,6 @@ original_slug: Web/SVG/Tutoriel/Positionnement <p>{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}</p> -<p><span class="comment">Interwiki Languages Links</span></p> +<p>Interwiki Languages Links</p> <p>{{ languages( { "en": "en/SVG/Tutorial/Positions"} ) }}</p> diff --git a/files/fr/web/svg/tutorial/svg_and_css/index.html b/files/fr/web/svg/tutorial/svg_and_css/index.html index d941eff34f..d631eaa441 100644 --- a/files/fr/web/svg/tutorial/svg_and_css/index.html +++ b/files/fr/web/svg/tutorial/svg_and_css/index.html @@ -17,9 +17,8 @@ original_slug: CSS/Premiers_pas/Graphiques_SVG <p>Nous allons voir par la suite un exemple que vous pourrez copier pour l'exécuter dans votre navigateur (à la condition que celui-ci soit compatible avec SVG).</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Les éléments référencés par des éléments <a href="/fr/docs/Web/SVG/Element/use"><code><use></code></a> héritent des styles de cet élément. Pour leur appliquer des styles différents, il faut donc utiliser <a href="/fr/docs/Web/CSS/CSS_Variables">les propriétés CSS personnalisées (<i>custom properties</i>)</a>.</p> +<div class="note"> + <p><strong>Note :</strong> Les éléments référencés par des éléments <a href="/fr/docs/Web/SVG/Element/use"><code><use></code></a> héritent des styles de cet élément. Pour leur appliquer des styles différents, il faut donc utiliser <a href="/fr/docs/Web/CSS/CSS_Variables">les propriétés CSS personnalisées (<i>custom properties</i>)</a>.</p> </div> <h2 id="example">Exemple</h2> @@ -381,9 +380,8 @@ svg { <li>Le SVG a ses propres propriétés et valeurs CSS. Certaines d'entre elles sont similaires aux propriétés CSS utilisées pour le HTML.</li> </ul> -<div class="notecard note"> - <p><b>Défi :</b></p> -<p>Modifiez la feuille de style de sorte que les pétales intérieurs deviennent tous roses lorsque le pointeur de la souris passe sur l'un d'entre eux, sans modifier le fonctionnement des pétales extérieurs.</</p> +<div class="note"> + <p><strong>Note :</strong> Modifiez la feuille de style de sorte que les pétales intérieurs deviennent tous roses lorsque le pointeur de la souris passe sur l'un d'entre eux, sans modifier le fonctionnement des pétales extérieurs.</</p> </div> <p><a href="/fr/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#svg_and_css">Voir une solution à ce défi.</a></p> diff --git a/files/fr/web/svg/tutorial/svg_fonts/index.html b/files/fr/web/svg/tutorial/svg_fonts/index.html index 327022ea96..4ccc526697 100644 --- a/files/fr/web/svg/tutorial/svg_fonts/index.html +++ b/files/fr/web/svg/tutorial/svg_fonts/index.html @@ -12,33 +12,34 @@ original_slug: Web/SVG/Tutoriel/polices_SVG <p>Lorsque SVG a été spécifié, le support des polices d'écriture pour le web n'était pas répandu dans les navigateurs. Comme l'accès au fichier de la police adéquate est cependant crucial pour afficher correctement le texte, une technologie de description des polices a été ajoutée à SVG pour offrir cette capacité. Elle n'a pas été conçue pour la compatibilité avec d'autres formats tels que le PostScript ou OTF, mais plutôt comme un moyen simple d'intégration des informations des glyphes en SVG lors de l'affichage.</p> -<div class="note"><strong>Les Polices d'écritures SVG sont actuellement supportées uniquement sur Safari et le navigateur Android.</strong><br> -Internet Explorer <a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx">n'a pas envisagé de les implémenter</a>, la fonctionnalité a été <a href="https://www.chromestatus.com/feature/5930075908210688">supprimée de Chrome 38</a> (et Opera 25) et Firefox a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490">reporté sa mise en œuvre indéfiniment</a> pour se concentrer sur <a href="/en/WOFF" title="en/About WOFF">WOFF</a>. Cependant, d'autres outils comme le plugin <a class="external" href="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a>, Batik et des modèles de document d'Inkscape supportent l'incorporation des Police d'écriture SVG.</div> +<div class="note"> + <p><strong>Note :</strong> Les Polices d'écritures SVG sont actuellement supportées uniquement sur Safari et le navigateur Android. Internet Explorer <a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx">n'a pas envisagé de les implémenter</a>, la fonctionnalité a été <a href="https://www.chromestatus.com/feature/5930075908210688">supprimée de Chrome 38</a> (et Opera 25) et Firefox a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490">reporté sa mise en œuvre indéfiniment</a> pour se concentrer sur <a href="/fr/WOFF" title="en/About WOFF">WOFF</a>. Cependant, d'autres outils comme le plugin <a href="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a>, Batik et des modèles de document d'Inkscape supportent l'incorporation des Police d'écriture SVG.</p> +</div> <p>La base pour définir une police SVG est l'élément {{ SVGElement("font") }}.</p> <h2 id="Définir_une_police">Définir une police</h2> -<p>Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenons un exemple de déclaration (celle <a class="external" href="http://www.w3.org/TR/SVG/fonts.html#FontElement">de la spécification</a>), et expliquons-en les détails.</p> - -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Font1<span class="punctuation token">"</span></span> <span class="attr-name token">horiz-adv-x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1000<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span> <span class="attr-name token">font-weight</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>bold<span class="punctuation token">"</span></span> <span class="attr-name token">font-</span><span class="language-css style-attr token"><span class="attr-name token"><span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token">normal</span><span class="punctuation token">"</span></span> - <span class="attr-name token">units-per-em</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1000<span class="punctuation token">"</span></span> <span class="attr-name token">cap-height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>600<span class="punctuation token">"</span></span> <span class="attr-name token">x-height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>400<span class="punctuation token">"</span></span> - <span class="attr-name token">ascent</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>700<span class="punctuation token">"</span></span> <span class="attr-name token">descent</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span> - <span class="attr-name token">alphabetic</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">mathematical</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>350<span class="punctuation token">"</span></span> <span class="attr-name token">ideographic</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>400<span class="punctuation token">"</span></span> <span class="attr-name token">hanging</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face-src</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face-name</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans Bold<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font-face-src</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font-face</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>missing-glyph</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>path</span> <span class="attr-name token">d</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>M0,0h200v200h-200z<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>missing-glyph</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>glyph</span> <span class="attr-name token">unicode</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>!<span class="punctuation token">"</span></span> <span class="attr-name token">horiz-adv-x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="comment token"><!-- Outline of exclam. pt. glyph --></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>glyph</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>glyph</span> <span class="attr-name token">unicode</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>@<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="comment token"><!-- Outline of @ glyph --></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>glyph</span><span class="punctuation token">></span></span> - <span class="comment token"><!-- more glyphs --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span></code></pre> +<p>Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenons un exemple de déclaration (celle <a href="http://www.w3.org/TR/SVG/fonts.html#FontElement">de la spécification</a>), et expliquons-en les détails.</p> + +<pre class="brush: html"><font id="Font1" horiz-adv-x="1000"> + <font-face font-family="Super Sans" font-weight="bold" font-style="normal" + units-per-em="1000" cap-height="600" x-height="400" + ascent="700" descent="300" + alphabetic="0" mathematical="350" ideographic="400" hanging="500"> + <font-face-src> + <font-face-name name="Super Sans Bold"/> + </font-face-src> + </font-face> + <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph> + <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph> + <glyph unicode="@"><!-- Outline of @ glyph --></glyph> + <!-- more glyphs --> +</font></pre> <p>Nous commençons avec l'élement {{ SVGElement("font") }}. Il contient un attribut id, ce qui permet de le référencer via une URI (voir plus bas). L'attribut <code>horiz-adv-x</code> définit sa largeur moyenne, comparée aux définitions des autres glyphes individules. La valeur 1000 définit une valeur raisonnable. Plusieurs autres attributs associés précisent l'affichage de la boite qui encapsule le glyphe.</p> -<p>L'élément {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS <a href="https://developer.mozilla.org/en/CSS/@font-face" title="en/css/@font-face"><code>@font-face</code></a>. Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est <code>font-family</code> : Elle pourra alors être référencée via la propriété <code>font-family</code> présente dans les CSS et les SVG. Les attributs <code>font-weight</code> et <code>font-style</code> ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes (<a class="external external-icon" href="http://en.wikipedia.org/wiki/Ascender_%28typography%29">ascenders</a>).</p> +<p>L'élément {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS <a href="/fr/CSS/@font-face" title="en/css/@font-face"><code>@font-face</code></a>. Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est <code>font-family</code> : Elle pourra alors être référencée via la propriété <code>font-family</code> présente dans les CSS et les SVG. Les attributs <code>font-weight</code> et <code>font-style</code> ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes (<a href="http://en.wikipedia.org/wiki/Ascender_%28typography%29">ascenders</a>).</p> <p>Its child, the {{ SVGElement("font-face-src") }} element, corresponds to CSS' <code>src</code> descriptor in <code>@font-face</code> declarations. You can point to external sources for font declarations by means of its children {{ SVGElement("font-face-name") }} and {{ SVGElement("font-face-uri") }}. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead.</p> @@ -48,60 +49,49 @@ Internet Explorer <a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-m <p>There are two further elements that can be defined inside <code>font</code>: {{ SVGElement("hkern") }} and {{ SVGElement("vkern") }}. Each carries references to at least two characters (attributes <code>u1</code> and <code>u2</code>) and an attribute <code>k</code> that determines how much the distance between those characters should be decreased. The below example instructs user agents to place the "A" and "V" characters closer together the standard distance between characters.</p> -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>hkern</span> <span class="attr-name token">u1</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>A<span class="punctuation token">"</span></span> <span class="attr-name token">u2</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>V<span class="punctuation token">"</span></span> <span class="attr-name token">k</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>20<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span></code></pre> +<pre class="brush: html"><hkern u1="A" u2="V" k="20" /></pre> <h2 id="Référencer_une_police">Référencer une police</h2> <p>Lorsque vous avez mis en place votre déclaration de police comme décrit ci-dessus, vous pouvez utiliser un simple attribut <code>font-family</code> pour réellement appliquer la police à un texte SVG:</p> -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="comment token"><!-- ... --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<pre class="brush: html"><font> + <font-face font-family="Super Sans" /> + <!-- ... --> +</font> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>My text uses Super Sans<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span></code></pre> +<text font-family="Super Sans">My text uses Super Sans</text></pre> <p>Cependant, vous êtes libre de combiner plusieurs méthodes pour une plus grande liberté de où et comment définir la police.</p> <h3 id="Option_Utiliser_le_CSS_font-face">Option: Utiliser le CSS @font-face</h3> -<p> </p> - <p>Vous pouvez utiliser <code>@font-face</code> pour les polices externes de référence :</p> -<p> </p> - -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super_Sans<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="comment token"><!-- ... --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<pre class="brush: html"><font id="Super_Sans"> + <!-- ... --> +</font> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/css<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-css style token"> -<span class="atrule token"><span class="rule token">@font-face</span></span> <span class="punctuation token">{</span> - <span class="property token">font-family</span><span class="punctuation token">:</span> <span class="string token">"Super Sans"</span><span class="punctuation token">;</span> - <span class="property token">src</span><span class="punctuation token">:</span> <span class="token url">url(#Super_Sans)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> +<style type="text/css"> +@font-face { + font-family: "Super Sans"; + src: url(#Super_Sans); +} +</style> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>My text uses Super Sans<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span></code></pre> +<text font-family="Super Sans">My text uses Super Sans</text></pre> <h3 id="Option_Référencer_une_police_externe">Option: Référencer une police externe</h3> -<p> </p> - <p>L'élément mentionné <code>font-face-uri</code> vous permet de référencer une police externe, permettant donc une plus grande réutilisabilité :</p> -<p> </p> -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face-src</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face-uri</span> <span class="attr-name token"><span class="namespace token">xlink:</span>href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fonts.svg#Super_Sans<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font-face-src</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font-face</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><font> + <font-face font-family="Super Sans"> + <font-face-src> + <font-face-uri xlink:href="fonts.svg#Super_Sans" /> + </font-face-src> + </font-face> +</font></pre> -<article class="approved"> -<div class="boxed translate-rendered text-content"> <p>{{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }}</p> -</div> -</article> diff --git a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html index 23766ed357..5eb5bade39 100644 --- a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html +++ b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html @@ -6,13 +6,13 @@ tags: translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction original_slug: Web/SVG/Tutoriel/Introduction_à_SVG_dans_HTML --- -<h3 id="Aper.C3.A7u" name="Aper.C3.A7u">Aperçu</h3> +<h3 id="Aper.C3.A7u">Aperçu</h3> <p>Cet article et son exemple associé montrent comment utiliser du <a href="fr/SVG">SVG</a> en ligne pour fournir une image de fond à un formulaire. Il montre comment <a href="fr/JavaScript">JavaScript</a> et <a href="fr/CSS">CSS</a> peuvent servir à manipuler l'image comme vous le feriez avec le XHTML dans un script. Notez que l'exemple ne fonctionnera que dans des navigateurs supportant XHTML (pas HTML) et l'intégration SVG.</p> -<h3 id="Source" name="Source">Source</h3> +<h3 id="Source">Source</h3> -<p>Voici le code source de <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">cet exemple</a> :</p> +<p>Voici le code source de cet exemple :</p> <pre><html xmlns="http://www.w3.org/1999/xhtml"> <head> @@ -54,7 +54,7 @@ original_slug: Web/SVG/Tutoriel/Introduction_à_SVG_dans_HTML </body> </html></pre> -<h3 id="Discussion" name="Discussion">Discussion</h3> +<h3 id="Discussion">Discussion</h3> <p>La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément <svg>. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attribut <code>invalid</code> à la balise <body> et une règle de style modifie la couleur <code>end-stop</code> du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur).</p> @@ -70,7 +70,7 @@ original_slug: Web/SVG/Tutoriel/Introduction_à_SVG_dans_HTML <li>Le document est entièrement basé sur les standards</li> </ul> -<h3 id="D.C3.A9tails" name="D.C3.A9tails">Détails</h3> +<h3 id="D.C3.A9tails">Détails</h3> <p>L'attribut <code>viewBox</code> établit un système de coordonnées logiques sur lequel les coordonnées de l'image SVG s'appuient de façon relative. Dans ce cas, notre image s'étend dans un cadre de visualisation de 100 sur 100.</p> @@ -78,11 +78,9 @@ original_slug: Web/SVG/Tutoriel/Introduction_à_SVG_dans_HTML <p>L'attribut <code>style</code> ancre l'élément SVG en arrière plan du formulaire.</p> -<h3 id="Liens_sur_le_sujet" name="Liens_sur_le_sujet">Liens sur le sujet</h3> +<h3 id="Liens_sur_le_sujet">Liens sur le sujet</h3> <ul> <li>L'article wikipedia sur le format <a href="http://fr.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG</a></li> - <li>La page <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Inline_SVG">Inline SVG</a> sur le wiki SVG</li> -</ul> - -<p>{{ languages( { "en": "en/SVG_In_HTML_Introduction", "ja": "ja/SVG_In_HTML_Introduction", "pl": "pl/SVG_w_XHTML_-_Wprowadzenie" } ) }}</p> + <li>La page <a href="http://svg-whiz.com/wiki/index.php?title=Inline_SVG">Inline SVG</a> sur le wiki SVG</li> +</ul>
\ No newline at end of file diff --git a/files/fr/web/svg/tutorial/texts/index.html b/files/fr/web/svg/tutorial/texts/index.html index 50a56982f4..972538e2bd 100644 --- a/files/fr/web/svg/tutorial/texts/index.html +++ b/files/fr/web/svg/tutorial/texts/index.html @@ -41,10 +41,9 @@ original_slug: Web/SVG/Tutoriel/Texts </text> </pre> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="exemple_jouable">Exemple jouable</h6> -<pre class="brush:html"><svg width="350" height="60" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush:html hidden"><svg width="350" height="60" xmlns="http://www.w3.org/2000/svg"> <text> This is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> @@ -57,9 +56,8 @@ original_slug: Web/SVG/Tutoriel/Texts ]]></style> </svg> </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', '100%', 100) }}</p> +<p>{{ EmbedLiveSample('exemple_jouable', '100%', 100) }}</p> <p>L'élément tspan peut prendre les attributs personnalisés suivants:</p> @@ -99,10 +97,9 @@ original_slug: Web/SVG/Tutoriel/Texts </textPath> </text></pre> -<div class="hidden"> -<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6> +<h4 id="code_jouable_2">Code jouable 2</h4> -<pre class="brush:html"><svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush:html hidden"><svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" /> <text> <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> @@ -118,8 +115,7 @@ original_slug: Web/SVG/Tutoriel/Texts ]]></style> </svg> </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2', '100%', 100) }}</p> +<p>{{ EmbedLiveSample('code_jouable_2', '100%', 100) }}</p> <div>{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}</div> diff --git a/files/fr/web/svg/tutorial/tools_for_svg/index.html b/files/fr/web/svg/tutorial/tools_for_svg/index.html index 3ccff4deb5..52468aa4d9 100644 --- a/files/fr/web/svg/tutorial/tools_for_svg/index.html +++ b/files/fr/web/svg/tutorial/tools_for_svg/index.html @@ -14,7 +14,7 @@ original_slug: Web/SVG/Tutoriel/Tools_for_SVG <h2 id="Inkscape">Inkscape</h2> -<p>URL: <a class="external" href="http://www.inkscape.org">www.inkscape.org</a></p> +<p>URL: <a href="http://www.inkscape.org">www.inkscape.org</a></p> <p>L'un des outils fondamentaux pour travailler un format graphique est un logiciel de dessin performant. Inkscape permet de faire du dessin vectoriel, il est mis à jour régulièrement, et a le mérite d'être open source.</p> @@ -22,27 +22,27 @@ original_slug: Web/SVG/Tutoriel/Tools_for_SVG <h2 id="Adobe_Illustrator">Adobe Illustrator</h2> -<p>URL: <a class="external" href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p> +<p>URL: <a href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p> <p>Avant de racheter Macromedia, Adobe était le plus ardent défenseur de SVG. C'est de cette époque que date le bon support du SVG dans Illustrator. Cependant, le code généré comporte souvent des bizarreries, qui obligent à le retraiter pour pouvoir l'utiliser en dehors d'Illustrator.</p> <h2 id="Apache_Batik">Apache Batik</h2> -<p>URL: <a class="external" href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p> +<p>URL: <a href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p> <p>Batik est un ensemble d'outils open source proposés par Apache Software Foundation. La boite à outils est codée en Java et assure un support quasi intégral de SVG 1.1, ainsi que certaines des fonctionnalités qui étaient prévues à l'origine pour SVG 1.2.</p> <p>En plus d'un outil de visualisation (Squiggle) et d'un moteur d'aplatissement des calques pour l'export en PNG, Batik propose aussi un outil de formatage du code SVG, ainsi qu'un convertisseur de typographie TrueType vers SVG.</p> -<p>Utilisé avec <a class="external" href="http://xmlgraphics.apache.org/fop/">Apache FOP</a>, il permet également de transformer du SVG en PDF.</p> +<p>Utilisé avec <a href="http://xmlgraphics.apache.org/fop/">Apache FOP</a>, il permet également de transformer du SVG en PDF.</p> <h3 id="Autres_moteurs_de_rendu">Autres moteurs de rendu</h3> -<p>Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. <a class="external" href="http://ImageMagick.org">ImageMagick</a> est l'un des outils les plus connus de traitement des images en ligne de commande. Wikipédia utilise la librairie de code Gnome <a class="external" href="http://library.gnome.org/devel/rsvg/">rsvg</a> pour le rendu de ses images SVG.</p> +<p>Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. <a href="http://ImageMagick.org">ImageMagick</a> est l'un des outils les plus connus de traitement des images en ligne de commande. Wikipédia utilise la librairie de code Gnome <a href="http://library.gnome.org/devel/rsvg/">rsvg</a> pour le rendu de ses images SVG.</p> <h2 id="Raphael_JS">Raphael JS</h2> -<p>URL: <a class="external" href="http://raphaeljs.com/">raphaeljs.com</a></p> +<p>URL: <a href="http://raphaeljs.com/">raphaeljs.com</a></p> <p>Raphaël est un framework javascript, qui propose une couche d'abstraction pour les différentes implémentations des navigateurs. Les vieilles versions d'Internet Explorer sont supportées grace à la génération de code VML, un langage de balisage vectoriel, qui est l'un des ancêtres de SVG et existe depuis IE 5.5.</p> @@ -54,18 +54,18 @@ original_slug: Web/SVG/Tutoriel/Tools_for_SVG <h2 id="Google_Docs">Google Docs</h2> -<p>URL: <a class="external" href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p> +<p>URL: <a href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p> <p>Les dessins réalisés dans Google Docs peuvent être exportés en SVG.</p> <h2 id="Science">Science</h2> -<p>Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web <a class="external" href="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a> supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs.</p> +<p>Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web <a href="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a> supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs.</p> -<p>SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf <a class="external" href="http://carto.net">carto.net</a> pour davantage de détails.</p> +<p>SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf <a href="http://carto.net">carto.net</a> pour davantage de détails.</p> <h2 id="Autres_outils">Autres outils</h2> -<p>Le W3C propose une <a class="external" href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">liste des programmes</a> qui supportent le SVG.</p> +<p>Le W3C propose une <a href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">liste des programmes</a> qui supportent le SVG.</p> <p>{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}</p> |