path: root/files/ja/web/svg/element/image/index.html

---
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>