← Overview

inlineSVG

Replaces an <img> that points at an .svg file with a real, inline <svg> node.

Once inlined, an SVG becomes an ordinary part of the document: it can inherit currentColor and be styled by page CSS. The three copies of the same file below are tinted purely by the color of their parent — proof the graphic is live SVG, not a sealed <img>.

Warning Warning Warning

Hover me. The inlined icon recolours on :hover via CSS on its wrapper — impossible with an <img>.

Close Close

One container, many icons. Putting data-js-behavior="inlineSVG" on a wrapper inlines every <img> inside it. The chevron below is decorative (alt=""), so its inlined SVG is hidden from assistive tech.