Use inline SVG when markup needs control
Paste SVG markup directly into HTML when you need CSS styling, accessible titles, scripted states, or currentColor inheritance.
svg in html
Add SVG to HTML with inline SVG, img, or CSS
SVG can live directly in HTML as inline markup, load through an img tag, or sit in CSS backgrounds and sprites. Pick the method based on styling, accessibility, caching, and trust.
Use img or background SVG for static assets
Reference an SVG file with an img tag or CSS background when the asset is cacheable and does not need internal styling.
Sanitize SVG before inline HTML
Clean untrusted SVG before inlining it because SVG is XML and can contain scripts, events, or external references.
Inline SVG example
A titled inline icon can be accessible and styleable.
<svg viewBox="0 0 24 24" role="img"><title>Upload</title><path d="M12 4v12M7 9l5-5 5 5M5 20h14" fill="none" stroke="currentColor" stroke-width="2"/></svg>SVG in HTML Guide FAQ
How do I put SVG in HTML?
Use inline SVG markup, an img tag that points to an SVG file, or a CSS background image for decorative assets.
Is inline SVG better than img?
Inline SVG is better for styling and accessibility control; img is better for simple static files that benefit from browser caching.
Can inline SVG be unsafe?
Yes, if the SVG is untrusted. Sanitize it before inlining.