SVG images can be used as an image format in a number of contexts. Many browsers support SVG images in:
- HTML
<img>
or<svg>
elements - 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
- 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 BlobBuilder object URLs or 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>
elements.
Specifications
Specification | Status | Comment |
---|---|---|
HTML5 The definition of 'SVG within <img> element' in that specification. |
Recommendation | Defines the usage of SVG within <img> elements. |
CSS Backgrounds and Borders Module Level 3 The definition of 'SVG within 'background-image' CSS property' in that specification. |
Candidate Recommendation | Defines the usage of SVG within the background-image property. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
in HTML <img> |
4.0 | 4.0 (2) | 9 | 9.0 | 4 |
in CSS background | 4.0 | 4.0 (2) | 9 | 9.5 | 5 |
in other contexts | ? | 4.0 (2) | ? | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
in HTML <img> |
3.0 | 4.0 (2) | ? | 10.0 | 4.0 |
in CSS background | 3.0 | 4.0 (2) | ? | 10.0 | 3.2[1] |
in other contexts | ? | 4.0 (2) | ? | ? | ? |
[1] Safari Mobile only has partial support for SVG in CSS backgrounds.
See also
Document Tags and Contributors
Tags:
Contributors to this page:
arai,
fscholz,
elatllat,
Zcorpan,
Sebastianz,
Barbrousse,
Jeremie,
ethertank,
[email protected],
fusionchess,
jswisher,
Sephr,
Dholbert
Last updated by:
arai,