files/ja/web/svg/svg_as_an_image/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

---
title: 画像としての SVG
slug: Web/SVG/SVG_as_an_Image
tags:
  - Images
  - NeedsContent
  - SVG
translation_of: Web/SVG/SVG_as_an_Image
---
<p><span class="seoSummary">SVG 画像は、様々な場面で画像形式の一つとして使用することができます。多くのブラウザーは SVG 画像を以下の場所で対応しています。</span></p>

<ul>
 <li>HTML の {{HTMLElement("img")}} または {{SVGElement("svg")}} 要素</li>
 <li>CSS の {{cssxref("background-image")}}</li>
</ul>

<h2 id="Gecko-specific_contexts" name="Gecko-specific_contexts">Gecko 固有の場所</h2>

<p>さらに、 Gecko 2.0 {{geckoRelease("2.0")}}では次の場所でも SVG の使用に対応しています。</p>

<ul>
 <li>CSS の {{cssxref("list-style-image")}}</li>
 <li>CSS の {{cssxref("content")}}</li>
 <li>SVG の {{SVGElement("image")}} 要素</li>
 <li>SVG の {{SVGElement("feImage")}} 要素</li>
 <li>Canvas の <a href="/ja/docs/HTML/Canvas/Tutorial/Using_images#drawImage"><code>drawImage</code></a> 関数</li>
</ul>

<h3 id="Restrictions" name="Restrictions">制限</h3>

<p>セキュリティ上の目的で、 Gecko は SVG コンテンツを画像として扱う場合にいくつかの制限を設けています。</p>

<ul>
 <li><a href="/ja/docs/JavaScript">JavaScript</a> は無効になります。</li>
 <li>外部のリソース (画像やスタイルシートなど) を読み込むことはできませんが、 data: URI を使用してインライン化されていれば可能です。</li>
 <li>{{cssxref(":visited")}}-のリンクスタイルは描画されません。</li>
 <li>プラットフォームネイティブのウィジェットのスタイル付け (OS のテーマに基づくもの) は無効です。</li>
</ul>

<p>なお、上記の制限は画像のコンテキストに限定されたものです。 SVG コンテンツが直接表示された場合、または {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}} の何れかの要素を使用して文書として埋め込まれた場合には適用されません。</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("HTML5 W3C", "embedded-content-0.html#the-img-element", "SVG within &lt;img&gt; element")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td>{{HTMLElement("img")}} 要素内の SVG の使い方を定義。</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Backgrounds", "#the-background-image", "SVG within 'background-image' CSS property")}}</td>
   <td>{{Spec2("CSS3 Backgrounds")}}</td>
   <td>{{cssxref("background-image")}} プロパティ内の SVG の使い方を定義。</td>
  </tr>
 </tbody>
</table>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/SVG_In_HTML_Introduction">HTML 内の SVG 入門</a></li>
</ul>