W3cubDocs

/SVG

SVG as an Image

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

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

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_as_an_Image