SVG as an Image
SVG images can be used as an image format, in a number of contexts. Browsers support SVG images in:
- HTML
<img>
or<svg>
elements - CSS
background-image
- 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 is disabled.
- External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through data: URLs.
: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>
elements.
Specifications
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-background-image |