SVG as an image

SVG can be used as an image format in HTML, CSS, certain SVG elements, and via the Canvas API. This page lists the features where you can provide SVG as an image source.

Features supporting SVG

Browsers support SVG images in:

• HTML {{HTMLElement("img")}}  or {{SVGElement("svg")}}  elements
• CSS {{cssxref("background-image")}} 
• CSS {{cssxref("list-style-image")}} 
• CSS {{cssxref("content")}} 
• SVG {{SVGElement("image")}}  element
• SVG {{SVGElement("feImage")}}  element
• Canvas drawImage function

Restrictions

For security purposes, some browsers place restrictions on SVG content when it’s being used as an image. Specifically, the following limitations may apply:

• JavaScript is disabled.
• External resources (e.g., images, stylesheets) cannot be loaded, though they can be used if inlined through data: URLs.
• {{cssxref(":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 {{HTMLElement("iframe")}} , {{HTMLElement("object")}} , or {{HTMLElement("embed")}}  elements.

Specifications

{{Specifications}}