initial commit

1 files changed, 158 insertions, 0 deletions

diff --git a/files/zh-cn/web/svg/svg_as_an_image/index.html b/files/zh-cn/web/svg/svg_as_an_image/index.html
new file mode 100644
index 0000000000..80fbdbc59b
--- /dev/null
+++ b/files/zh-cn/web/svg/svg_as_an_image/index.html
@@ -0,0 +1,158 @@
+---
+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>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>in HTML {{HTMLElement("img")}}</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>9</td>
+   <td>9.0</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>in CSS background</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>9</td>
+   <td>9.5</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>in other contexts</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>in HTML {{HTMLElement("img")}}</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>in CSS background</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>in other contexts</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Safari移动浏览器只有在CSS background中实现了对SVG的部分支持</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/SVG_In_HTML_Introduction">SVG in HTML introduction</a></li>
+</ul>