Web/SVG/Tutorial/Other_content_in_SVG を更新 (#1036)

- 英語版章題マクロを除去
- 2020/12/20 時点の英語版に同期

1 files changed, 26 insertions, 16 deletions

diff --git a/files/ja/web/svg/tutorial/other_content_in_svg/index.html b/files/ja/web/svg/tutorial/other_content_in_svg/index.html
index 1b1aa2a6a0..7fffed676b 100644
--- a/files/ja/web/svg/tutorial/other_content_in_svg/index.html
+++ b/files/ja/web/svg/tutorial/other_content_in_svg/index.html
@@ -2,29 +2,39 @@
 title: Other content in SVG
 slug: Web/SVG/Tutorial/Other_content_in_SVG
 tags:
+  - Intermediate
   - SVG
   - 'SVG:Tutorial'
 translation_of: Web/SVG/Tutorial/Other_content_in_SVG
 ---
-<p>{{ PreviousNext("SVG/Tutorial/Clipping_and_masking", "SVG/Tutorial/Filter_effects") }}</p>
+<p>{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}</p>
+
 <p>長方形や円といったグラフィックの基本要素とは別に、SVG は画像内に他の種類のコンテンツを埋め込むための要素セットも同様に用意しています。</p>
-<p>{{ 英語版章題("Embedding raster images") }}</p>
-<h3 id="ラスターイメージの埋め込み">ラスターイメージの埋め込み</h3>
-<p>HTML における img 要素と同様に、SVG には同じ用途の <code>image</code> 要素があります。これを用いて、任意のラスター (およびベクター) イメージを埋め込むことができます。仕様書ではアプリケーションに対し、少なくとも PNG、JPEG、および SVG 形式のファイルをサポートするよう求めています。</p>
-<p>埋め込まれた画像は、通常の SVG 要素になります。つまり、コンテンツに対してクリップ、マスク、フィルタ、回転、およびその他 SVG の技術を用いることが出ます:</p>
-<pre>&lt;svg version="1.1"
+
+<h3 id="Embedding_raster_images">ラスター画像の埋め込み</h3>
+
+<p>HTML における img 要素と同様に、SVG には同じ用途の <code>image</code> 要素があります。これを用いて、任意のラスター (およびベクター) 画像を埋め込むことができます。仕様書ではアプリケーションに対し、少なくとも PNG、JPEG、および SVG 形式のファイルをサポートするよう求めています。</p>
+
+<p>埋め込まれた画像は、通常の SVG 要素になります。つまり、コンテンツに対してクリップ、マスク、フィルタ、回転、およびその他 SVG の技術を用いることができます。</p>
+
+<pre class="brush: html">&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;image x="90" y="-65" width="128" height="146" transform="rotate(45)"
+     xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/&gt;
 &lt;/svg&gt;
 </pre>
-<p><img alt="imagedemo.png" class="internal default" src="/@api/deki/files/4949/=imagedemo.png" style=""></p>
-<p>{{ 英語版章題("Embedding arbitrary XML") }}</p>
-<h3 id="任意の_XML_の埋め込み">任意の XML の埋め込み</h3>
-<p>SVG は XML アプリケーションであることから、<em>常に</em> SVG ドキュメント内のどこにでも任意の XML を埋め込むことができます。しかし、そのコンテンツに対して周囲の SVG がどのように作用するかを定義する方法はありません。実際、準拠しているビューアでは埋め込まれた XML が全く作用せず、そのデータは単純に省略されます。そのため、仕様書では SVG に <code>{{ SVGElement("foreignObject") }}</code> 要素を追加しています。この要素の唯一の用途は、他のマークアップのコンテナおよび SVG のスタイル属性 (もっとも顕著なものは、オブジェクトの領域を定義する <code>width</code> および <code>height</code> です) のキャリアになることです。</p>
+
+<p>{{ EmbedLiveSample('Embedding_raster_images','220','220','/files/16567/rotate-image-demo.png') }}</p>
+
+<h3 id="Embedding_arbitrary_XML">任意の XML の埋め込み</h3>
+
+<p>SVG は XML アプリケーションであることから、<em>常に</em> SVG 文書内のどこにでも任意の XML を埋め込むことができます。しかし、そのコンテンツに対して周囲の SVG がどのように作用するかを定義する方法はありません。実際、準拠しているビューアーでは埋め込まれた XML が全く作用せず、そのデータは単純に省略されます。そのため、仕様書では SVG に <code>{{ SVGElement("foreignObject") }}</code> 要素を追加しています。この要素の唯一の用途は、他のマークアップのコンテナーおよび SVG のスタイル属性 (もっとも顕著なものは、オブジェクトの領域を定義する <code>width</code> および <code>height</code> です) のキャリアーになることです。</p>
+
 <p><code>foreignObject</code> 要素は、SVG に XHTML を埋め込むのによい手段です。長いテキストがある場合、SVG の <code>text</code> 要素より HTML のレイアウトの方がより適切かつ使いやすくなります。他によく挙げられる使い方として、MathML の式の埋め込みがあります。これは SVG を科学分野で応用する場合に、SVG と MathML を統合するためにとてもよい方法です。</p>
-<div class="note"><strong>注意:</strong> <code>foreignObject</code> の内容物は、ビューアによって処理できなければならないことを覚えておいてください。スタンドアロンの SVG ビューアは、HTML や MathML のレンダリングができないでしょう。</div>
-<p><code>foreignObject</code> は SVG の要素ですので、<code>image</code> と同様に SVG のあらゆる技術を用いることができ、そしてそれは <code>foreignObject</code> の内容物に適用されます。</p>
-<p>{{ PreviousNext("SVG/Tutorial/Clipping_and_masking", "SVG/Tutorial/Filter_effects") }}</p>
-<p>{{ languages( { "en": "en/SVG/Tutorial/Other_content_in_SVG"} ) }}</p>
+
+<div class="note"><strong>注意:</strong> <code>foreignObject</code> の内容物は、ビューアーによって処理できなければならないことを覚えておいてください。スタンドアロンの SVG ビューアは、HTML や MathML のレンダリングができないでしょう。</div>
+
+<p><code>foreignObject</code> は SVG の要素ですので、<code>image</code> と同様に SVG のあらゆる技術を用いることができ、その内容物に適用されます。</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}</p>