aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/svg/tutorial/other_content_in_svg
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 12:36:08 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 12:36:08 +0100
commit39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch)
tree66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/web/svg/tutorial/other_content_in_svg
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz
translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2
translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip
unslug fr: move
Diffstat (limited to 'files/fr/web/svg/tutorial/other_content_in_svg')
-rw-r--r--files/fr/web/svg/tutorial/other_content_in_svg/index.html36
1 files changed, 36 insertions, 0 deletions
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
new file mode 100644
index 0000000000..ecaf0e7d60
--- /dev/null
+++ b/files/fr/web/svg/tutorial/other_content_in_svg/index.html
@@ -0,0 +1,36 @@
+---
+title: Contenu embarqué dans le SVG
+slug: Web/SVG/Tutoriel/Contenu_embarque_SVG
+translation_of: Web/SVG/Tutorial/Other_content_in_SVG
+---
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }}</p>
+
+<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>
+
+<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>&lt;svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="200" height="200"&gt;
+ &lt;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"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<p><img alt="imagedemo.png" class="default internal" src="/@api/deki/files/4949/=imagedemo.png"></p>
+
+<h3 id="Embarquer_du_contenu_XML_quelconque">Embarquer du contenu XML quelconque</h3>
+
+<p>Étant donné que le SVG est un document XML, il est toujours possible d'adjoindre un contenu XML quelconque n'importe où dans le document. Mais il n'y a évidemment aucun moyen de savoir comment l'élément SVG encadrant votre contenu réagira à ce qui aura été inséré. En fait, un lecteur SVG correct ne réagira d'aucune façon particulière et ignorera purement et simplement ce contenu. Si la spécification ajoute l'élément SVG <code><strong>foreignObject</strong>, </code>son utilité est essentiellement d'être une coquille pour d'autres balises et de permettre d'adjoindre des attributs de style (comme par exemple la <em>largeur</em> et la <em>hauteur</em> de l'objet embarqué afin de définir la place que celui-ci occupera).</p>
+
+<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>
+
+<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>
+
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }}</p>