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

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.

Gecko-specific contexts

Restrictions

Specifications

Browser compatibility

See also

Document Tags and Contributors