How to Use SVGs on Websites

Inline SVG places the <svg> element directly in the document. It can be useful when CSS needs to style individual paths or when the graphic needs page-level interaction. The markup becomes part of the HTML, so large inline graphics can increase document size.

An <img> element referencing an SVG file keeps the markup separate and allows normal image caching. The SVG's internal elements are not available for page CSS styling through the image element.

A CSS background image works well for decorative artwork and repeating patterns. It does not provide the same text alternative as a semantic image, so do not use it as the only way to communicate meaningful content.

Only embed or serve SVG files from sources you trust. If users can upload SVGs, validate and sanitize them on the server before serving them, and apply an appropriate content security policy.