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

Gecko-specific contexts

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

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: 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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

 Last updated by: Yukulele.,