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.
Browsers support SVG images in:
<img> or <svg> elementsbackground-image
list-style-image
content
<image> element<feImage> elementdrawImage functionFor security purposes, some browsers place restrictions on SVG content when it's being used as an image. Specifically, the following limitations may apply:
data: URLs.:visited-link styles aren't rendered.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.
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image