SVG as an Image

SVG images can be used as an image format, in a number of contexts. Many browsers support SVG images in:

HTML <img> or <svg> 元素
CSS background-image

Gecko-specific contexts

Additionally, Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) introduced support for using SVG in these contexts:

CSS list-style-image
CSS content
SVG <image> element
SVG <feImage> element
Canvas drawImage function

Restrictions

For security purposes, Gecko places some restrictions on SVG content when it's being used as an image:

JavaScript 被禁用。
External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through data: URIs.
:visited -link styles aren't rendered.
Platform-native widget styling (based on OS theme) is disabled.

Note that the above restrictions are specific to image contexts; they don't apply when SVG content is viewed directly, or when it's embedded as a document via the <iframe> , <object> , or <embed> 元素。

规范

规范	状态	注释
HTML5 The definition of 'SVG within <img> element' in that specification.	推荐	Defines the usage of SVG within `<img>` 元素。
CSS Backgrounds and Borders Module Level 3 The definition of 'SVG within 'background-image' CSS property' in that specification.	候选推荐	Defines the usage of SVG within the `background-image` 特性。

另请参阅

SVG in HTML introduction

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者