---
title: SVG 作为图片
slug: Web/SVG/SVG_as_an_Image
tags:
  - SVG
  - 图像
  - 需要内容
translation_of: Web/SVG/SVG_as_an_Image
---
<p>SVG图像可以作为一种图片格式用在很多环境中。很多浏览器支持在下列环境中应用SVG图像：</p>

<ul>
 <li>HTML的{{HTMLElement("img")}} 元素或 {{HTMLElement("svg")}} 元素</li>
 <li>CSS的{{cssxref("background-image")}}属性</li>
</ul>

<h2 id="Gecko专有的环境">Gecko专有的环境</h2>

<p>另外，Gecko 2.0 {{geckoRelease("2.0")}}引入了在以下环境中支持使用SVG：</p>

<ul>
 <li>CSS的{{cssxref("list-style-image")}}属性</li>
 <li>SVG的{{SVGElement("image")}}元素</li>
 <li>SVG的{{SVGElement("feImage")}}元素</li>
 <li>Canvas的<a href="/zh-CN/docs/HTML/Canvas/Tutorial/Using_images#drawImage"><code>drawImage</code></a>函数</li>
</ul>

<h3 id="局限">局限</h3>

<p>如果SVG作为一个图像，出于安全目的，Gecko在SVG环境上作了一些限制：</p>

<ul>
 <li>禁用了<a href="/zh-CN/docs/JavaScript">JavaScript</a>。</li>
 <li>外部源（比如说：图像、样式表）不能载入，然而行内源可以使用（利用<a href="/zh-CN/docs/DOM/BlobBuilder">BlobBuilder</a>对象URL或者data: URI属性）。</li>
 <li>链接的{{cssxref(":visited")}}伪类不能呈现。</li>
 <li>禁用了平台原生的小部件样式（基于操作系统主题）</li>
</ul>

<p>注意上面的限制是对图像环境专有的；它们不能应用到直接看到的SVG上，也不能应用到嵌入在HTML的{{HTMLElement("iframe")}}元素、{{HTMLElement("object")}}元素和{{HTMLElement("embed")}}元素中的SVG上。</p>

<h2 id="规范文档">规范文档</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>
  <tr>
   <td>{{SpecName("SVG and HTML")}}</td>
   <td>{{Spec2("SVG and HTML")}}</td>
   <td>定义了HTML和XHTML内部的SVG的行内用法。</td>
  </tr>
 </tbody>
</table>



<h2 id="参见">参见</h2>

<ul>
 <li><a href="/zh-CN/docs/SVG_In_HTML_Introduction">SVG in HTML introduction</a></li>
</ul>