initial commit

1 files changed, 102 insertions, 0 deletions

diff --git a/files/ja/web/svg/element/image/index.html b/files/ja/web/svg/element/image/index.html
new file mode 100644
index 0000000000..874f1d59ac
--- /dev/null
+++ b/files/ja/web/svg/element/image/index.html
@@ -0,0 +1,102 @@
+---
+title: <image>
+slug: Web/SVG/Element/image
+tags:
+  - Element
+  - Reference
+  - SVG
+  - SVG Graphics
+translation_of: Web/SVG/Element/image
+---
+<div>{{SVGRef}}</div>
+
+<p><span class="seoSummary">The <strong><code>&lt;image&gt;</code></strong> は SVG の要素で、 SVG 文書内に画像を含めます。これは{{glossary("raster image", "ラスター画像")}}ファイルや他の SVG ファイルを表示することができます。</span></p>
+
+<p>SVG ソフトウェアが対応する必要がある画像形式は {{glossary("JPEG")}}, {{glossary("PNG")}}, および他の SVG ファイルです。アニメーション {{glossary("GIF")}} の動作は未定義です。</p>
+
+<p><code>&lt;image&gt;</code> で表示される SVG ファイルは<a href="/ja/docs/Web/SVG/SVG_as_an_Image">画像として扱われます</a>。外部リソースは読み込まれず、 {{cssxref(":visited")}} のスタイルは<a href="/ja/docs/Web/CSS/Privacy_and_the_:visited_selector">適用されず</a>、ユーザーと対話することはできません。動的な SVG 要素を埋め込みたいのであれば、 {{SVGElement("use")}} を外部 URL で使用してください。 SVG ファイルを含めてその中でスクリプトを実行するのであれば、 {{HTMLElement("object")}} を {{SVGElement("foreignObject")}} の中で使用してください。</p>
+
+<div class="note">
+<p><strong>注:</strong> HTML 仕様書は、解釈時に <code>&lt;image&gt;</code> を {{HTMLElement("img")}} の別名として定義しています。この仕様書の要素とその動作は SVG 文書または<a href="/ja/docs/SVG_In_HTML_Introduction">インライン SVG</a> 内のみのものです。</p>
+</div>
+
+<h2 id="Usage_context" name="Usage_context">使用場所</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributes" name="Attributes">属性</h2>
+
+<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a></li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#Graphical_event_attributes">グラフィカルイベント属性</a></li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#Xlink_attributes">Xlink 属性</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+</ul>
+
+<h3 id="Specific_attributes" name="Specific_attributes">固有の属性</h3>
+
+<ul>
+ <li>{{SVGAttr("x")}}: 原点から見た画像の水平位置です。</li>
+ <li>{{SVGAttr("y")}}: 原点から見た画像の垂直位置です。</li>
+ <li>{{SVGAttr("width")}}: 画像が描画される幅です。 HTML の <code>&lt;img&gt;</code> とは異なり、この属性は必須です。</li>
+ <li>{{SVGAttr("height")}}: 画像が描画される高さです。 HTML の <code>&lt;img&gt;</code> とは異なり、この属性は必須です。</li>
+ <li>{{SVGAttr("href")}} および {{SVGAttr("xlink:href")}}: 画像ファイルの URL を指します。</li>
+ <li>{{SVGAttr("preserveAspectRatio")}}: 画像の拡大縮小方法を制御し案す。</li>
+</ul>
+
+<h2 id="DOM_Interface" name="DOM_Interface">DOM インターフェイス</h2>
+
+<p><code>&lt;image&gt;</code> は {{domxref("SVGImageElement")}} インターフェイスを実装しています。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>SVG 内における PNG 画像の基本的な描画:</p>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html notranslate">&lt;svg width="200" height="200"
+  xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 250, 260)}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'embedded.html#ImageElement', '&lt;image&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td><code>height</code> および <code>width</code> を省略可能とした</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'struct.html#ImageElement', '&lt;image&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("svg.elements.image")}}</p>