Using an SVG Fragment

With the object Element

Support: Chrome, IE 9+, IOS 6+, Firefox, Safari 7+

Pros: Works in all the last-three browsers, and external fill support.

Cons: URL lives in HTML, iframe-like, and no local fill support.

With the img Element

Support: Chrome, IE 9+, IOS 8+, Firefox, Safari 8+

Pros: Works in all the latest browsers.

Cons: Quirky display in Safari, URL lives in HTML, and no external or local fill support.

With the use Element

Support: Chrome, Firefox, IOS 6+, Safari 7+

Pros: local fill support, and polyfillable for IE9+.

Cons: URL lives in HTML, and no external fill support.

With the background-image CSS Property

Support: IE 9+

Pros: URL lives in CSS.

Cons: No external or local fill support.

Notes

Local fill support refers to an ability to style the fill color of the SVG from this document’s CSS, whereas external fill support refers to an ability to style the fill color of the SVG from the SVG’s own embedded CSS.